Themes

Default theme #

The application’s current theme reflects the user’s system settings. The preferred theme of the application can be set by specifying the order of the color-theme HTML meta tag.

<meta name="color-scheme" content="light dark" />

Allow users to overwrite the application theme by enabling them to set a preference using a theme switcher.

Inverse the current theme #

The page-wide theme can be reversed for parts of the UI. The CSS class .theme-inverse is used to apply the styles of the other theme.

Always use a certain theme #

You can also overwrite parts of the UI to ensure that the light or dark theme is always used.

The light theme is useful for cases where dark text is always needed on a given background.

<div class="theme-light theme-bg-accent">Text</div>

Using the dark theme is useful for image overlays, for example, where light text is needed on a dark background.

<div class="pile theme-dark">
  <picture>...</picture>
  <div class="overlay-content">Text</div>
</div>