It’s #FrontendFriday – Come To The Dark Side… CSS

Dark Mode

Immer mehr Apps und sogar Betriebssysteme bieten neben einem Light Mode nun auch einen Dark Mode an. Was ist damit genau gemeint?
Seit den 80er Jahren wird in Software zur Visualisierung für eine gute Lesbarkeit meist ein weißer Hintergrund und schwarze Schrift verwendet.
Seit ein paar Jahren bieten aber immer mehr Apps (und sogar Betriebssysteme) einen Dark Mode (auch dunkler Modus genannt) an. Das bedeutet meist, dass die Farben umgekehrt werden – schwarzer Hintergrund und weiße Schrift. Die Vorteile für die Software sind, dass der schwarze Hintergrund (der ja den Großteil des Bildschirms ausmacht) weniger Energie kostet als ein weißer Hintergrund. Für den Nutzer (und dazu zähle ich mich auch) ist es angenehmer für die Augen, wenn man mal wieder im Dunkeln am PC oder Handy noch etwas durchlesen möchte oder einfach nur im Internet surft.

CSS für die dunkle Seite des Browsers

Da der Dark Mode immer beliebter wird, wurde nun auch für Frontendentwickler eine Möglichkeit geschaffen, auf diesen Dark Mode zu reagieren. Somit kann das Design der Website passend zum Modus geändert werden.

Mit der folgenden Mediaquery können explizite Regeln im CSS definiert werden, die dann nur für den Dark Mode gelten:

@media (prefers-color-scheme: dark) {
    /* CSS für Dark Mode hier einfügen */
}

In folgendem Beispiel sieht man im Light Mode nur den Text „Hallo Welt!“, wechselt man aber in den Dark Mode auf seinem Browser (Hier steht wie 😊), ändert der Text seine Farbe und ein Bild erscheint:

Durch ändern der Fontart oder hellere Farben sehen Webseiten im dunklen Modus viel besser aus.  Somit schafft man auch für Dark Mode Nutzer ein angenehmes Erlebnis auf der Webseite.

Da auch mehrere E-Mail-Programme den Dark Mode anbieten, empfiehlt es sich, auch seine HTML E-Mails einmal im Dark Mode zu überprüfen. Es kann nämlich folgendes passieren:

Das Bild zeigt eine HTML E-Mail in der E-Mail App eines Android Smartphones.
Das Handy ist im Dark Mode und die E-Mail enthält nun weiße Streifen, die man im Light Mode nicht sieht. Hier könnte man dies ausbessern mit der oben genannten Media Query und dementsprechend CSS.

Simulieren des Dark Mode im Chrome Browser

Es ist zwar nicht schwer, im Browser auf den Dark Mode zu wechseln (oder Light Mode), aber dennoch etwas umständlich, da die Änderung bleibt. Chrome hat hier natürlich ein attraktives Angebot, diesen Modus zu emulieren:

1. Chrome Browser öffnen.
2. F12 drücken (oder Rechtsklick auf die Webseite und auf „Untersuchen“ klicken) um die Developer Konsole zu öffnen.
3. Auf Windows:
   STR+SHIFT+P drücken
   Auf macOS:
   CMD+SHIFT+P drücken
4. In das erscheinende Eingabefenster „Show Rendering“ eingeben und das erste Ergebnis auswählen
5. In dem neu geöffneten Fenster kann man unter der Option „Emulate CSS media feature prefers-color-scheme“ nun den gewünschten Modus auswählen, der emuliert werden soll.

Dieser Modus wird dann solange emuliert, bis man ihn wechselt oder das Browserfenster schließt.

Persönlich nutze ich den Dark Mode sehr häufig und finde es sehr gut, wenn Webseiten darauf reagieren, weil es zeigt, dass die Entwickler sich mit dem Thema beschäftigt haben, damit die Webseite auch dort stimmig aussieht. Es ist auch dank der oben genannten Media Query nicht schwierig, auf diesen Modus zu reagieren und es wird auch von den meisten Browsern unterstützt (zu den Ausnahmen gehören der IE und der Firefox für Android).