Automatischer „Dark Mode“ für Websites

Aktuelle Versionen von macOS wie auch Windows 10 bieten die Möglichkeit, die Oberfläche des Systems im „Dark Mode“ zu betreiben. In diesem Modus werden Hintergründe von Fenstern werden dunkel dargestellt und Texte hell.

Auch Websites können diese Einstellung mit der CSS-Media-Query prefers-color-scheme: dark unterstützen, indem sie für den „Dark Mode“ ein angepasstes Farbschema verwenden.

Als stark vereinfachtes Beispiel um zu zeigen, wie das grundsätzlich funktioniert:

body {
  color: #000;
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #222;
  }
}

Für meine eigene Website habe ich das auch eingebaut:

Dabei hat sich auch ein Bug in Firefox gezeigt: bei optgroup-Elementen wird die angegebene Hintergrundfarbe ignoriert, wenn sie identisch ist zur Farbe des zuhörigen select-Elements, die Textfarbe dagegen nicht. Das ist auch in Bugzilla dokumentiert.

Konkret nutze ich solche Elemente im Speichenlängenrechner für die Gruppierung von Felgengrößen und Nabentypen. Da ich alle Texte im „Dark Mode“ hell eingestellt habe, wurden für Gruppentitel kaum lesbare Texte vor einem hellgrauen Hintergrund angezeigt. Als Workaround habe für die Gruppentitel eine minimal vom Standard abweichende Farbe festgelegt(#ffffe statt #ffffff und #222221 statt #222222). Das ist optisch kaum sichtbar, wird aber auch von Firefox beachtet.