Modal Theme Options
The modal container's coloring theme can be adjusted by the theme prop. The default is set to white.
Important Notes:The none prop makes the modal container transparent.The black, white,gray-xlight, navy-dark, navy, navy-light, teal, yellow, orange, pink, wine, berry, and violet, props adds the respective theme to the modal container.The theme prop only applies to viewports equal to or above the small breakpoint (~600px).
Demo
This is a modal with a transparent background.
This is a modal with a black theme.
This is a modal with a white theme.
This is a modal with a gray xlight theme.
This is a modal with a navy dark theme.
This is a modal with a navy theme.
This is a modal with a navy light theme.
This is a modal with a teal theme.
This is a modal with a yellow theme.
This is a modal with a orange theme.
This is a modal with a pink theme.
This is a modal with a wine theme.
This is a modal with a berry theme.
This is a modal with a violet theme.
Twig
{% include '@bolt-components-modal/modal.twig' with {
content: 'This is a modal with a white theme.',
theme: 'white',
attributes: {
class: 'js-bolt-modal--theme-white',
},
} only %}