Theme Background inherits its theme from the closest parent element with a theming class.
Important Notes: The background component does not have a theme prop. Theme is instead determined by a t-bolt-* class on the nearest parent element. Theme affects both background color and text, buttons, etc. For this reason, do not add a t-bolt-* class to the background itself, but rather a parent element that is also a parent of any overlaid text. Accessibility may vary with gradient fills or opacity less than full. Use the focal_point prop, text positioning, and good judgment in these scenarios.
Demo

All themes are supported. A few examples are shown below.

Alt text.
White Theme

This background has a solid fill and the surrounding theme is t-bolt-white
Alt text.
Black Theme

This background has a solid fill and the surrounding theme is t-bolt-black
Alt text.
Dark Navy Theme

This background has a solid fill and the surrounding theme is t-bolt-navy-dark
Twig
<div class="t-bolt-navy-dark">
  {% include '@bolt-components-background/background.twig' with {
    fill: 'solid',
  } only %}
</div>
HTML
Not available in plain HTML. Please use Twig.