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.

Lesezeit: 3 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen
Von

Inhaltsverzeichnis

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.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+