Theme combos come in two flavors — one light and one dark color scheme. They can be used on sites that support both, light and dark mode. Toggling light and dark color schemes is handled using this selector strategy. The light colors are used by default.
Single themes just come in one single flavour. Unlike theme combos, a single theme is not affacted by classes of parent elements.
In order to provide a fine-grained control over the
active color scheme,
prefers-color-scheme
is ignored by theme
combos and the following selectors are used to apply a
scheme instead:
html[class*="dark-"]
will enable dark
mode whenever the html
element has a
class containing "dark-"
html[class*="-dark"]
will enable dark
mode whenever the html
element has a
class containing "-dark"
.dark
will enable dark mode for any
element nested inside a container with the "dark"
class.