Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

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>

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the prefers-color-scheme feature across the major browsers from 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 */
}

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →