Schwarzmaler
Dark Mode mit CSS für Webseiten umsetzen
Seit macOS 2018 den Dark Mode eingebaut bekam, erfreut sich die alte Idee neuer Beliebtheit: dunkle Hintergründe und helle Schrift. Doch was nützt eine dunkle Menüleiste, wenn Webseiten nach wie vor weiß strahlen? Mit den Bordmitteln von CSS können Sie auf den Wunsch des Nutzers nach dunklem Hintergrund reagieren.
Dunkle Hintergründe sparen, zumindest bei OLEDs, messbar Strom [1]. Außerdem schont der Dark Mode die Augen und optisch empfinden ihn viele Nutzer als attraktive Alternative zum Einheitsgrau. Gerade bei Programmierern und Grafikern ist der Modus daher beliebt.
Wer den Dark Mode benutzt, tut das unter macOS oder Windows meist systemweit. Unter macOS findet sich die Einstellung in den Systemeinstellungen im Abschnitt „Allgemein / Erscheinungsbild“, Windows-Nutzer finden sie in der Einstellungen-App unter „Personalisierung / Farben / Standard-App-Modus auswählen“. iOS lernt das Kunststück in Version 13, bei Android ist der Dark Mode in Android 9.0 eingebaut, bei älteren Versionen hängt die Unterstützung vom Hersteller ab. Hat der Nutzer den Dark Mode aktiviert, gibt das Betriebssystem diese Einstellung an die Browser weiter. Um als Webentwickler darauf zu reagieren, bedarf es einer Media Query. Diese Abfragen in CSS sind keine neue Erfindung, sie kommen auch zum Einsatz, um beispielsweise abhängig von der Größe des Bildschirms oder der Ausrichtung des Geräts unterschiedliche CSS-Regeln anzuwenden.