TL;DR

Beim Dark Mode passt sich eine Website hinsichtlich Hintergrundfarbe und Textfarben an. Aus der hellen Hintergrundfarbe wird ein dunkler Farbton, aus den dunklen Schriften werden helle Schriftfarben. Über die Media Query prefers-color-scheme: dark kann man den Dark Mode im CSS aktivieren.

Die dunkle Seite des Web

Dark Mode

28 — Mai 2019 ❘ Alexander Fischer

Tymothy Hatcher von Apple macht sich im Blog von WebKit für ein Umsetzen des Dark Modes fürs Web stark. Wir haben das zum Anlass genommen selber den Dark Mode bei unseren Seiten zu integrieren.

Welche Vorteile bringt der Dark Mode?

Der Dark Mode sorgt für eine angenehmere Lesbarkeit in dunklen Umgebungen. Wer kennt es nicht, wenn man im Bett liegt, nochmal auf sein Handy schauen will und man durch das helle Display so sehr geblendet ist, dass man nur durchs Augen zukneifen etwas erkennen kann. Außerdem ist der Dark Mode akkuschonend für Geräte mit OLED-Displays, da diese bei schwarzen Farben das Display an diesen Stellen komplett ausstellen können.

Wie haben wir den Dark Mode umgesetzt?

Dark Mode an einem Beispiel

Ein einfaches invertieren der Farben hat leider nicht zum gewünschten Erfolg geführt. Verwendet man für seine Hauptschriftfarbe einfach die Hintergrundfarbe und für seinen Hintergrund die Schriftfarbe, kommt man zu einem unansehnlichen Ergebnis. Wir haben deswegen eine komplett neue Farbpalette erstellt, die eigens für den Dark Mode erdacht wurde und auch die verschiedenen Grautöne klug umwandelt.

Direkt im Code setzt man dabei auf Media Queries. Für den Dark Mode nutzt man also prefers-color-scheme: dark und folglich prefers-color-scheme: light für den "Light Mode", also den normalen Modus. Da der Light Mode Standard ist, muss man diesen nicht direkt in den Media Queries erwähnen, sondern kann diese variabel direkt ohne Media Query definieren:

Dark Mode Beispiel Code

Das Ergebnis kann man bisweilen nur mit Safari-Browser auf MacOS betrachten. Also einfach auf stadtteilliebe.de oder tukan.stadtteilliebe.de und austesten!

— alx