light-dark()

Baseline 2024 Reference ↗

light-dark() keeps small light/dark token pairs in one declaration. Opt the page into both schemes first.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#171717, #f7f3e8);
  background: light-dark(#f7f3e8, #171717);
}

It follows the active color scheme; it does not create a theme switcher. Keep a sensible fallback before the declaration if older browsers remain in scope.