Der Dark Mode ist inzwischen kein neues Thema mehr, aber allmählich ist er fast überall eingebaut. Betriebssysteme, Apps und Webseiten bieten dem Benutzer die Wahl zwischen dem normalen Light Mode mit dunkler Schrift auf hellem Untergrund, oder aber dem Dark Mode mit dunklem Hintergrund und heller Schrift.
Sieht schick aus und soll angeblich Augen und Akku schonen.
Gibt es messbare Vorteile des Dark Mode? Wie kann man ihn überhaupt nutzen? Und welche Herausforderungen gehen mit dunklem Design einher?
Ressourcen
Ein schöner, detaillierter (englischsprachige) Beitrag ist „A complete Guide to Dark Mode on the Web“ von Adhuham, beleuchtet die Techniken, die zur vorbildlichen Umsetzung des Dark Mode eingesetzt werden.
Wie üblich werde ich an dieser Stelle gerne ergänzen.
Vorteile und Irrglaube
Befeuert wurde die Nutzung des Dark Mode von der Behauptung, dass er die Augen schonen und Akku sparen soll.
Tatsächlich hat die Farbe, in der unser Auge vom Display beleuchtet wird keine Auswirkung auf irgendwelche Sehschwächen. Eine schlechte Lesbarkeit von Inhalten ist nicht unbedingt auf einen hellen oder dunklen Modus, sondern eher auf schlechte Kontraste zurück zu führen.
Die in Verbindung gebrachte Kurzsichtigkeit und juckende Augen rühren tatsächlich vom Display an sich her. Dem wenigen Blinzeln und der zu kurzen Distanz zum Gerät. Der verwendete Modus ist dabei unerheblich.
An der Aussage mit dem Akku sparen ist zumindest teilweise etwas dran. Der grundsätzliche Gedanke ist, dass mehr dunkle Pixel weniger Strom verbrauchen. Sofern man aber kein OLED-Display im Einsatz hat, leuchten auch schwarze Pixel. Es gibt aber entsprechend einen Vorteil für die OLED-Nutzer, was immerhin jeden zehnten betrifft.
Um am Abend mit dem schwindenden Sonnenlicht umzugehen haben viele Systeme die Möglichkeit, bei Sonnenuntergang oder einer fest definierten Uhrzeit den Modus umzuschalten. Abgesehen von den fehlenden Vorteilen kommt hier allerdings hinzu, dass das Auge gut 20 Minuten benötigt, um sich an die andere Farbgebung vollends zu gewöhnen.
Einen tatsächlichen Vorteil gibt es allerdings, wenn ein Display im Dunkeln genutzt wird. Hier blendet der Light Mode, während der dunkle Modus weniger Licht verstreut. Allerdings bin ich kein Anhänger davon, ohne angemessene Beleuchtung am Gerät zu sitzen…
Einstellungen
Der Dark Mode kann an mehreren Stellen aktiviert werden.
Inzwischen bieten fast alle Geräte an, direkt das Betriebssystem auf hellen oder dunklen Modus einzustellen. Das geht mit dunklen Bedienelementen und anderen Hintergrundbildern einher. Diese Einstellung kann von Anwendungen abgefragt und umgesetzt werden, damit das Erscheinungsbild einheitlich bleibt.
Anwendungen setzen häufig ihren eigenen Dark Mode um. Meist wird die Einstellung des Betriebssystems abgefragt und/oder der Benutzer beim ersten Aufrufen gefragt. Hier bekommt der Nutzer häufig sogar eine ganze Auswahl von verschiedenen Farb-Themes.
Interessant wird es noch einmal für Webseiten. Der Browser als Anwendung hat inzwischen ebenfalls einen dunklen oder hellen Modus eingestellt, den die jeweilige Seite abrufen kann. Meist wird dem Benutzer aber noch zusätzlich angeboten, diesen umzuschalten. (Hier übrigens mit dem Mond-Symbol unten rechts – ein WordPress-Plugin).
Dunkles Design
Will man nun einen Dark Mode für seine Anwendung umsetzen, dann genügt es nicht, einfach die Farben zu invertieren. Eine Übersicht bietet der oben verlinkte Beitrag.
Der Mensch und sein Auge sind grundsätzlich daran gewöhnt, dunkle Schrift auf weißem Grund zu lesen. Für umgekehrte Farben bietet es sich an, die Schrift etwas dicker zu machen.
Sowohl im Light wie auch im Dark Mode sollte auf reines Weiß und Schwarz verzichtet werden. Lieber ein off-white und dunkles grau oder blau.
Und beim Umkehren der Farben darauf achten, dass ungewollte Effekte wie weiße Schatten entstehen können.
Ebenso wichtig – und häufig übersehen – sind eingebundene Bilder. Wenn diese besonders hell sind stechen sie im Dark Mode umso mehr hervor. Es ist also angebracht, einen Filter über solche Bilder zu legen, um sie abzudunkeln.
Fazit
Der Dark Mode ist in erster Linie eine Frage des Geschmacks. Und hängt davon ab, ob man als User sein Display im Dunkeln benutzt oder ein OLED-Display hat.
Konkrete Umsetzungen gibt es hier für Flutter.