Der Lichtschalter für Websites: „prefers-color-scheme“

Dunkler Text auf hellen Hintergründen liest sich für die meisten Nutzer angenehmer als umgekehrt. Aber was dem Auge am Tag zusagt, stellt sich gerade in dunklen Umgebungen als großer Nachteil dar. In dunklen Umgebungen lassen sehr helle Websites die Augen schnell überanstrengen und schmerzen. Mit dem CSS Media-Query prefers-color-scheme lässt sich die Website an die Helligkeitseinstellungen der Benutzeroberfläche bzw. des Browsers anpassen.

Worum geht es bei „prefers-color-scheme“?

Mittels des Media-Query schaltet die Website auf festzulegende CSS-Styleangaben um, die speziell auf die Darstellung in dunklen oder hellen Umgebungen eingehen. Ist im Betriebssystem beispielsweise der Dark Mode aktiviert (z. B. Standard-App-Modus: Dunkel), zeigt die Website das Farbschema für dunkle Umgebungen an.

Light Mode und
@media (prefers-color-scheme: light)

Dark Mode und
@media (prefers-color-scheme: dark)

Betriebssystem im Dark Mode und Website ohne Anpassung

Umsetzung

Die Umsetzung erfolgt über die folgenden CSS-Anweisungen:

body { /*Standardanweisungen - für Browser, die prefers-color-scheme noch nicht unterstützen*/
	color: black;
	background: white;
}
@media (prefers-color-scheme: light) { /*Media-Query für die helle Darstellung - Light Mode*/
	body {
		color: black; /*dunkle Schrift*/
		background: white; /*heller Hintergrund*/
	}
}

@media (prefers-color-scheme: dark) {/*Media-Query für die dunkle Darstellung - Dark Mode*/
	body {
		color: white; /*helle Schrift*/
		background: black; /*dunkler Hintergrund*/
	}
}

Nicht unterschlagen möchte ich die zusätzliche Angabe „@media (prefers-color-scheme: no-preference)“, wenn der Nutzer keinen Modus gewählt hat bzw. keine Möglichkeit zum Wählen hat.

Bilder im Dark Mode

Es kommt vor, dass Abbildungen im neuen Farbschema nicht mehr gut in das Layout passen. Ein Bild mit transparentem Hintergrund (.png, .svg) und vielen dunklen Inhalten sieht auf hellem Hintergrund besser aus, als auf dunklem Hintergrund. Aber wie erreichen wir nun auch eine Anpassung von Bildern, je nach Farbschema? Durch die Verwendung des source-Tags:

<picture>
	<source srcset="images/dark.png" media="(prefers-color-scheme: dark)">
	<img src="images/light.png" alt="Bildbeschreibung" />
</picture>

Dabei wird das passende Bild in den zwei Varianten angelegt und dann, je nach Farbmodus, angezeigt.

Beispiel einer Abbildung im Light Mode

Beispiel einer Abbildung im Dark Mode

Beispiel einer Abbildung ohne Anpassung an das aktuelle Farbschema