CSS Styles für den Dark Mode
2021
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 🙂
Guter Beitrag. Ich habe den Dark Mode beim Trendblog vor ca. einem Jahr umgesetzt. https://trendblog.euronics.de/
Weitere Websites mit Dark Mode sind bereits in Planung.
Sehr cool! Und beim Chrome (Brave bei mir) kann man das Rendering auch mit der rechten Maustaste in top bar beamen und hat sie damit künftig immer zur Verfügung!
https://stefankremer.cloud/index.php/s/wMuVJpcBWz5YSTw
Ah! Das ist cool. Danke Stefan!
Ich persönlich nutze auch gerne den Dark Mode, da ich ihn angenehmer für meine Augen empfinde. Es ist schön zu sehen, dass immer mehr Webseiten diese Option anbieten und somit auf die Bedürfnisse ihrer Nutzerinnen eingehen.
Vielen Dank für Deinen informativen Beitrag und weiter so!
Viele Grüße Jan Feiler
Danke Dir Jan!