Darkmode Im Browser

TAKO // WISSENSWERTES

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

Beispiel: Darkmode-Einstellungen in den macOS Systemeinstellungen

Viele Webbrowser2 unterstützen auch diesen Darkmode. D.h. sie können, je nach Einstellung des Betriebssystems, ein anderes Design für eine Website darstellen.

Dies erfolgt über die die CSS 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).

Darkmode: Best Practices

Bilder desaturieren

Darkmode 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.


  1. Tagsüber wird ein heller Bildschirm dargestellt, nachts ein dunkler Bildschirm. ↩︎

  2. Firefox, Chrom, Safari, Opera, iOS Safari, Android Browser, Chrome for Android, Firefox for Android. Siehe auch die aktuelle Kompatibilitätsübersicht. ↩︎