Dunkles Design für bessere UX
Vor nicht sehr langer Zeit waren invertierte Farbschemata bei der Benutzung von Computern den Informatikerinnen und Informatikern vorbehalten.
Die meisten Leute assoziierten solche Darstellungen also direkt mit Programmierern, die auf Konsolenprogrammen gerade einen Server hackten oder ein neues Virus erschufen.
Mittlerweile hat der sogenannte «Dark Mode» Einzug in unser tägliches Leben erhalten. Man findet ihn nicht nur auf dem Smartphone und in jedem Betriebssystem, sondern auch in den meist dazugehörigen Apps. Auch im Web gibt es immer mehr Webseiten, welche einen Toggle anbieten, um die Seite im «Dark Mode» darzustellen. Wir erklären, warum Dark Modes so beliebt sind und wie man sie im Web umsetzen sollte.
Warum "Dark Mode?"
Für viele Nutzer ist der Dark Mode nicht viel mehr als eine Trend-Erscheinung, welche vermutlich etwa zu gleichen Teilen geliebt und verteufelt wird. Der Dark Mode hat jedoch einige entscheidende Vorteile im Vergleich zur Standard-Ansicht:
Stromeffizienz
Auf vielen Displays und Screens ist der Dark Mode deutlich stromeffizienter als die normale Ansicht. Dies kommt durch die viel effizientere Darstellung dunklerer Farbtöne zustande, da der Screen auf diese Weise nicht so stark beleuchtet werden muss.
In frühen Versionen von OLED-Screens hat ein schwarzer Screen etwa 6x weniger Strom verbraucht als ein weisser Screen bei voller Helligkeit. Natürlich wurden auch diese Displays mittlerweile effizienter. Was bleibt ist aber weiterhin die Angst vor einem leeren Smartphone-Akku. Deswegen ist der Dark Mode in vielen Fällen die bessere Option.
Accessibility
In den letzten Jahren wurde das Thema Accessibility beim Bau von Software immer wichtiger.
Es existieren Tools, welche zum Beispiel Webseiten anhand von Metriken wie Tab-Verhalten, Schriftgrössen, aber auch Kontrast bewerten.
Da beim Dark Mode die Schrift – also das Wesentliche – hell dargestellt und der Rest abgedunkelt wird, lässt sich Text für viele Menschen einfacher lesen. Man könnte also soweit gehen und sagen: Der Dark Mode hat einen effizienteren Kontrast als die normale Ansicht.
Schonend für die Augen
Aus den Gründen, welche wir im letzten Punkt bereits erklärt haben, ist das Lesen eines Textes im Dark Mode – vor allem in dunklerer Umgebung – sehr schonend für die Augen. Auch Menschen, welche stark lichtempfindlich sind, profitieren davon.
Technische Umsetzung
Im Wesentlichen wird jede Website vom Browser so dargestellt, indem das CSS ausgewertet und auf die geladenen Inhalte angewandt wird. Dies hat zur Folge, dass es sehr lange dauern wird, bis jedes erdenkliche CSS angepasst bzw. um einen Dark Mode erweitert worden ist. Google hat daher in seinem beliebten Browser Chrome eine Option eingebaut, die jede Seite quasi dazu zwingt, im Dark Mode angezeigt zu werden. Sofern die Nutzer/in diese Option aktiviert, versucht der Browser intelligent, die Farben auf der geladenen Seite zu invertieren, also die dunklen Dinge wie Text hell anzuzeigen und umgekehrt. Dies verhält sich ähnlich zu der Option ‚Smart Invert‘ (deutsch: ‚Intelligentes umkehren‘) von iOS.
Um diesen Modus einzuschalten, gibt man ganz einfach
chrome://flags
in die Suchleiste von Chrome ein und aktiviert bei den Flags dann die Option ‚Auto Dark Mode for Web Contents‘.
Bei vielen nicht dafür ausgelegten Webseiten ist das Ergebnis jedoch sehr unbefriedigend, da elementare Design-Strukturen plötzlich völlig anders wirken, oder aber Bereiche aufgehellt werden, welche dunkel dargestellt werden sollen und sich auch im Dark Mode dementsprechend nicht verändern dürfen.
Um einige Elemente auf der Page so anzupassen, dass sie auch mit dem Auto Dark Mode von Chrome noch gut aussehen, kann man mithilfe eines kleinen Hacks via JavaScript auslesen, ob dieser Modus gerade aktiviert ist. Dementsprechend kann man dann einen CSS-Modifier auf den Body setzen oder entfernen.
Um den Hack anzuwenden, braucht es ein ausgeblendetes DOM-Element mit
‚background-color: canvas‘ und ‚color-scheme: light‘
Danach kann man mit JavaScript abfragen, ob die berechnete Hintergrundfarbe rgb(255,255,255) – also der Farbe weiss – entspricht. Falls nicht, ist der Auto Dark Mode aktiv. Code-Beispiele dazu findet man unter der verlinkten Quelle.
Unabhängig vom Detailgrad der Anpassungen, welche man für den Dark Mode vornimmt, ist es wichtig, dies nicht einfach den automatischen Browser-Lösungen zu überlassen. Es reicht in vielen Fällen nicht aus, einfach die Textfarbe und den Hintergrund zu invertieren, um ein konsistentes und durchdachtes Design auch im Dark Mode gleich aussagekräftig erscheinen zu lassen, wie in der klassischen Ansicht.
Fazit
Dark Modes sind einerseits eine Trenderscheinung, andererseits haben sie aber durchaus eine funktionale Existenzberechtigung. Entwickler sollten vor allem im Web versuchen, die Seiten möglichst auch Dark Mode konform zu gestalten, da sonst die eigene Seite auf einigen Clients unschön aussehen könnte, wenn vom User eine Art Browser Brute-Force Lösung angewandt wird. Um dies zu erreichen, können einfach einzelne Elemente mit speziellem Dark Mode Styling überschrieben werden.
Optimal wäre aber natürlich noch immer, einen Toggle anzubieten. Dieser ermöglicht es, die Page im Dark Mode anzuzeigen. Möglicherweise auch in Kombination mit einem Modifier, welcher nur angewandt wird wenn der Browser versucht, automatisch einen Dark Mode zu generieren.
Geschrieben von:
Benjamin Buff, Frontend-Webentwickler bei der raffiniert media AG
Hast du eine Idee?
Nur keine scheu! Schreib uns.