Dark Mode: Die dunkle Seite des UX/UI-Designs

Was allerdings besonders spannend daran ist: Auf leisen Sohlen hat dieses Feature auch in unsere Browser Einzug gehalten. Im Chrome in der Version 74 im Frühjahr 2019. Im Edge ist er seit der Umstellung auf die Rendering-Engine Chromium im Frühjahr 2020 offiziell vorhanden. Safari bietet die Möglichkeit logischerweise ebenso. Auch Windows bietet – wie MacOS – eine Option, den Modus für das gesamte Betriebssystem einzuschalten.

Wie schaltest Du den Dunkelmodus ein?

• iOS (ab Version 13):
  Einstellungen -> Anzeige & Helligkeit -> Erscheinungsbild -> Dunkel
• Android (ab Version 9 »Pie«):
  Einstellungen -> Display -> Erweitert -> Gerätedesign -> Dunkel
• MacOS (ab Version 10.14 »Mojave«):
  Systemeinstellungen -> Allgemein -> Erscheinungsbild -> Dunkel
• Windows (ab Windows 10):
  Einstellungen (Windows-Taste + I) -> Personalisierung -> Farben -> Standard-App-Modus auswählen -> Dunkel

Gestaltenden aber auch der Kundschaft eröffnen sich durch den Dark Mode mannigfaltige neue Möglichkeiten und zugleich Verpflichtungen. Nicht länger lässt er sich nur für Apps nutzen, sondern nun auch auf Webseiten. Die Erwartungshaltung der Nutzenden wird entsprechend innerhalb eines kurzen Zeitfensters zwangsläufig steigen. Ein neuer Standard in der Umsetzung von Webseiten wird sich daraus ergeben.

Aus meiner Sicht erwächst daraus vielfach die Notwendigkeit, Web- und UX/UI-Design gänzlich anders zu denken. Der Dunkelmodus gehört ab sofort vom ersten Moment an in jedes gute User-Experience-Konzept. Zuerst noch um den Anwendern zu zeigen, wie modern man unterwegs ist. Später weil es erwartet wird.

Natürlich ist auch meine Webseite mit einem Dark Mode ausgestattet. Es hat mich allerdings durchaus ein paar Iterationen gekostet, um zu verstehen und herauszufinden, wie die dunkle Variante einer Webseite am besten aufzubauen und zu gestalten ist. Mit einem schlichten Umdrehen der Farben vom Hellen ins Dunkle ist es nicht getan. Es gilt sich sehr genau zu überlegen: Was sind meine Markenfarben? Wie verwende ich meine Akzentfarben? Wo setze ich Funktionsfarben ein?

Für ein wirklich angemessenes dunkles Farbschema sollte auch ein Stück weit die Sättigung aus den Farben herausgedreht werden. Nur dann strahlt die Webseite die Benutzer bei der abendlichen Nutzung nicht unangenehm an. Auch ist es keine wünschenswerte Praxis, volles Schwarz oder Weiß zu verwenden. Relativ dunkle oder entsprechend helle Töne sind stattdessen zu bevorzugen.

Die eigene Webseite mit einem Dunkelmodus auszustatten, ist aus technischer Sicht recht umkompliziert. Vonnöten ist dazu lediglich die Media-Query @media (prefers-color-scheme: dark). Die Darstellung von Bildern je nach Farbmodus ist durch die Kombination von <picture>-Element sowie <source>-Element ebenso keine Hürde. Das nachfolgende erste Beispiel illustriert dies jeweils.

‍Vorausgesetzt, der verwendete Browser unterstützt die Funktion, lässt sich durch Einschalten des systemweiten Dark-Modes erkennen, dass sich die farbliche Darstellung des Beispiels ändert.

In diesem Beispiel wurden unter anderem bewusst reines Schwarz und reines Weiß verwendet. Es ist sofort augenscheinlich, wie hart und unausgewogen dies im Dark Mode wirkt. Es ist noch kein zufriedenstellender Ansatz, um aus einem hellen ein funktionierendes dunkles Farbschema werden zu lassen.

Die verwendete technische Herangehensweise kann potenziell zudem schnell in eine endlose und unüberschaubare Farbwerte-Litanei ausarten. Daher sollte die farbliche Umsetzung bereits von vorneherein – am Anfang der Design-Phase – grundlegend geplant werden. Technisch sollte die Realisierung dann insbesondere mit Farbvariablen innerhalb von CSS erfolgen. Dies schafft eine bessere Übersichtlichkeit sowie Änderbarkeit der Farben, wie das zweite Beispiel zeigt.

Dieses Exempel sieht im Vergleich zum ersten Beispiel farblich nicht fundamental anders aus. Aber doch ist es harmonischer und augenschonender. Dazu wurde der schwarz-weiße Vorschlaghammer in den Schrank gestellt. Stattdessen finden entspanntere Grauabstufungen Anwendung.

Auch ist dieses Beispiel durch die Verwendung von Farbvariablen im Aufbau flexibler. Bei den Farbwerten wurden HSLA-Farbwerte verwendet und der Transparenzkanal aktiv genutzt. Dieser macht es häufig um ein Vielfaches einfacher, harmonische Farbwirkungen zu erzielen. So muss nicht für jeden möglichen Hintergrund ein neuer Farbwert definiert werden. Soll ein Farbwert verändert werden, reicht eine Änderung an einer Stelle.

Nichtsdestotrotz schlummert in der angewandten Methodik noch weiteres Verbesserungspotenzial. Bislang enthält jede Farbvariable einfach einen Farbwert. Dies sagt jedoch noch nichts über den Kontext der Verwendung aus. Entsprechend müssen für den Dark Mode quasi alle CSS-Klassen trotzdem einzeln angepasst werden.

Dies führt relativ schnell zu viel Arbeit sowie unangenehmen Hindernissen sobald die Webseite oder App wächst. Diese Vorgehensweise ist somit letztlich ineffizient. Der Einsatz eines sogenannten Token-Systems sorgt hier für Abhilfe und ist skalierbar. Dies zeigt das folgende drittes Beispiel, welches zur Demonstration die verwendeten Farben dieser Webseite einsetzt.

Die initiale Arbeit, das Festlegen der Farbvariablen und der Design-Tokens, ist im Vergleich zu den vorherigen beiden Beispielen umfangreicher und erfordert ein gutes Grundkonzept. Auf den ersten Blick sind die Zusammenhänge häufig nicht so schnell zu durchdringen. Bei der Umwandlung für den Dark Mode und je größer die Webseite oder die App wird, zeigen sich jedoch sehr rasch enorme Vorteile. So ist es nicht länger notwendig, die Einstellungen der einzelnen CSS-Klassen anzupassen.

Stattdessen werden für die Darstellung im Dark Mode die betreffenden Tokens lediglich einmalig modifiziert. Bei konsequenter Anwendung bedeutet dies eine erhebliche Arbeitseinsparung. Vor allem aber ist eine Skalierung problemlos ohne Nacharbeiten möglich. Exakt auf diesem Ansatz baut auch miese Webseite auf. Das Variablen und Tokens nicht nur für Farben genutzt werden können, ist in diesem Beispiel dadurch demonstriert, wie die abrundeten Ecken gesteuert werden.

Einzih und allein die Anwendungsfreundlichkeit im Hinblick auf Transparenzkanäle kommt in Kombination mit Farbvariablen und Design-Tokens aufgrund mangelnder Browser-Unterstützung aktuell leider noch zu kurz. Stand Februar 2024 sind zwar bereits entsprechende Möglichkeiten implementiert, allerdings noch nicht durchgängig und nur in den neueren Versionen. In etwa ein bis zwei Jahren dürfte sich die Situation dann allerdings anders darstellen.

Derart aufgebaut – mit Farbvariablen und Design-Tokens– ist eine solide Basis geschaffen. Je nach gewähltem Farbmodus können beispielweise SVG-Dateien dynamisch eingefärbt werden oder auch ganze Bilder getauscht.

Mit etwas zusätzlichem Javascript ist auf dieser Grundlage prinzipiell ebenfalls zügig ein Farbmodus-Wechsler realisierbar, wie er auf dieser Webseite eingesetzt wird. Dieser orientiert sich initial an der systemweiten Einstellung, bietet den Nutzenden aber zudem die Freiheit, unabhängig davon die eigene Präferenz einzustellen.

Meine persönliche Lernerfahrung im Umgang mit dem gesamten Thema: In einem immer vielfältiger werdenden digitalen Umfeld – quasi alle großen Plattformen haben den Dark Mode bereits für sich entdeckt – wird es in Zukunft unerlässlich sein, das eigene Branding auch für ein »dunkles Umfeld« wirkungsvoll aufzubereiten.

Neben den unmittelbaren technischen und gestalterischen Aspekten ist es also relevant, bereits beim Identity-Design entsprechende Farbvarianten vorzusehen, um flexibel auf die Umgebung der Benutzer reagieren zu können.