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

Dark Mode mit CSS erstellen – 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. Anschließend werden entsprechende Farbanpassungen vorgenommen.

Der Dark Mode wird von vielen Personen in dunklen Umgebungen als angenehmer empfunden. Auch der persönliche ästhetische Geschmack spielt sicher eine Rolle, denn der Dark Mode wirkt häufig »cooler« als die Standardansicht. Nicht zu vergessen ist auch der Umweltaspekt. Dunkle Oberflächen verbrauchen laut einem Video von Google bis zu 60% weniger Energie.

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:

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

SVGs und Favicon im Dark Mode ändern

SVG-Grafiken lassen sich durch die Integration eines Inline-Style-Blocks ebenfalls für den Dark Mode anpassen. Innerhalb der SVG wird der Media Query verwendet und die Anpassungen für den Dark Mode vorgenommen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  
  <style>
    .star {
      fill: #007c86;
      stroke: #1c2225;
    }	
    @media (prefers-color-scheme: dark) {
      .star {
        fill: #bad077;
        stroke: #cccccc;
      }
    }
  </style>
	
  <polygon class="star" points="100 14 127.943 70.619 190.426 79.698 145.213 123.77 155.886 186 100 156.619 44.114 186 54.787 123.77 9.574 79.698 72.057 70.619 100 14" stroke-miterlimit="10" stroke-width="2"/>

</svg>

Durch die Verwendung von einer SVG-Datei als Favicon für eure Website, lässt sich auch dieses im Dark Mode anpassen. Eine schöne Anleitung dafür findet ihr hier.

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

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas 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 →