Seit dem iPhone Update auf iOS 13 und seit Android 10 haben wir auf all unseren mobilen Geräten einen „Dark Mode“ oder auf Deutsch gesagt einen Dunkelmodus. Auch Windows, Mac und diverse Linux Desktops bieten inzwischen einen Dark Mode.
Der Dark Mode auf einem Samsung Galaxy A71 
Der selbe Bildschirm auf mit deaktiviertem Dark Mode
Der Dunkelmodus hat viele Vorteile. Man hat (vor allem bei OLED Displays) ein geringerer Akku-Verbrauch und wenn man Abends oder Nachts im Dunkeln auf sein Smartphone schaut werden die Augen nicht geblendet.
Viele Apps auf den Smartphones und normalen Computer bieten inzwischen einen Dark Mode Support. Prominente Beispiele in der Schweiz dürften die Apps der SBB und 20 Minuten sein.
Ich wollte für diesen Blog wissen, ob ich den Blog automatisch in einem dunkeln Design anzeigen kann, wenn jemand den Dark Mode aktiviert hat. Kurzfazit es geht – ziemlich gut sogar. Es gibt verschiedene Möglichkeiten sowas umzusetzen – nachfolgend ein technischer Überblick.
Voraussetzungen für den Dark Mode im Web
Die Ansprüche einer Webseite steigen wenn ein zusätzlicher Dark Mode angeboten wird. Statt einem Layout hat man plötzlich zwei Layouts die man entwickeln, warten und testen muss. Für eine automatische Erkennung muss der Besucher der Seite einen Browser haben die das „prefers-color-scheme“ Media Query unterstützen – welche das sind findet man hier.
Ebenfalls muss man immer ein „Standard“ definieren. Also wenn ein Besucher mit einem Browser kommt der keinen Support für das erwähnte Media Query bietet muss eine der beiden Versionen angezeigt werden.
In allen nachfolgenden Beispielen gehe ich davon aus, dass das helle Design der Standard ist und der Dark Mode zusätzlich entwickelt / hinzugefügt wird.
Dark Modus anhand der Betriebssystemeinstellungen verwenden
Um automatisch zu erkennen, ob der Browser im Dark Mode läuft oder nicht kann man CSS oder JavaScript verwenden.
Möglichkeiten mit CSS
Mit CSS kann man direkt mit einem Media Query arbeiten hier ein kleines Beispiel:
body {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}Möglichkeiten mit JavaScript
Auch mit JavaScript kann man prüfen ob der Besucher den Dark Mode aktiviert hat. Danach wird z.B. im <body> Element eine neue Klasse hinzugefügt. Dazu müssen wir erst unseres CSS Beispiel von oben etwas umgestalten.
body {
background-color: white;
color: black;
}
body.dark-mode {
background-color: black;
color: white;
}Bei obigem CSS Beispiel wird die Webseite im Dark Mode dargestellt, wenn <body> die Klasse „dark-mode“ hat. Natürlich ist die Klasse frei wählbar. Nun müssen wir mit JavaScript prüfen ob der Dark Mode aktiv ist und falls ja die entsprechende Klasse setzen.
Alle JavaScript Beispiele sind in jQuery geschrieben. Da ich hauptsächlich mit WordPress entwickle, und jQuery dort per Default geladen wird macht es Sinn dieses auch zu benutzen.
var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDarkScheme.matches) {
$('body').addClass('dark-mode');
}CSS oder JavaScript was ist die bessere Lösung?
Die Frage „Was ist besser?“ stellt sich bei der Entwicklung von Projekten in ganz vielen Aspekten immer wieder. Und die richtige Antwort ist immer „Es kommt darauf an“ 😉
Grundsätzlich bin ich der Ansicht reine CSS Lösungen sind immer besser als Lösungen die JavaScript benötigen. Wenn man eine Webseite einfach nur in Dunkel – oder Hell darstellen möchte stimmt das auch hier.
Oft möchte man aber, dass die Besucher der Webseite auch manuell zwischen den verschiedenen Modi wechseln können – und da stossen wir mit CSS sehr schnell an Grenzen. Aus diesem Grund präferie ich hier die JavaScript Lösung.
Grundsätzlich sollte ein Dark Mode folgendermassen umgesetzt sein: Dem Besucher wird beim Besuch der Webseite automatisch das dunkle oder helle Design angezeigt (je nach seiner Betriebsystemvoreinstellung). Auf der Webseite befindet sich ein Button bei dem man per Klick das Design wechseln kann.
Nach dem Klick wird nicht nur das Design gewechselt, sondern auch das bevorzugte Design in seinem Browser abgespeichert, damit er bei einem erneuten Seitenaufruf das Design nicht nochmals manuell wechseln muss. Diese Funktionalität ist nur mit JavaScript umsetzbar. Ich zeige euch hier ein Code Beispiel.
var body = $('body');
/* Feststellen ob das Helle oder dunkle Theme angezeigt werden soll */
/* Prüfen ob es eine sessionStorage mit der Theme Einstellung gibt (User Setting hat immer vorrang) */
if(sessionStorage.getItem('theme_variant')) {
/* Theme anhand der sessionStorage anpassen */
var saved_theme = sessionStorage.getItem('theme_variant');
if(saved_theme == 'light') {
body.removeClass('dark-mode');
} else {
body.addClass('dark-mode');
}
} else {
/* Theme anhand seiner Betriebsystem Einstellung anpassen */
var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDarkScheme.matches) {
body.addClass('dark-mode');
}
}
/* Bei Klick auf den Button das Theme Wechseln - und das präferierte Theme abspeichern */
$('button').on('click', function() {
body.toggleClass('dark-mode');
if(body.hasClass('dark-mode')) {
var save_in_session_storage = 'dark';
} else {
var save_in_session_storage = 'light';
}
sessionStorage.setItem('theme_variant', save_in_session_storage);
});Kurze Code Erklärung
Grundsätzlich handelt es sich um 2 Funktionen, die erste Funktion prüft ob es in der sessionStorage bereits einen gespeicheretes präferiertes Theme gibt, falls ja wird dieses Theme geladen. Falls es kein präferiertes Theme gibt wird geprüft ob das Betriebsystem im Dark Mode läuft – falls ja wird das dunkle Theme geladen.
Die zweite Funktion ist, der Event der ausgelöst wird, wenn jemand auf den Button zum Theme Wechseln drückt. Als erstes wird die Klasse „dark-mode“ hinzugefügt oder entfernt (je nach dem ob sie schon da ist). Danach speichern wir das aktuelle Theme „dark oder light“ in der sessionStorage ab.
Somit haben wir einerseits die automatische Ermittlung der Betriebssystemeinstellung aber auch die Möglichkeit, dass der User sein Theme selber wechsel kann.
Fazit zum Dark Mode im Web
Der Dark Mode ist gekommen um zu bleiben. Auch viele Menschen in meinem Umkreis die keine Tech-Nerds sind nutzen (vor allem aufmobilen) Engeräten den Dark Mode.
Die App-Entwickler haben längst reagiert, egal ob SBB, 20 Minuten oder SwissCovid alle liefern inzwischen zum hellen auch ein dunkles Design mit. Im Web istdie Verbreitung noch nicht so gross, dennoch wird sie Stück für Stück zu nehmen. Prominente Internetseiten die das schon nutzen sind etwa Twitter, Facebook (im neuen Layout), YouTube oder WhatsApp Web.
Wir Web-Entwickler werden in Zukunft wohl öfters damit konfrontiert werden, eine Webseite in einem hellen und in einem dunklen Design anzubieten. Ich selber arbeite beruflich bereits am ersten entsprechenden Projekt.
Privat habe ich für diesen Blog bereits ein dunkles Design entwickelt, dass mit obiger JavaScript Lösung ebenfalls automatisch geladen wird.
Light Mode 
Dark Mode
