CSS: prefers-color-scheme

nospam@example.com (Thomas Heidrich) — Sat, 06 Apr 2024 06:56:00 +0000

Nur durch reinen Zufall bin ich über das verhältnismäßig neue Media Feature prefers-color-scheme gestolpert.

Motivation

Schon immer haben mich sehr helle Bildschirme gestört und besonders wenn man viele Stunden davor sitzt, ist es für die Augen einfach entspannender, wenn es mal nicht wenig schwarz auf viel weiß sein muss. Seitdem die Desktopumgebung Gnome einen Dark-Mode anbietet, bin ich ein großer Fan davon und eben ist an mir vorbreigescrollt, dass die Browser den bevorzugten Modus ans CSS durchreichen.

Nutzung

Wie man es genau nutzt, muss ich hier jetzt nicht groß ausführen.

@media (prefers-color-scheme: dark) {
  ...
}

Lest Details einfach bei Mozilla nach. Auch die achten übrigens darauf, ob ihr den Dark-Mode bevorzugt.

Bei meinem Blog habe ich mich für ein vollständiges Schwarz im Dark-Mode entschieden, weil mich besonders bei OLED-Displays immer sehr nervt, wenn Leute meinen ein sehr dunkles Grau großflächig verwenden zu müssen. Pixel, die aus sein dürfen, leben länger.

Fazit

Die Unterstützung in mein Blog einzubauen, hat mich nur ein paar Minuten gekostet. Es bisschen könnte ich besonders bei der Kommentareingabemaske noch schrauben, aber alles in allem ist das schon mal recht gut nutzbar.

Blog - gnuheidix

CSS: prefers-color-scheme

Motivation

Nutzung

Fazit