Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

CSS: Webseite/Farben an das Farbschema (Color-Theme) anpassen (Dark-Mode detection)

#Tutorials#CSS

Seit einiger Zeit gibt es bei Windows und Mac den sogenannten Dark-Mode. Dadurch werden Schaltflächen und Hintergründe in dunkleren Farben angezeigt. Dies ist für das Auge angenehmer und spart zudem noch Energie bei mobilen Geräten. Seit neuestem gibt es einen Media-Query der den Modus des Betriebssystem erkennt. So kann man seine Webseite an die Einstellungen des Benutzers anpassen und statt helle, dunklere Farben verwenden. 

Das Ganze wird noch nicht von allen Browsern unterstützt, funktioniert aber immer schon in Firefox,Safari und der neuesten Chrome Version (76).

Hier mal ein Beispiel-Code, wie man das neue Media-Query benutzt::

body {
	background-color: #fff;
}

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

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

Im Beispiel oben wird für alle nicht unterstützten Browser die Hintergrundfarbe auf weiß gesetzt. Für Browser, die das Media-Query untersützen wird der Hintergrund bei einem Light-Mode auch auf weiß gesetzt, im Dark-Mode auf schwarz.

 


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.