Class-based, media-based and selector-based dark mode — choosing and wiring the right strategy.

The idea#

Class strategy: toggle dark on <html> and control the scheme yourself (persists with localStorage). Media strategy: follow the OS preference with zero JS. Selector strategy (3.1): scope dark mode to any ancestor selector. Pick one, then express all variants with dark: prefixes.

In practice#

example
html
<html class="dark">
  <body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
    …
  </body>
</html>

Common mistakes#

  • Mixing media and class strategies in one app
  • Forgetting dark: variants on images and shadows (they glare)
  • Toggling the class on <body> when darkMode expects <html>

Keep learning#

Next: concepts/design-tokens|Design tokens and utilities/index|the utilities reference put this concept to work. For the big picture, see getting-started/introduction|the introduction.