Dark Mode

Dark Mode richtig statt nur dunkel

Wir setzen ihn über Farbvariablen um, prüfen beide Fassungen auf Kontrast und sehen uns an, wie echte Inhalte darin aussehen.

Dark Mode ist eine Darstellungsvariante mit dunklem Hintergrund und heller Schrift, die Betriebssysteme und Browser inzwischen systemweit anbieten. Websites können diese Voreinstellung übernehmen und ihre Farben entsprechend anpassen. Der Nutzen ist nicht pauschal — er hängt von Umgebung, Inhalt und Umsetzung ab. Schlecht umgesetzt ist Dark Mode schlechter lesbar als die helle Fassung.

Kurz zusammengefasst:

• Die Systemeinstellung lässt sich per CSS abfragen und übernehmen.
• Kein reines Schwarz auf reines Weiß — das flimmert und ermüdet.
• Farben müssen neu gedacht werden, nicht invertiert.
• Kontrastanforderungen gelten in beiden Fassungen.
• Bilder und Logos brauchen oft eine eigene Behandlung.

Wann er sinnvoll ist

Die verbreitete Annahme, Dark Mode sei generell augenschonender, ist so nicht haltbar. Bei guter Umgebungsbeleuchtung lesen die meisten Menschen dunklen Text auf hellem Grund schneller. In dunkler Umgebung kehrt sich das um. Sinnvoll ist deshalb nicht, sich für eine Variante zu entscheiden, sondern die Wahl zu respektieren, die der Nutzer im System bereits getroffen hat.

Was bei der Umsetzung zählt

1. Kein reines Schwarz. Ein sehr dunkles Grau mit leichtem Farbstich wirkt ruhiger als #000. Ebenso kein reines Weiß für Text — hoher Kontrast erzeugt einen Flimmereffekt.
2. Farben neu bestimmen. Ein Akzentton, der auf Weiß funktioniert, wirkt auf Dunkel oft grell oder verschwindet. Gesättigte Farben brauchen dunkler weniger Sättigung.
3. Kontraste erneut prüfen. Die Anforderungen gelten in beiden Fassungen — siehe Kontrastverhältnis. Eine Fassung zu prüfen genügt nicht.
4. Schatten funktionieren nicht. Tiefe entsteht dunkel über hellere Flächen, nicht über Schlagschatten.
5. Bilder und Logos. Freigestellte Grafiken mit weißem Hintergrund fallen auf. Logos brauchen häufig eine helle Variante.
6. Über Variablen arbeiten. Farben als CSS-Variablen definieren und nur diese umschalten — nicht jede Regel doppelt schreiben.

Systemeinstellung oder Schalter?

Die Systemeinstellung zu übernehmen ist die Grundlage — sie kostet wenig und bedient die Erwartung. Ein zusätzlicher Schalter auf der Seite ist Komfort und lohnt vor allem dort, wo Menschen länger bleiben.

Wichtig dabei: Ein Schalter muss die getroffene Wahl in beide Richtungen durchsetzen — auch wenn das System das Gegenteil sagt. Und die Entscheidung sollte gespeichert werden. Ein Umschalter, der beim nächsten Aufruf vergisst, ist ärgerlicher als keiner.

Was oft schiefgeht

• Einfach invertieren. Ergibt schmutzige Farben und unlesbare Akzente.
• Nur den Hintergrund umstellen, während Karten, Ränder und Formularfelder hell bleiben.
• Bilder mit weißem Rand, die als helle Kästen im Dunkeln stehen.
• Nicht getestet. Dark Mode wird gebaut und nie mit echten Inhalten geprüft — Tabellen, Zitate, eingebettete Inhalte sehen dann anders aus als der Entwurf.
• Halbe Umsetzung. Ein Teil der Seite dunkel, ein Teil hell — schlechter als gar kein Dark Mode.

Häufige Fragen

Ist Dark Mode augenschonender?

Nicht pauschal. In dunkler Umgebung wird er meist als angenehmer empfunden, bei guter Beleuchtung lesen die meisten Menschen dunklen Text auf hellem Grund schneller. Entscheidend ist, die Systemwahl des Nutzers zu respektieren.

Spart Dark Mode Strom?

Auf Bildschirmen mit selbstleuchtenden Bildpunkten messbar, weil dunkle Pixel weniger verbrauchen. Bei klassisch hintergrundbeleuchteten Displays praktisch nicht.

Muss ich Dark Mode anbieten?

Nein, es ist keine Anforderung. Sinnvoll ist er vor allem dort, wo Menschen länger lesen. Wichtiger als sein Vorhandensein ist, dass die vorhandene Fassung gut lesbar ist.

Reicht es, die Farben zu invertieren?

Nein. Invertierte Farben wirken schmutzig, Akzenttöne werden grell oder verschwinden. Die dunkle Fassung braucht eine eigene Palette.

Gelten die Kontrastanforderungen auch dunkel?

Ja, unverändert. Beide Fassungen müssen geprüft werden — eine helle Fassung, die besteht, sagt nichts über die dunkle aus.

Was mache ich mit Bildern und Logos?

Freigestellte Grafiken mit weißem Hintergrund brauchen eine transparente oder eigene dunkle Fassung. Für Logos lohnt eine helle Variante, die per Medienabfrage eingeblendet wird.