Dark Mode ist eine Darstellungsvariante mit dunklem Hintergrund und heller Schrift. Betriebssysteme und Browser geben die Vorliebe des Nutzers weiter, und eine Website kann darauf reagieren, ohne dass jemand etwas einstellen muss.
- Dark Mode
Darstellung einer Oberfläche mit dunklem Hintergrund und hellem Text, als Alternative zur hellen Standarddarstellung.
Beispiel: „Im Dark Mode verschwinden die Logos, weil sie schwarz auf transparent liegen.“Auch: Dark Theme oder auf Deutsch Dunkelmodus. Alle drei bezeichnen dasselbe.
Technisch: erkennbar über die Medienabfrage
prefers-color-scheme, die die Systemeinstellung des Nutzers weitergibt.
Warum Nutzer ihn wollen
Der häufigste Grund ist Gewohnheit: Wer sein Telefon dunkel eingestellt hat, empfindet eine grelle weiße Seite dazwischen als Störung. Bei schwachem Umgebungslicht ist die dunkle Darstellung außerdem angenehmer, und auf Geräten mit OLED-Bildschirm spart sie messbar Strom, weil schwarze Bildpunkte dort nicht leuchten.
Für Menschen mit Lichtempfindlichkeit kann der Dark Mode den Unterschied zwischen lesbar und unlesbar ausmachen. Für andere gilt das Gegenteil: Bei Sehschwäche verschwimmt heller Text auf dunklem Grund leichter. Deshalb ist der Dark Mode eine Wahlmöglichkeit und kein besserer Standard.
Was bei der Umsetzung schiefgeht
Am häufigsten die Bilder. Ein Logo als schwarze Grafik auf transparentem Grund ist auf dunklem Hintergrund unsichtbar, ebenso Diagramme und Symbole. Jede Grafik braucht deshalb entweder eine zweite Fassung oder einen Hintergrund, der sie trägt.
Der zweite Punkt sind die Kontraste. Reines Weiß auf reinem Schwarz flimmert und ermüdet beim Lesen. Üblich ist deshalb ein sehr dunkles Grau als Grund und ein leicht gedämpftes Weiß für den Text. Farben, die im Hellen gut funktionieren, wirken auf dunklem Grund oft zu grell und müssen eigene Werte bekommen.
Der dritte Punkt ist der Aufwand. Ein Dark Mode verdoppelt die Zahl der zu prüfenden Zustände. Wer ihn anbietet, muss jede Seite, jedes Formular und jede Fehlermeldung zweimal ansehen. Mit Design Tokens lässt sich das beherrschen, ohne Tokens wird es zur Dauerbaustelle.
Automatisch oder umschaltbar
Die einfachste Lösung folgt der Systemeinstellung und braucht keine Bedienung. Ein zusätzlicher Umschalter ist sinnvoll, wenn Nutzer für diese eine Website eine andere Wahl treffen sollen. Dann gehört die Entscheidung gespeichert, damit sie beim nächsten Besuch noch gilt.
Wie die Umschaltung technisch entsteht
Grundlage ist die Medienabfrage prefers-color-scheme mit den Werten light und dark. Dazu gehört die CSS-Eigenschaft color-scheme, die dem Browser mitteilt, welche Modi eine Seite beherrscht. Ohne sie bleiben Formularfelder, Auswahllisten und die Bildlaufleiste in der hellen Fassung stehen, während der Rest der Seite dunkel ist. Ein color-scheme: light dark löst das an einer einzigen Stelle.
Wer einen eigenen Umschalter anbietet, stößt auf ein zweites Problem. Die gespeicherte Wahl liegt im Browser, das Stylesheet lädt aber vorher: Die Seite erscheint kurz hell und springt danach um. Dagegen hilft ein kleines Skript im Kopf des Dokuments, das die Klasse am html-Element setzt, bevor der erste Bildaufbau stattfindet.
Farben benennen statt festschreiben
Ob ein Dark Mode wartbar bleibt, entscheidet sich an der Benennung der Farben. Wer grau-900 in die Komponenten schreibt, pflegt jede Stelle zweimal. Wer flaeche und text-auf-flaeche schreibt, tauscht die Werte zentral. Genau dafür sieht ein Design System Tokens vor.
Dazu kommt ein Gestaltungsdetail, das im Hellen nicht auftritt: Schatten. Auf dunklem Grund ist ein Schatten kaum zu sehen. Erhöhung wird dort über hellere Flächen angezeigt. Eine Karte, die im Hellen durch einen Schatten abhebt, braucht im Dunklen einen um wenige Prozent aufgehellten Grund.
Beide Fassungen sind prüfpflichtig
Das Erfolgskriterium 1.4.3 Kontrast der WCAG gilt für jede Darstellung, die ausgeliefert wird. Ein Wert, der im Hellen 7:1 erreicht, kann im Dunklen unter 4,5:1 fallen, weil die Farben nicht gespiegelt, sondern neu gewählt wurden. Der Dark Mode verdoppelt damit den Prüfumfang und nicht nur den Gestaltungsaufwand. Das betrifft auch die Zustände der Bedienelemente: Ein Hover, der im Hellen sichtbar aufhellt, muss im Dunklen in die andere Richtung arbeiten.
Eine Stelle wird dabei regelmäßig vergessen: E-Mails. Mailprogramme auf dem Telefon invertieren Farben teils selbst und teils gar nicht. Ein Newsletter mit weißem Kasten steht dann mitten in einer dunklen Oberfläche, und ein Logo, das für den Dark Mode der Website vorbereitet wurde, hilft dort nicht.