light-dark(): one color, two themes, zero @media

A 2024 CSS feature you already wanted

You've been writing this for years:

:root { --bg: white; }
@media (prefers-color-scheme: dark) {
  :root { --bg: oklch(0.18 0 0); }
}

light-dark() collapses both into one expression:

:root {
  color-scheme: light dark;
  --bg: light-dark(white, oklch(0.18 0 0));
}

The browser picks the first argument when the user is in light mode, the second in dark. The color-scheme declaration tells the browser "this element supports both" — required for light-dark() to know what "light" and "dark" actually mean.

Why this is better than @media

• Less duplication — each token defined once, both values inline.
• Local overrides — a single component can swap its dark color without redefining the whole root variable cascade.
• Forced-scheme APIs — color-scheme: only dark at a subtree level still works; light-dark() reads the cascaded value.

Browser support

Chromium 123, Safari 17.5, Firefox 120 — all shipped 2024. Use a fallback for older Chromium:

:root { --bg: white; }
@supports (color: light-dark(white, black)) {
  :root { --bg: light-dark(white, oklch(0.18 0 0)); }
}
@media (prefers-color-scheme: dark) {
  :root:not(:has(*)) { --bg: oklch(0.18 0 0); }  /* legacy path */
}

For greenfield 2026 code, just use light-dark() and accept that pre-2024 Chromium gets the first arg always.