Dark Mode

Der Ansatz: die Funktion `light-dark()`

Eine CSS-Funktion, die automatisch den passenden Wert wählt - je nachdem, ob Hell- oder Dunkelmodus aktiv ist:

:root {
  color-scheme: light dark; /* sagt dem Browser: "wir unterstützen beides" */

  --color-bg: light-dark(white, #111827);
  --color-text: light-dark(#1f2937, #f3f4f6);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

light-dark(wert-hell, wert-dunkel) - der Browser entscheidet automatisch anhand der Systemeinstellung
color-scheme: light dark im :root ist notwendig, damit light-dark() funktioniert
Baseline seit 2024 - in modernen Browsern gut unterstützt

Die ältere Schreibweise: `prefers-color-scheme`

Nutzer*innen stellen an ihrem Gerät “Dark Mode” oder “Light Mode” ein. CSS kann das über eine Media Query erkennen:

/* Standard = Light Mode */
:root {
  --color-bg: white;
  --color-text: #1f2937;
}

/* Wenn das System Dark Mode eingestellt hat */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-text: #f3f4f6;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

→ Kein JavaScript nötig! Rein mit CSS + Variablen umsetzbar.

Praxisbeispiel: Card im Dark Mode

:root {
  color-scheme: light dark;

  --color-bg: light-dark(#ffffff, #1f2937);
  --color-surface: light-dark(#f9fafb, #111827);
  --color-text: light-dark(#1f2937, #f3f4f6);
  --color-border: light-dark(#e5e7eb, #374151);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
}