kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

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.

Beispiel der Demo mit Änderung des Displaymodus

Beispiel anschauen

Browser-Support

Der Browser-Support von prefer-reduced-motion ist zum Veröffentlichungszeitpunkt dieses Beitrags auf Firefox beschränkt. Für Edge, Chrome und Safari folgt die Unterstützung in der nächsten Version. 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 →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.