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 %}
HTML
Not available in plain HTML. Please use Twig.