Eine technischer Guide zum „Dark Mode“ im Web 🌐

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 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.

Windows 10 đŸ’» – eine neue Liebe bahnt sich an 💘
Pop!_OS ein Linux 🐧 das begeistert

Kommentare

Schreibe einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.