Mit 12 Zeilen CSS: Einfacher Dark Mode für Webseiten

Der Software-Entwickler Tom Brow hat sich auf seinem Blog mit dem von iOS 13 eingeführten Dunkelmodus auseinandergesetzt und erklärt am Beispiel der eigenen Seite, wie sich Online-Inhalte so vorbereiten lassen, dass das Seitendesign in Abhängigkeit von den Geräte-Einstellungen des Besuchers hell bzw. dunkel angezeigt wird.

Schlüssel zum Glück ist der CSS media query „prefers-color-scheme“, mit dessen Hilfe in Erfahrung gebracht werden kann, ob Besucher den Dunkelmodus auf ihren Geräten aktiviert haben.

Ist dies der Fall färbt Brows Beispiel-Code den Hintergrund der Webseite dunkel ein, ändert die Text- und Link-Farben und entsättigt die in den Bildern eingesetzten Farben etwas.

Brows 12 Zeilen sind noch kein vollständiger „Dark Mode“ für Webseiten, aber ein guter Start für Webmaster, die ihre Seiten entsprechend anpassen möchten. Eine Aufgabe, die auch wir noch zu erledigen haben.