light-dark()

Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Image values in light-dark() are newer (Chrome 150, Firefox 150).

Chrome 123Edge 123Safari 17.5Firefox 120

Picks one of two colors depending on the element's `color-scheme`. Together with `color-scheme: light dark` it gives a full dark mode in one declaration per token, no media query duplication.

Follows the OS theme.

CSS

.fx-009{
  color-scheme:light dark;
  --bg:light-dark(#fff,#111);--fg:light-dark(#111,#eee);--accent:light-dark(#2563eb,#60a5fa);
  background:#fff;background:var(--bg);color:#111;color:var(--fg);padding:16px;border-radius:10px;font-family:system-ui;
}
.fx-009 button{background:#2563eb;background:var(--accent);color:#fff;color:var(--bg);border:0;padding:8px 14px;border-radius:6px}
.fx-009 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-009"><p>Follows the OS theme.</p><button>Action</button></div>

Fallback: Unsupported browsers ignore the light-dark() values and keep the plain light colours declared right before each var().

Source: developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

Prompt

Implement theming with `color-scheme: light dark` on `:root` and every color token written as `light-dark(lightValue, darkValue)`. Do not duplicate token blocks inside `@media (prefers-color-scheme)`. To force a theme on a subtree, set `color-scheme: dark` there; light-dark() follows it automatically.