# light-dark()

Status: Baseline 2024 (Chrome 123, Safari 17.5, Firefox 120). Bildwerte in light-dark() sind neuer (Chrome 150, Firefox 150).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark  
Seite: https://designforai.dev/de/css/light-dark

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.

## HTML

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

## CSS

```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; }
```

Fallback: Browser ohne Unterstützung ignorieren die light-dark()-Werte und behalten die einfachen hellen Farben, die direkt vor jedem var() deklariert sind.

## 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.