nach oben gehen
Webseiten Netz

Anleitung: 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.

Webseiten Netz
von: Steffen Domaschke - veröffentlicht: 11.08.2021

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.

Beispiel Light Mode

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

Beispiel Dark-Mode

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

Beispiel Dark-Mode

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 fuer Bild im Light Mode

Beispiel einer Abbildung im Light Mode

Beispiel fuer Bild im Light Mode

Beispiel einer Abbildung im Dark Mode

Beispiel fuer Bild im Dark-Mode ohne Anpassung

Beispiel einer Abbildung ohne Anpassung an das aktuelle Farbschema

Internetagentur SEO Lausitz Webdesign, Webseiten erstellen, Betreuung und Wartung von Webseiten, WP Support Anonym hat 5,00 von 5 Sternen 13 Bewertungen auf ProvenExpert.com

Kontaktieren Sie uns - wir sind gern für Sie da!

prefers-color-scheme, color-scheme, css color-scheme, dark mode website, light mode website, Webdesign, Bild, tipps css