Zum Inhalt springen

Dark Mode

oder auch Dark Theme, Dunkelmodus, Dunkler Modus, Nachtmodus, Night Mode

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 02.09.2026

Dark Mode ist eine Darstellungsvariante mit dunklem Hintergrund und heller Schrift. Betriebssysteme und Browser geben die Vorliebe des Nutzers weiter, und eine Website kann darauf reagieren, ohne dass jemand etwas einstellen muss.

Dark Mode

Darstellung einer Oberfläche mit dunklem Hintergrund und hellem Text, als Alternative zur hellen Standarddarstellung.
Beispiel: „Im Dark Mode verschwinden die Logos, weil sie schwarz auf transparent liegen.“

Auch: Dark Theme oder auf Deutsch Dunkelmodus. Alle drei bezeichnen dasselbe.

Technisch: erkennbar über die Medienabfrage prefers-color-scheme, die die Systemeinstellung des Nutzers weitergibt.

Dieselbe Seitenskizze zweimal nebeneinander, links auf weißem Grund, rechts auf dunklem Grund mit heller Schrift
Beide Fassungen zeigen dieselbe Seite. Welche erscheint, gibt in der Regel die Systemeinstellung des Besuchers vor.

Warum Nutzer ihn wollen

Der häufigste Grund ist Gewohnheit: Wer sein Telefon dunkel eingestellt hat, empfindet eine grelle weiße Seite dazwischen als Störung. Bei schwachem Umgebungslicht ist die dunkle Darstellung außerdem angenehmer, und auf Geräten mit OLED-Bildschirm spart sie messbar Strom, weil schwarze Bildpunkte dort nicht leuchten.

Für Menschen mit Lichtempfindlichkeit kann der Dark Mode den Unterschied zwischen lesbar und unlesbar ausmachen. Für andere gilt das Gegenteil: Bei Sehschwäche verschwimmt heller Text auf dunklem Grund leichter. Deshalb ist der Dark Mode eine Wahlmöglichkeit und kein besserer Standard.

Was bei der Umsetzung schiefgeht

Am häufigsten die Bilder. Ein Logo als schwarze Grafik auf transparentem Grund ist auf dunklem Hintergrund unsichtbar, ebenso Diagramme und Symbole. Jede Grafik braucht deshalb entweder eine zweite Fassung oder einen Hintergrund, der sie trägt.

Der zweite Punkt sind die Kontraste. Reines Weiß auf reinem Schwarz flimmert und ermüdet beim Lesen. Üblich ist deshalb ein sehr dunkles Grau als Grund und ein leicht gedämpftes Weiß für den Text. Farben, die im Hellen gut funktionieren, wirken auf dunklem Grund oft zu grell und müssen eigene Werte bekommen.

Der dritte Punkt ist der Aufwand. Ein Dark Mode verdoppelt die Zahl der zu prüfenden Zustände. Wer ihn anbietet, muss jede Seite, jedes Formular und jede Fehlermeldung zweimal ansehen. Mit Design Tokens lässt sich das beherrschen, ohne Tokens wird es zur Dauerbaustelle.

Automatisch oder umschaltbar

Die einfachste Lösung folgt der Systemeinstellung und braucht keine Bedienung. Ein zusätzlicher Umschalter ist sinnvoll, wenn Nutzer für diese eine Website eine andere Wahl treffen sollen. Dann gehört die Entscheidung gespeichert, damit sie beim nächsten Besuch noch gilt.

Siehe auch:

Zustände von Bedienelementen (Default, Hover, Active, Disabled)

Die verschiedenen Darstellungen, die ein Bedienelement je nach Situation annimmt, um seinen Status erkennbar zu machen.

#Webdesign-Grundlagen

Theme

Austauschbares Paket aus Templates und Gestaltungsdateien, das das Erscheinungsbild einer ganzen Website trägt.

#Webdesign-Grundlagen

Light Mode

Darstellung einer Oberfläche mit hellem Hintergrund und dunklem Text, der Ausgangszustand fast aller Websites.

#Webdesign-Grundlagen

Designtrends im Web

Gestaltungsmuster, die in einem Zeitraum gehäuft eingesetzt werden, ohne dass ihre Wirkung belegt sein muss.

#Webdesign-Grundlagen