CSS-Variablen und Dark Mode – ein Theme, das sich selbst umschaltet

CSS-Variablen (offiziell „Custom Properties") sind der einfachste Weg zu einem konsistenten Design – und die Grundlage für einen sauberen Dark Mode. Du definierst Farben einmal und nutzt sie überall.

Variablen definieren und nutzen

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #2563eb;
}

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

Alles hängt jetzt an drei Werten. Willst du die Akzentfarbe ändern, tust du das an einer Stelle statt in 50 Regeln.

Dark Mode: nur die Variablen überschreiben

Der eleganteste Teil: Für den dunklen Modus tauschst du nur die Werte aus – alle Regeln, die var(--bg) nutzen, ziehen automatisch mit.

/* folgt der System-Einstellung des Nutzers */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #e2e8f0;
    --accent: #60a5fa;
  }
}

Kein Duplizieren von Regeln, kein .dark .karte { … } für jedes Element. Ein Variablen-Block, fertig.

Manueller Umschalter

Willst du zusätzlich einen Button anbieten, hängst du die Werte an ein Attribut und setzt es per JavaScript:

:root[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e2e8f0;
}

document.documentElement.dataset.theme = "dark";  // umschalten

So folgt die Seite standardmäßig dem System, lässt sich aber per Klick übersteuern. Genau dieses Muster nutze ich auf meinen Websites und im Admin-Backend. Mehr Snippets auf code.bymw.de.

Quellen

• CSS-Variablen benutzen — MDN
• prefers-color-scheme — MDN