Dark Mode und Farbschema mit CSS abfragen – prefers-color-scheme

Responsive Websites reagieren auf eine Vielzahl von Geräteeigenschaften und Einstellungen. Das Ziel besteht darin, dass Layout möglichst perfekt an die unterschiedlichen Nutzungssituationen anzupassen. Das gewählte Farbschemas des Betriebssystems, z. B. der eingestellte sog. »Dark Mode« lässt sich mit dem Media Query prefers-color-scheme
abfragen.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
Syntax und Optionen
Die Schreibweise des Media Queries ist simpel und folgt der üblichen Syntax.
@media (prefers-color-scheme: dark) {
/* CSS Code wenn Dark Mode aktiv */
}
Mit prefers-color-scheme
wird das Farbschema abgefragt. Es stehen drei Werte zur Verfügung:
no-preference
(keine Präferenz)dark
(dunkles Farbschema)light
(helles Farbschema)
In Abhängigkeit zum eingestellten Farbschema kann dann das Layout umgefärbt werden.

Dark Mode für Bilder im HTML-Code
Um Bilder im HTML-Code zu tauschen, kann das <picture>-Element verwendet werden. Mit folgendem Code wird das Bild light.png
als Fallback geladen. Wenn der Dark Mode aktiv ist, wird das Bild gegen dark.png
getauscht.
<picture>
<source srcset="dark.png" media="(prefers-color-scheme: dark)">
<img src="light.png" alt="">
</picture>
Browser-Support
Der Browser-Support von prefers-color-scheme
ist gut. Den detaillierten Support entnehmt ihr bitte der Website caniuse.com
High Contrast Mode unter Windows
Unter Windows kann ein Darstellungsmodus mit erhöhtem Kontrast eingestellt werden. Dieser Modus kann mit einem eigenen – nicht standardkonformen – Query abgefragt werden:
@media screen and (-ms-high-contrast: active) {
/* CSS Code, wenn High Contrast aktiv */
}
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
Unterstützung bei Responsive Design-Projekten
Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →