Global theme

Global theme utility classes MUST be be applied on the parent <html> element (on the same element as the bolt-typography class).

Options include:

• Light: (Default)
  • Applies default light mode appearance and theme token values
  • The SASS versions of theme tokens will always reflect their default, light mode values
• Dark: use bolt-theme--dark class
  • Updates Bolt styles & CSS theme token values to their dark mode equivalents
• System: use bolt-theme--system class
  • Follows user's system preferences to apply either light or dark mode

<html class="bolt-typography bolt-theme--dark">
  ...
</html>

To see different theme configurations in action: Open display settings

Use theme tokens when styling elements that should follow the global theme, but should not be affected by the color of a background container. For example, a tile provides its own independent surface, and thus should not be affected by local contextual theme.

Options include:

• bolt-theme--light-content
  • Add this class to default light mode content to hide it in dark mode.
• bolt-theme--dark-content
  • Add this class to content that should only be visible in dark mode.

This approach may be necessary when using static assets, such as images, that cannot make use of dynamic CSS tokens. For example, logos or brand icons may have multiple versions intended for use on light or dark backgrounds.

Theme-swapping brand icons Permalink to "Theme-swapping brand icons" #

<bolt-tile-group>
  <bolt-tile href="#" label="Tile label">
    <img
      slot="thumbnail"
      src="/images/map-outline.svg"
      class="bolt-theme--light-content"
    />
    <img
      slot="thumbnail"
      src="/images/map-outline-white.svg"
      class="bolt-theme--dark-content"
    />
  </bolt-tile>
  ...
</bolt-tile-group>