light-dark()

Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Bildwerte in light-dark() sind neuer (Chrome 150, Firefox 150).

Chrome 123Edge 123Safari 17.5Firefox 120

Wählt eine von zwei Farben abhängig vom `color-scheme` des Elements. Zusammen mit `color-scheme: light dark` ergibt das einen vollständigen Dark Mode mit einer Deklaration pro Token, ohne doppelte Media Queries.

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: Browser ohne Unterstützung ignorieren die light-dark()-Werte und behalten die einfachen hellen Farben, die direkt vor jedem var() deklariert sind.

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

Prompt

Setze Theming mit `color-scheme: light dark` auf `:root` um und schreibe jedes Farb-Token als `light-dark(lightValue, darkValue)`. Dupliziere keine Token-Blöcke in `@media (prefers-color-scheme)`. Um ein Theme auf einem Teilbaum zu erzwingen, setze dort `color-scheme: dark`; light-dark() folgt automatisch.