Dark Mode mit CSS für Webseiten umsetzen
Was nützt eine dunkle Menüleiste im Dark Mode, wenn Webseiten weiterhin weiß strahlen? Mit den Bordmitteln von CSS färben Sie deren Hintergründe dunkel ein.
- Manuel Ottlik
Dunkle Hintergründe schonen die Augen und optisch empfinden sie viele Nutzer als attraktive Alternative zum Einheitsgrau. Gerade bei Programmierern und Grafikern ist der Modus daher beliebt. Zudem sparen Dark Modes, zumindest bei OLEDs, messbar Strom.
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.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
Boox Note Air3 C im Test: Hybrid-Tablet mit farbigem E-Paper-Display
UpdateLadetarife für Elektroautos im Vergleich
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade
Smartes Türschloss im Test: Nuki 4 Pro mit Thread und Matter
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Prepaid, Debit, Credit: Wie Sie die passende Kreditkarte finden
Boox Note Air3 C im Test: Hybrid-Tablet mit farbigem E-Paper-Display
UpdateLadetarife für Elektroautos im Vergleich
High-End-Smartphones im Kameravergleich: Wettkampf um die beste Bildqualität
Elektroauto MG4 Trophy im Test: Bestseller mit Batterie-Upgrade