Dark Mode auf Webseiten

In vielen Betriebssystemen wie z.B. macOS oder iOS zog in den letzten Versionen ein sogenannter Dark Mode ein. Bei diesem Modus werden die Elemente des Betriebssystems auf dunklere Farben eingestellt. Damit wird der Nutzer am Abend bzw. in der Dunkelheit nicht mehr so stark geblendet. Wird allerdings bei aktiviertem Dark Mode eine Webseite aufgerufen, welche von Haus aus mit hellen Farben arbeitet, so wird der Nutzer wieder geblendet. Mittlerweile können Webseiten sich allerdings dem gewünschten Farbschema anpassen. Dazu muss im CSS eine entsprechende Media Query definiert werden:

@media (prefers-color-scheme: dark) {
body {
    background-color: rgb(24, 26, 27);
    color: rgb(214, 211, 205);
}
}

Ist nun der Dark Mode im Betriebssystem aktiviert, wird das präferierte Farbschema übermittelt und kann dann CSS entsprechend umgesetzt werden.

seeseekey.net im Dark Mode

Wer die eigene Webseite mit einem dunklen Farbschema sehen möchte, kann dazu die Firefox-Erweiterung Dark Reader nutzen.

Dark Reader
Preis: Kostenlos

Mit dieser Erweiterungen können Webseiten automatisch in ihre dunklen Versionen überführt werden. Für die Entwicklung einer eigenen dunklen Variante können die neuen Farbwerte nun mittels der Entwicklertools des Browsers aus der Ausgabe der Erweiterung extrahiert werden.


Dir gefällt dieser Beitrag und du möchtest helfen? Werde Mitglied und unterstütze mich.

1 Kommentar » Schreibe einen Kommentar

  1. > Damit wird der Nutzer am Abend bzw. in der Dunkelheit nicht mehr so stark geblendet.

    Ich empfehle einen pastellgelben/-grünen Hintergrund statt eines grell weißen. Problem gelöst. Dieser ganze “Dark Mode”-Quatsch ist Esoterik. (Und sieht grausig aus. YMMV)

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.