So setzen Sie den Media Query für den Dark Mode im Browser richtig um

Moderne Betriebssysteme — egal ob auf Mobilgeräten oder auch auf Desktop-Systemen — unterstützen inzwischen oft zwei Farbschemen: ein „helles“ und ein „dunkles“ Farbschema. Der User stellt sein präferiertes Schema ein, oder kann sogar das Schema nach Tageszeit automatisch wechseln lassen.¹ Dies wird als „Dark Mode“ bezeichnet, da das „neuere“ Schema das dunkle ist.

Viele Webbrowser² unterstützen auch diesen Dark Mode. D.h. sie können — je nach Einstellung des Betriebssystems — ein anderes Design für eine Website darstellen.

Media-Query, was ist das überhaupt?

Das Aussehen einer Webseite wird zum großen Teil durch den Einsatz von Cascading Style Sheets, kurz CSS, bestimmt. Dort kann der Programmierer der Webseite dem Browser sagen, dass z.B. der Hintergrund in einem hellen Grau dargestellt werden soll, auf der Webseite eine bestimmte Schriftart verwendet werden soll, usw. Dabei können die Angaben sehr “global” gehalten werden, oder auf sehr spezifische Teile der Seite angewandt werden. Diese Angaben werden als Styles bezeichnet.

Styles können auch bestimmte Eigenschaften des Browsers abfragen. Dies wird zum Beispiel sehr stark im Bereich vom Responsive Webdesign eingesetzt, um Seitenelemente so zu platzieren, dass sie auf den unterschiedlichen Geräten gut lesbar sind, oder um Bilder in der jeweils optimalen Auflösung zu laden. Hierfür werden sogenannte “Media-Queries” programmiert.

Media-Query für den Dark Mode

Auch für den Dark Mode gibt es in CSS inzwischen³ ein geeignetes Media-Query: prefers-color-scheme.

Übergibt man einem Objekt einen Style innerhalb eines @media (prefers-color-scheme: dark)-Blocks, so greift dieser nur, wenn das Betriebssystem ein dunkles Farbschema aktiviert hat.

CSS Media-Query „prefers-color-scheme“

Der Media-Query prefers-color-scheme kann man genau einen von drei Parametern mitgeben. Je nachdem wird der Style-Block innerhalb der Media-Query übernommen oder nicht:

• no-preference Zeigt an, dass der Nutzer keine Angabe zum Farbschema gemacht hat.
• light Zeigt an, dass der Nutzer eine Präferenz für ein helles Farbschema angegeben hat (dunkler Text auf hellem Hintergrund).
• dark Zeigt an, dass der Nutzer eine Präferenz für ein dunkles Farbschema angegeben hat (heller Text auf dunklem Hintergrund).

Dark Mode: Best Practices

Bilder desaturieren

Dark Mode wird oft bei dunklem Umgebungslicht genutzt. In diesem Szenario ist es sinnvoll, die Sättigung der Bilder auf der Website zu verringern. Dies kann man in CSS durch img { filter: grayscale(30%); } erreichen.

Dies wirkt sich aber auf alle Bilder aus. Oft werden Charts und Diagramme in SVG- oder PNG-Dateien gespeichert, Bilder (Fotos, etc.) als JPG. Der Filter kann also z.B. auf alle Bilder mit Dateinamen *.jpg eingeschränkt werden:

img[src*=".jpg"] {
    filter: grayscale(30%);
}

Natürlich kann ein solcher Filter erweitert werden. Zum Beispiel, wenn man alle Bilder außer SVG-Dateien desaturieren will, kann man img:not([src*=".svg"]) zum Auswählen der Elemente verwenden.

Grelles Weiß vermeiden

Reines Weiß (RGB #FFFFFF) wird auf dunklem Hintergrund als sehr grell empfunden. Deshalb sollte man das Weiß ein wenig abdunkeln, z.B. auf RGB #E1E1E1.

Testen im Browser (Firefox)

Standardmäßig benutzt Firefox das Schema, welches im Betriebssystem hinterlegt ist. Dies kann man ab Version 100 in den Einstellungen anpassen.

In Version 96 wird es über die erweiterten Einstellungen in about:config verändert. Dort gibt es den Eintrag layout.css.prefers-color-scheme.content-override, der folgende Werte annehmen kann:

• 1: Benutze das helle Farbschema
• 2: Benutze das dunkle Farbschema
• 3: Benutze das Farbschema vom Betriebssystem (default-Einstellung)