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.

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 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 */
}