Warum alle vom Dark Mode profitieren

Lasst mich diesen Blog mit einem Thema starten, das mir sehr am Herzen liegt. Ich litt für etwa zwei Jahre an einem sich stetig verschlechternden Grauen Star. Dieser machte mich sehr blendempfindlich, insbesondere durch helle Bildschirme. Helle Schrift auf dunklem Grund waren zuletzt die einzige Möglichkeit für mich zu lesen (und zu arbeiten). Glücklicherweise bin ich inzwischen operiert worden und kann wieder gut gucken. Die Erleichterung, die mir der Dark Mode in der Zeit davor verschafft hat, werde ich aber nie vergessen.

Im Element unter diesem Paragraphen habe ich versucht meine Probleme zu illustrieren. Mit Dark Mode verschwimmt der Text etwas und es wird schwerer zu lesen als ohne die Erkrankung. Aber verglichen mit dem Light Mode ist es eine Wohltat. Im Light Mode scheint der helle Hintergrund so sehr, dass der dunkle Text kaum noch zu sehen ist. Nicht jede Grauer Star Erkrankung erzeugt diesen Effekt, aber so war es bei mir.

Nicht nur deswegen möchte ich über den Dark Mode schreiben. Wie ihr später noch lesen könnt, gibt es gute Gründe, warum das W3 Konsortium den Dark Mode mehrmals in ihren kürzlich veröffentlichen Richtlinien für Nachhaltigkeit erwähnt.¹

In diesem Blog Post werde ich auf die vielen Vorteile des Dark Mode eingehen, Best Practices für die effektive Umsetzung vorschlagen und Lösungen für die Fälle anbieten, in denen Dark Mode benötigt, aber nicht angeboten wird.

Wieso Dark Mode Webseiten-BesitzerInnen, BesucherInnen und allen anderen nutzt

Ob der Dark Mode eine ästhetische Bereicherung für Webseiten ist, mag bezweifelt werden. Aber die Vorteile, die das Feature mit sich bringt, sind eindeutig. Eine Umfrage von 2021 ergab, dass über 80% der Android NutzerInnen Dark Mode aktiviert hatten.² Auch wenn andere Statistiken nur einen Anteil von etwa einem Drittel zeigen,^{3 4} so ist es doch ein signifikanter Anteil der BesucherInnen, der den Dark Mode vorzieht. Es lohnt sich also, diese BesucherInnengruppe zu berücksichtigen.

NutzerInnenbindung erhöhen

BenutzerInnen wissen es zu schätzen, wenn ihre Vorlieben berücksichtigt werden. Dies spiegelt sich auch in ihrem Verhalten auf Webseiten wider, die ihre Nachfrage nach Dark Mode bedienen. Es gibt einige Case Studies^{5 6}, die dies belegen. Folgende Gründe spielen dabei eine Rolle:

• Der Augenkomfort korreliert mit der Zeit, die man auf einer Webseite verbringt. Webseiten, die Dark Mode anbieten, können potenziell längere BesucherInnen Sessions genießen, besonders in lichtarmer Umgebung.
• BesucherInnen verlassen Webseiten weniger oft abrupt (bounce), wenn sie den gewünschten Dark Mode serviert bekommen. Insbesondere, wenn sie von anderen Plattformen wechseln, die das Feature anbieten. Ich selbst hatte den Reflex entwickelt sofort auf den “Back” Button zu drücken, wenn mich eine Webseite durch ihr Licht geblendet hat.
• In der heutigen umkämpften digitalen Landschaft sind es auch die kleinen Dinge, die einen Unterschied machen. Eine Webseite, die den Dark Mode anbietet, wenn es ein sonst gleichwertiger Konkurrent nicht tut, wird bei Besuchern punkten, die dieses Feature priorisieren. Wenn ich eine Webseite ohne Dark Mode vorfand, suchte ich nach Alternativen mit dem Feature im Angebot. Ehrlich gesagt, mache ich das noch heute, wo meine Augen wieder mit beiden Modi umgehen können.

Zugänglichkeit erhöhen und Wohlbefinden verbessern

Das Web sollte ein integrativer Platz sein. Wir sollten sicherstellen, dass so viele Menschen wie möglich teilhaben können. Dark Mode kann einen kleinen Teil dazu beitragen. BesucherInnen mit Sehbehinderungen wie Grauem Star und anderen Lichtphobie auslösenden Erkrankungen,^a sind auf die Möglichkeit angewiesen, den Content in einem Dark Mode lesen zu können. Nicht alle BesucherInnen haben das nötige technische Know-How sich selbst zu behelfen.

Ein weiterer kleiner Faktor ist, dass Dark Mode uns nicht so sehr mit blauem Licht exponiert, wie der helle Gegenpart. Blaues Licht kann unseren Schlafrhythmus und unsere Schlafqualität beeinträchtigen.⁷ (Blaues Licht kann noch effektiver durch Blaulichtfilter vermieden werden, die in allen Modernen Betriebssystemen angeboten werden und unabhängig vom Dark Mode ausgewählt werden können.)

Es soll auch nicht unerwähnt bleiben, dass wir auch einen Light Mode anbieten sollten, um die Lesbarkeit für alle BesucherInnen zu erhöhen.^b Idealer Weise bieten wir sogar die Möglichkeit Schrift und Hintergrundfarbe über Color Picker frei zu wählen, um die Zugänglichkeit zu maximieren.⁸

Energie sparen und die Umwelt schützen

Das Internet sorgt für zu viel emittiertes CO2e und belastet die Umwelt. (Lest mehr über meine Mission.) Dark Mode kann einen kleinen Teil dazu beitragen, diese Belastung zu reduzieren.

OLED (und AMOLED) Bildschirme können Energie sparen durch den Dark Mode, da bei dieser Technologie jeder Pixel einzeln erleuchtet (oder eben nicht) und nicht von einer gleichmäßigen Hintergrundbeleuchtung abhängt. Fast 50% der verkauften Smartphones waren in Q1 mit OLED ausgestattet (Tendenz steigend),⁹ so dass bald mehr als die Hälfte aller aktiven Smartphones mit dieser Technologie ausgestattet sein dürfte. Eine weitere Technologie mit ähnlichem Energiesparpotential im Dark Mode sind die MicroLEDs, diese befinden sich aber noch in den Startlöchern.¹⁰ Google sah für Geräte mit AMOLED Bildschirmen 40% weniger Energieverbrauch für das Benutzen von Youtube im Dark Mode bei voller Helligkeit.¹¹ Andere Studien kommen auch 9% Energieeinsparung durch Nutzung des Dark Modes bei 50% Helligkeit,¹² was immer noch ein signifikanter Wert ist.

Ein weiterer kleiner, aber feiner Aspekt: Die Benutzung von Bildschirmen bei Nacht trägt zur Lichtverschmutzung¹³ bei. Auch hier verbessert der Dark Mode die Bilanz und schützt Flora und Fauna.

Effektive Implementierung des Dark Mode: Best Practices

Wie besprochen bringt der Dark Mode einige Vorteile mit sich. Wie gut er funktioniert, hängt maßgeblich von der Umsetzung ab. Dabei gilt es grobe Fehler zu vermeiden, die Nielsen Norman Group hat ein paar negative Beispiele in Bezug auf UI zusammengestellt und CSS-Tricks hat einen ausführlichen Guide bereitgestellt.

Vorliebe der NutzerInnen respektieren

Beim erstmaligen Laden der Webseite sollten die Systemeinstellungen berücksichtigt werden. Wenn BesucherInnen helles Design bevorzugen, sollen sie es auch bekommen. Per Toggle Button können BesucherInnen sich dann für die jeweils andere Variante entscheiden. Ich denke, dieser sollte direkt im Header integriert sein.

Wenn BenutzerInnen sich für eine Variante entschieden haben, sollte diese sofort erscheinen. Auch bei nachfolgenden Seitenaufrufen sollte der gewählte Modus angezeigt werden und das idealerweise ohne “Flackern”. D.h. das Design im Systemmodus sollte nicht kurz aufblitzen, bevor der gewählte Modus erscheint. Dies kann man serverseitig mithilfe von Cookies umsetzen oder der entsprechende JS Code Block wird priorisiert und ist Render-Blocking. Das Smashing Magazine hat kürzlich eine JavaScript-arme, Cookie-freie Implementierung vorgestellt.

Geht vorsichtig mit Bildern um

Was in der obigen Implementierung nicht berücksichtigt wird, sind Bilder, die in Abhängigkeit der prefers-color-scheme Media Query geladen werden. Dieser Ansatz kann nützlich sein, wenn wir Bilder haben wollen, die den jeweiligen Modus bestmöglich unterstreichen. Schwierig wird es nur, wenn die BenutzerInnen nicht den Systemmodus auswählt. Hier könnnen wir zwischen Bildern unterscheiden, die nachgeladen werden (lazyload) und solche, die möglichst schnell sichtbar sein sollen und in der Regel vom Preloadscanner des Browsers erkannt und das Laden direkt initiert wird. Im `lazyload` Fall reicht ein paar Zeilen JS Code, die die jeweiligen media Attribute überschreiben, z.B.

function adjustSourcesMediaQuery(colorScheme){ // colorScheme = 'dark'|'light' 

  //all `source` nodes with selected prefer-color-scheme value 
  const slctr = 'source[media*="prefers-color-scheme"][media*="$1"]';

  const darkSources   = document.querySelectorAll(slctr.replace('$1','dark'));
  const lightSources  = document.querySelectorAll(slctr.replace('$1','light'));

  darkSources .forEach( el => _adjustMediaQuery(el,'dark') );
  lightSources.forEach( el => _adjustMediaQuery(el,'light') );


  function _adjustMediaQuery(el,mode){

    //prefixes for media queries, that in-/exclude all 
    const prefixExclude = '(not all) and ';
    const prefixInclude = 'all, ';
      
    const prefix = colorScheme === mode ? prefixInclude : prefixExclude;

    el.setAttribute('media', prefix + `(prefers-color-scheme: ${mode})`);
  }
 }

Schwieriger wird es, wenn die Bilder sofort geladen werden. Der Preload Scanner initiiert das Laden der möglicherweisen falschen Datei hier, bevor unser JavaScript Code ausgeführt wird. Also hilft nur, serverseitig geänderten HTML-Code auszugeben. Für diese Lösung brauchen wir dann Cookies um die Dark/Light Mode Wahl der BenutzerInnen serverseitig berücksichtigen zu können.

Was können AnwenderInnen tun, wenn kein Dark Mode zur Verfügung steht, aber benötigt wird?

Es gibt einige Work-Arounds für Situationen, in denen kein Dark Mode zur Verfügung steht.

1. Chromium Browsers erlauben es den BenutzerInnen den Dark Mode zu erzwingen. Dies kann über die flag #enable-force-dark (e.g. auf chrome://flags, edge://flags, brave://flags) aktiviert werden. Es gibt mehere Optionen, ich habe mit “Enabled with selective Image Inversion” gute Erfahrungen gemacht, aber die Meinungen¹⁴ sind verschieden. Der Brave Browser lässt BenutzerInnen den “Night Modus” wie er hier heißt sogar über die Settings UI ändern (nur auf dem Smartphone).
2. Für iPhone und iPad gibt es das Accessibility Feature “Farben umkehren – Intelligent”. Hierbei werden Farben invertiert, wenn sie nicht ohnehin schon einen dunklen Modus repräsentieren. Bilder sind von der Invertierung meistens ausgenommen.¹⁵
3. Für Desktop BenutzerInnen gibt es zahlreiche Extensions, die ebenfalls einen Dark Mode forcieren. Diese bieten mehr Einstellungsmöglichkeiten als die nativen Browser Implementierungen und lassen sich für bestimmte Domains ganz ausschalten.
4. Sollte für Desktop NutzerInnen der fehlende Dark Mode nur manchmal problematisch sein und eine Extension lohnt sich für diesen Fall nicht. Hilft vielleicht dieses kleine Bookmarklet, das alle Farben auf der aktuellen Page invertiert. Nur Bilder bleiben unverändert:

   javascript:(function(){var t=window.t^=1,i='invert('+t+')',b=document.body,p=b.parentNode;p?p.style.filter=i:b.style.filter=i;for(let e of document.images)e.parentNode.style.filter=i;})();

Die größte Schwierigkeit bei einer guten Dark Mode Experience sind die Bilder, wie oben beschrieben. Ich fange gerade an eine Browser Extension zu schreiben, die BenutzerInnen erlaubt einzelne Bilder zu invertieren, zu verdunkeln oder Kontrast zu erhöhen.

Zusammenfassung

Auch wenn es inzwischen glücklicherweise Möglichkeiten gibt, einen Dark Modus zu forcieren, so liegt die Verantwortung doch bei den Website BesitzerInnen einen Dark Mode anzubieten. Nur so kann sichergestellt werden, dass die UX den eigenen Ansprüchen genügt. Wenn der Dark Mode gut implementiert ist, so kann dieser die BesucherInnen erfreuen, die Benutzersignale verbessern, Energie sparen und zur Gesundheit beitragen. Alles, was es braucht, sind Zeit, Ressourcen und Wille.

P.S.: Dieser Blog Post wird weiter bearbeitet, sobald den Dark Mode auf dieser Webseite umgesetzt habe. Bis dahin wird es hier nur den Dark Mode geben. 🙈