Dark Mode im Web: So setzen wir es technisch sauber um

Dark Mode ist dann sauber umgesetzt, wenn er ohne Flackern lädt, der Systemeinstellung folgt und die Kontrastanforderungen erfüllt. Das Flackern entsteht fast immer an derselben Stelle: Die Farbwahl wird per Skript gesetzt, das erst nach dem ersten Aufbau läuft. Wer den Wert stattdessen vor dem Rendern als Merkmal ins Dokument schreibt, hat das Problem gar nicht.

##Wie folgt man der Systemeinstellung?

Über eine Medienabfrage, die die Einstellung des Betriebssystems ausliest. Der Browser gibt sie als Präferenz weiter, ohne dass Sie etwas speichern müssen. Diese Abfrage ist die Grundlage: Sie deckt Besucher ab, die nie selbst wählen, und sie ändert sich live, wenn jemand die Systemeinstellung wechselt – was eine rein gespeicherte Wahl nie könnte.

##Warum flackert Dark Mode beim Laden?

Weil die gespeicherte Wahl eines Besuchers erst gelesen werden kann, wenn das Skript gelaufen ist – und das ist nach dem ersten Aufbau. Der Browser zeigt also kurz die helle Fassung und wechselt dann. Die Lösung ist ein kurzes Skript im Kopf des Dokuments, das den gespeicherten Wert noch vor dem Rendern als Merkmal auf das Wurzelelement schreibt. Es muss winzig sein und darf nicht nachgeladen werden.

##Welche Farben braucht ein dunkles Schema?

• ›Eine Grundfläche, die nicht rein schwarz ist
• ›Zwei bis drei abgestufte Flächen für Ebenen
• ›Textfarben mit mindestens 4,5:1 Kontrast
• ›Eine Akzentfarbe, die auf beiden Flächen funktioniert
• ›Getrennte Farben für Erfolg, Warnung und Fehler

##Warum kein reines Schwarz als Hintergrund?

Weil der Kontrast zu heller Schrift auf einem rein schwarzen Grund ermüdet und weil sich Schlagschatten darauf nicht abbilden lassen. In der Praxis bewährt sich ein sehr dunkles Grau mit leichtem Farbstich, auf dem Ebenen durch Aufhellung statt durch Schatten entstehen. Das wirkt ruhiger und lässt sich mit derselben Struktur wie das helle Schema aufbauen.

##Was ist beim Kontrast zu beachten?

Die Anforderung bleibt dieselbe wie im hellen Schema: mindestens 4,5 zu 1 für Fließtext. Der häufigste Fehler ist eine Akzentfarbe, die auf hellem Grund gut aussieht und auf dunklem Grund unter die Schwelle fällt – ein kräftiges Blau verliert dabei leicht ein Drittel seines Kontrastwerts. Prüfen Sie jede Textfarbe gegen beide Grundflächen, nicht nur gegen eine.

##Wie speichert man die Wahl eines Besuchers?

Lokal im Browser, nicht auf dem Server. Die Wahl ist eine Anzeigeeinstellung ohne Bezug zur Person, und sie muss ohne Anmeldung funktionieren. Drei Zustände gehören dazu: hell, dunkel und der Systemvorgabe folgen. Der dritte ist wichtig, weil er die Standardeinstellung ist – wer ihn weglässt, zwingt Besuchern eine Wahl auf, die sie nie getroffen haben.

##Was übersieht man beim dunklen Schema?

Eingebettete Inhalte. Ein Formularfeld, ein Balken oder eine Tabelle, die ihre Farben fest definieren, bleiben im dunklen Schema hell und stechen heraus. Ebenso Symbolgrafiken: Ein einfarbiges Symbol, das über die Textfarbe gefärbt wird, passt sich an – eine farbige Datei nicht. Prüfen Sie deshalb jede Seite in beiden Schemata, nicht nur die Startseite.

##Ein Schema, kein zweites Design

Dark Mode funktioniert am besten als dieselbe Gestaltung mit anderen Farbwerten. Wer ein zweites Layout baut, pflegt zwei Produkte. Wer Farben über benannte Werte steuert und die Wahl vor dem Rendern setzt, bekommt die Umschaltung fast geschenkt. Prüfen Sie am Ende den Kontrast jeder Textfarbe gegen beide Grundflächen und lassen Sie die Systemvorgabe die Standardeinstellung bleiben. Ein kurzer Test auf drei Geräten zeigt, ob die Umschaltung wirklich ohne Flackern lädt.