In den Schritten 1–9 haben Sie den Dark Mode mit JavaScript und einer CSS-Klasse umgesetzt. Das funktioniert gut, hat aber einen Nachteil: Die Seite kennt die Systemeinstellung des Users nicht automatisch. Wer sein Betriebssystem auf Dark Mode gestellt hat, sieht trotzdem zuerst Light Mode – bis er den Switch betätigt.

Moderneres CSS bietet zwei Werkzeuge, die das eleganter lösen:

1. Die Media Query @media (prefers-color-scheme: dark) liest die Systemeinstellung des Users aus.
2. Die CSS-Funktion light-dark() erlaubt es, beide Farbwerte direkt in einer Deklaration zu definieren.

Quelle und Vertiefung: The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark() – bram.us

Ohne JavaScript lässt sich der Dark Mode über eine Media Query aktivieren. Der Browser fragt dabei das Betriebssystem ab.

:root {
  --text-color: #333;
  --bg-color: #ffffff;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #cccccc;
    --bg-color: #1a1a1a;
  }
}
 
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

Was passiert hier: Im Light Mode gelten die Standardwerte aus :root. Sobald das Betriebssystem des Users auf Dark Mode steht, überschreibt die Media Query die CSS-Variablen – der Rest der Seite bekommt davon nichts mit und verwendet weiterhin var(–text-color).

Testen: Wechseln Sie in den Systemeinstellungen Ihres Computers zwischen Light und Dark Mode. Die Seite sollte automatisch reagieren – ohne Klick, ohne JavaScript.

Seit 2024 unterstützen alle modernen Browser die Funktion light-dark(). Sie nimmt zwei Farbwerte entgegen und gibt je nach aktivem Farbschema den ersten (Light) oder den zweiten (Dark) zurück.

Wichtig: Damit light-dark() funktioniert, muss zwingend color-scheme: light dark auf :root gesetzt sein. Ohne diese Deklaration weiss der Browser nicht, welches Schema aktiv ist.

:root {
  /* Pflicht: Ohne diese Zeile funktioniert light-dark() nicht! */
  color-scheme: light dark;
 
  --text-color: light-dark(#333333, #cccccc);
  --bg-color:   light-dark(#ffffff, #1a1a1a);
  --nav-color:  light-dark(#000000, #ffffff);
}
 
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

Der Vorteil gegenüber dem Media-Query-Ansatz: Beide Werte stehen direkt nebeneinander. Das macht den Code lesbarer und vermeidet doppelte Variablenblöcke.

In der Praxis kombiniert man beide Techniken: light-dark() für die Farbdefinitionen und prefers-color-scheme als Fallback für ältere Browser. Das vollständige Beispiel unten zeigt, wie Sie Ihre bisherige Lösung mit CSS-Variablen und light-dark() umschreiben könnten:

/* 1. color-scheme deklarieren – Pflicht für light-dark() */
:root {
  color-scheme: light dark;
}
 
/* 2. Farben mit light-dark() definieren */
:root {
  --text-color: light-dark(#1a1a1a, #f0f0f0);
  --bg-color:   light-dark(#ffffff, #1a1a1a);
  --nav-link:   light-dark(#333333, #dddddd);
}
 
/* 3. Fallback für Browser ohne light-dark()-Support */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f0f0f0;
    --bg-color:   #1a1a1a;
    --nav-link:   #dddddd;
  }
}
 
/* 4. Styles verwenden – identisch wie bisher */
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}
 
.menu li a:not(.active) {
  color: var(--nav-link);
}

Checkliste Bonusauftrag

• color-scheme: light dark ist auf :root gesetzt.
• light-dark() wird für mindestens Hintergrund- und Textfarbe verwendet.
• Die Seite reagiert automatisch auf die Systemeinstellung (kein Klick nötig).
• Der bestehende JavaScript-Switch funktioniert weiterhin.