CSS Styles für den Dark Mode

Vor einiger Zeit wurde ich schon darauf aufmerksam gemacht, dass es in CSS das prefers-color-scheme Media Feature gibt, mit welchem man Styles ausspielen kann, wenn die Userin den Dark Mode benutzt.

Seit keine Ahnung Mitte der Neunziger Jahre oder so sieht man auf Computerbildschirmen normalerweise schwarzen Text auf weißem Grund (heutzutage nennt sich dies „Light Mode“). In letzter Zeit kommt der Dark Mode wieder in Mode. Manche argumentieren, diese Darstellungsweise wäre besser für die Augen und würde Strom sparen, aber vermutlich ist es am Ende vor allem ein neuer Designtrend. Twitter ermöglicht es Userinnen schon seit einiger Zeit, den Modus in den Accounteinstellungen zu ändern und selbst Github ermöglicht es zwischen verschiedenen Modi zu wechseln oder auf die Systemeinstellungen zurückzufallen.

Neu sind diese Spielereien ja nicht unbedingt. Vor einigen Jahren war es ja schon einmal populär das Webseitenbesucherinnen zwischen verschiedenen „Themes“ wechseln konnten. Irgendwie kommt der neue Dark Mode Trend als eine weitere Iteration dieses Themas daher. Also, dachte ich mir, schaue ich mir prefers-color-scheme einmal näher an und biete websupporter.net mit einem eigenen Darkmode an. Dabei handelt es sich um ein Media Feature, mit diesen Hilfe man einen Media Query schreiben kann.

body {
    background: #fff;
    color: #222;
}
@media (prefers-color-scheme: dark) {
    body {
        background: #23282d;
        color: #eee;
    }
}

Mit dieser Anweisung teilen wir dem Browser mit, normalerweise einen weißen Hintergrund und Text in schwarz auszugeben, es sei denn die Nutzerin hätte in ihren Systemeinstellungen das Farbschema dunkel ausgewählt. Dann würde der Hintergrund dunkel sein und die Schrift hell.

Mit dem Wert dark spricht man den Dark Mode an und mit dem Wert light den Light Mode, welcher allerdings auch einfach der Standardwert ist.

Wie kann ich die Styles für den Dark Mode testen?

Wenn Du dafür nicht in den Systemeinstellungen herumspielen möchtest halten die Entwicklertools von Firefox und Chrome ein Feature für Dich bereit. In Firefox kannst Du mit dem Sonnensymbol den „Light Mode“ und mit dem Mondsymbol den „Dark Mode“ simulieren.

In Chrome ist es etwas schwieriger. Hier musst Du die Konsole öffnen, Strg+Shift+P drücken, danach Show Rendering auswählen. Daraufhin öffnet sich eine ganze Reihe von Auswahlmöglichkeiten. Darunter unter anderem „Emulate CSS media feature prefer-color-scheme“, wo man nun zwischen dem Dark Mode und dem Light Mode wechseln kann.

Wie steht es mit Euch? Benutzt Ihr Dark Mode? Habt Ihr schon einmal eine Webseite mit diesem Media Feature umgesetzt? Und – wie gefällt Euch der Dark Mode von websupporter.net 🙂