Was ist Dark Mode?

Dark Mode, auf Deutsch “dunkler Modus”, ist eine Darstellungsoption für Websites und Apps, bei der dunkle Hintergründe mit hellen Texten kombiniert werden, statt der traditionellen hellen Hintergründe mit dunklem Text.

Er wurde in den letzten Jahren von Betriebssystemen, Apps und Websites übernommen. macOS, Windows, Android, iOS und die meisten modernen Browser unterstützen Dark Mode auf Systemebene. Websites können diesen Wunsch des Nutzers über das CSS-Media-Feature prefers-color-scheme abfragen und automatisch in den passenden Modus wechseln.

Vorteile und technische Umsetzung

Der praktische Nutzen ist real. Auf OLED-Displays, die in vielen modernen Smartphones eingebaut sind, leuchten dunkle Pixel buchstäblich nicht auf. Schwarze oder sehr dunkle Hintergründe verbrauchen bei OLED-Displays deshalb weniger Energie als weiße. Der Effekt auf den Akku ist messbar, wenn auch von der individuellen Nutzung abhängig.

Für Nutzer, die in dunklen Umgebungen arbeiten oder lesen, reduziert Dark Mode die Blendwirkung des Bildschirms. Das kann die Augenbelastung bei längerem Lesen reduzieren.

Technisch gibt es zwei Ansätze für die Umsetzung. Der erste ist ein manueller Toggle auf der Website: Der Nutzer kann per Klick zwischen Hell und Dunkel wechseln, die Wahl wird im Local Storage des Browsers gespeichert. Der zweite Ansatz ist das automatische Folgen der Systemeinstellung über das CSS-Media-Feature, ohne manuellen Toggle.

Der Aufwand für eine durchgängige Dark-Mode-Implementierung ist nicht zu unterschätzen. Nicht alle Farben, die im Light Mode gut aussehen, funktionieren im Dark Mode. Sättigte Farben auf dunklem Hintergrund können zu grellem Erscheinungsbild führen. Bilder, die weiße Hintergründe haben, sehen auf dunklem Website-Hintergrund schlecht aus. Eine konsequente Dark-Mode-Umsetzung erfordert ein durchdachtes, angepasstes Farbsystem.

Wer Dark Mode halbherzig umsetzt, also nur die Hintergrundfarben wechselt, ohne das gesamte Farbsystem anzupassen, erreicht oft ein verschlechtertes Ergebnis für Dark-Mode-Nutzer. Lieber kein Dark Mode als ein schlechter.

Wenn du Dark Mode für deine Website planst oder ein komplett neues Design mit Dark-Mode-Unterstützung entwickeln lassen möchtest, sprechen wir das gerne durch. Webdesign-Leistungen oder Termin vereinbaren.