Dark Mode umsetzen: CSS-Variablen, Systemeinstellung und Design

Kurz gefasst: Ein guter Dark Mode beginnt mit semantischen Farbtokens als CSS-Variablen, die je nach Modus andere Werte bekommen. Standardmäßig folgt die Seite der Systemeinstellung über prefers-color-scheme, ein Umschalter mit den Optionen Hell, Dunkel und System überschreibt sie. Damit beim Laden nichts aufblitzt, muss das Theme gesetzt sein, bevor der Browser die Seite zeichnet. Gestalterisch ist ein dunkles Theme eine eigene Palette mit angepassten Kontrasten, keine invertierte Version des hellen.

Warum Dark Mode mehr als ein Farbwechsel ist

Viele Nutzer stellen ihr Betriebssystem auf dunkel und erwarten, dass Websites und Web-Apps mitziehen. Wer nachts eine grellweiße Seite öffnet, merkt den Unterschied sofort. Für Anwendungen, die lange am Stück genutzt werden, etwa Dashboards oder interne Tools, ist ein dunkles Theme oft ein echter Komfortgewinn.

Der Aufwand hängt fast vollständig davon ab, wie die Farben im Code organisiert sind. Sind Hex-Werte über hunderte Komponenten verstreut, wird Dark Mode zum Großprojekt. Gibt es ein zentrales Farbsystem, ist es überschaubar. Das ist einer der Gründe, warum sich ein Design-System früh auszahlt.

Die technische Grundlage: Farbtokens als CSS-Variablen

Semantisch benennen

Benennen Sie Farben nach ihrer Rolle, nicht nach ihrem Aussehen. Statt --grau-100 heißen sie --color-bg, --color-surface, --color-text, --color-text-muted, --color-border und --color-accent. Komponenten verwenden nur diese Tokens. Im dunklen Modus ändern Sie dann die Werte der Tokens an einer einzigen Stelle.

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121417;
    --color-text: #e6e6e6;
  }
}
:root[data-theme="dark"] {
  --color-bg: #121417;
  --color-text: #e6e6e6;
}

Die Eigenschaft color-scheme sorgt dafür, dass auch native Elemente wie Scrollbalken, Formularfelder und Datumsauswahl dunkel dargestellt werden. Moderne Browser unterstützen außerdem die CSS-Funktion light-dark(), mit der sich beide Werte direkt nebeneinander notieren lassen.

Systemeinstellung und manueller Umschalter

Bewährt hat sich ein Umschalter mit drei Zuständen: Hell, Dunkel und System. Die Wahl wird in localStorage gespeichert und als Attribut am html-Element gesetzt. Ohne gespeicherte Wahl gilt die Systemeinstellung. Wer per JavaScript reagieren muss, etwa für Diagramme, hört mit matchMedia('(prefers-color-scheme: dark)') auf Änderungen.

Aufblitzen beim Laden verhindern

Das häufigste Problem ist ein kurzes weißes Aufblitzen, bevor das dunkle Theme greift. Es entsteht, wenn das Theme erst nach dem Laden des JavaScript-Bundles gesetzt wird. Die Lösung ist ein kleines Inline-Skript im head, das die gespeicherte Wahl liest und das Attribut setzt, bevor der Browser zeichnet. Bei serverseitig gerenderten Anwendungen mit React oder Next.js kann man die Wahl auch in einem Cookie speichern und direkt im HTML ausliefern.

Gestaltung: eine eigene Palette

Kein reines Schwarz

Reines Schwarz mit reinem Weiß erzeugt harte Kontraste, die beim Lesen flimmern können. Üblich sind dunkle Grautöne für den Hintergrund und leicht gedämpftes Weiß für Text. Sehr gesättigte Akzentfarben wirken auf dunklem Grund grell und brauchen meist hellere, weniger gesättigte Varianten.

Tiefe über Helligkeit statt Schatten

Schatten sind auf dunklem Hintergrund kaum sichtbar. Ebenen wie Karten, Dialoge und Menüs unterscheiden sich deshalb besser durch etwas hellere Flächen: Je höher ein Element liegt, desto heller seine Oberfläche.

Kontraste prüfen

Die Kontrastvorgaben der WCAG gelten für beide Modi: mindestens 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente. Prüfen Sie jedes Token-Paar in beiden Themes, nicht nur die Startseite. Mehr zum Thema lesen Sie in unserem Beitrag zur Barrierefreiheit von Webanwendungen.

Typische Stolperstellen

Logos und Grafiken mit transparentem Hintergrund und dunkler Schrift verschwinden auf dunklem Grund. Hier helfen eigene Varianten über das picture-Element mit media="(prefers-color-scheme: dark)" oder SVGs, die currentColor nutzen. Fotos können Sie mit einem leichten Helligkeitsfilter etwas abdunkeln.

Diagramme brauchen eigene Farbreihen, weil die Farben der hellen Version auf dunklem Grund anders wirken. Wie stark Farben die Wahrnehmung prägen, beschreiben wir im Artikel zur Farbpsychologie in digitalen Produkten. Vergessen Sie außerdem nicht E-Mail-Vorlagen, PDFs und das theme-color-Meta-Tag für die Browserleiste auf Mobilgeräten.

Häufige Fragen (FAQ)

Lohnt sich Dark Mode für jede Website?

Für Anwendungen, die lange genutzt werden, und für Produkte mit technikaffinem Publikum fast immer. Bei einer einfachen Unternehmensseite ist es eher eine Frage des Anspruchs. Mit einem sauberen Farbsystem ist der Mehraufwand gering.

Kann man Dark Mode nachträglich einbauen?

Ja. Der erste Schritt ist dann, fest verdrahtete Farben durch Tokens zu ersetzen. Das ist mühsam, verbessert aber auch die Wartbarkeit des hellen Themes. Danach ist das dunkle Theme vor allem Gestaltungsarbeit.

Spart Dark Mode Akku?

Auf Geräten mit OLED-Display leuchten dunkle Pixel weniger und verbrauchen weniger Strom. Auf LCD-Bildschirmen gibt es diesen Effekt praktisch nicht. Als Hauptargument taugt die Akkulaufzeit daher nur für mobile Nutzung.

Sollte Dark Mode die Standardeinstellung sein?

Am besten folgt die Seite zunächst der Systemeinstellung des Nutzers. So bekommt jeder, was er ohnehin bevorzugt, und kann es per Umschalter ändern.

Fazit

Ein gelungener Dark Mode ist zur Hälfte Architektur und zur Hälfte Gestaltung. Wer Farben von Anfang an als semantische Tokens anlegt, bekommt das dunkle Theme fast nebenbei und kann später auch weitere Themes oder Markenvarianten ergänzen.

Wenn Sie eine Web-App mit durchdachtem Theming planen, sprechen Sie mit uns über Webentwicklung.