Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
CSS: Webseite/Farben an das Farbschema (Color-Theme) anpassen (Dark-Mode detection)
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
Hinterlasse einen Kommentar