Dark Mode


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.


Welche Vorteile bringt der Dark Mode?

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.

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.

Dark Mode an einem Beispiel


Wie haben wie den Dark Mode umgesetzt?

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:

:root {
    --primary:#121212;
    --secondary:#303030;
    --accent:#F83850;
    --white:#ffffff;
    --dark:#121212;
    --background:#FFFFFF;
    --font-color:#121212;
    --all-gray-10:#F5F5F5;
    --all-gray-20:#ECEDEE;
    --all-gray-30:#C8CBCE;
    --all-gray-40:#7E8082;
}

@media (prefers-color-scheme:dark) {
    :root {
        --primary:#f0f0f0;
        --secondary:#d0d0d0;
        --accent:#F83850;
        --white:#ffffff;
        --dark:#121212;
        --background:#202428;
        --font-color:#ffffff;
        --all-gray-10:#404040;
        --all-gray-20:#808080;
        --all-gray-30:#d0d0d0;
        --all-gray-40:#f0f0f0;
    }
}

Das Ergebnis kann man mit Safari auf MacOS und auf iOS13 betrachten. Also einfach auf stadtteilliebe.de austesten!

— alx