Startseite > Lexikon > Web, UX & Conversion > Dark Mode

Bleistiftskizze: Smartphone mit halb hellem, halb dunklem Bildschirm, darauf ein rundes Logo auf der Trennlinie mit orangem Ring, als Bild für Dark Mode
Web, UX & Conversion

Dark Mode

Helle Schrift auf dunklem Grund, eingestellt im Handy, übernommen von deiner Website und deinem Newsletter. Wenn du ihn nicht mitdenkst, sieht dein Logo dort plötzlich ganz anders aus.

Auch bekannt alsDunkelmodusDark Themedunkler Modus

4 Min

Lesezeit

03.11.2026

Letzte Aktualisierung

Was ist Dark Mode?

Schau mal auf dein Handy. Gut möglich, dass dort weiße Schrift auf Schwarz steht. Das ist der Dark Mode: eine Farbeinstellung, bei der der Hintergrund dunkel und die Schrift hell ist. Fachleute sprechen von „negativer Polarität“, der klassische helle Modus heißt Light Mode.

Den Modus wählt der Nutzer, nicht du. Er stellt ihn im Betriebssystem oder Browser ein. Apps und Websites können diese Wahl abfragen und sich danach richten. Dafür gibt es in CSS die Abfrage prefers-color-scheme, die seit Januar 2020 in allen gängigen Browsern funktioniert.

Wie verbreitet ist das? Belastbare Zahlen für Deutschland gibt es nicht. In einer Umfrage von Android Authority aus dem Juni 2026 mit 3.110 Stimmen hatten 73 % den Dark Mode dauerhaft an. Das ist eine Leserumfrage unter Technikfans, kein Querschnitt — aber ein klares Zeichen, dass du ihn nicht ignorieren solltest.

Was Dark Mode bringt — und was nicht

Um den Dark Mode ranken sich zwei Versprechen: Er spare Akku und schone die Augen. Beides stimmt nur halb.

Akku · Purdue University 2021

Vier Handys, sechs Google-Apps

39–47 %

weniger Strom bei voller Helligkeit

3–9 %

bei üblicher Helligkeit

Spürbar nur bei OLED und hellem Bildschirm

Gemessen auf Pixel 2, Pixel 4, Pixel 5 und Moto Z3. Bei 30–50 % Helligkeit ist der Effekt klein.

Newsletter · Litmus 2026

Wer öffnet im Dunkeln?

> 25 %

Öffnungen im Dark Mode

3 Arten

wie Mail-Apps Farben ändern

Jede vierte Mail landet auf dunklem Grund

Litmus, über 1,5 Mrd. Öffnungen im September 2026. Messbar ist der Modus nur in manchen Mail-Apps.

Und die Augen? Die Nielsen Norman Group hat die Studienlage ausgewertet: Für Menschen mit normalem Sehvermögen ist dunkle Schrift auf Weiß fast immer besser lesbar, vor allem bei kleiner Schrift. Manchen Menschen mit Sehschwäche, etwa bei Grauem Star, hilft der Dark Mode dagegen. Die Empfehlung daraus: Nicht als Standard für alle setzen, aber anbieten.

Dark Mode im Newsletter

Bei Websites entscheidest du selbst, ob und wie umgeschaltet wird. Bei E-Mails nicht. Laut Litmus gehen Mail-Apps drei Wege:

Verhalten

Beispiele

keine Änderung

Apple Mail, Gmail im Browser

teilweise invertiert

Outlook.com, Gmail-App Android

voll invertiert

Gmail-App iPhone, Outlook Windows

„Invertiert“ heißt: Die App dreht deine Farben selbst um. Aus weißem Hintergrund wird Schwarz, aus dunkler Schrift Hell. Dein dunkelblaues Logo auf transparentem Grund steht dann dunkelblau auf Schwarz — und ist weg.

Häufige Fehler

Fehler 1 · Reines Schwarz mit reinem Weiß

Maximaler Kontrast klingt gut, blendet aber. Google empfiehlt im Material Design ein Dunkelgrau (#121212) als Grundfläche statt Schwarz.

Fehler 2 · Logo ohne Dunkel-Variante

Dunkle Schrift im Logo verschwindet auf dunklem Grund. Leg eine helle Logo-Version an oder gib dem Logo eine feine helle Kontur. Litmus empfiehlt für Mails außerdem genug Rand um das Motiv.

Fehler 3 · Markenfarben eins zu eins übernehmen

Kräftige Farben flimmern auf Dunkel und sind schwer lesbar. Nimm hellere, weniger gesättigte Töne. Und prüf den Kontrast: Die WCAG verlangen auch im Dark Mode mindestens 4,5 : 1 für normalen Text.

Fehler 4 · Newsletter nur hell testen

Was in deinem Mail-Programm gut aussieht, kann in der Gmail-App am iPhone kippen. Test jede Vorlage einmal im Dark Mode, etwa mit Litmus oder Email on Acid.

So machst du deine Marke Dark-Mode-fest

  • Logo: eine helle Variante oder eine Kontur, als SVG oder PNG mit Rand.
  • Farben: für jede Markenfarbe eine Dunkel-Variante festlegen und den Kontrast prüfen.
  • Website: Farben als Variablen anlegen und mit prefers-color-scheme oder der CSS-Funktion light-dark() umschalten. In Elementor gehen dafür globale Variablen.
  • Newsletter: in den wichtigsten Mail-Apps im Dark Mode testen.

Ein eigener Dark Mode für die Website ist bisher eher selten. Project Wallace fand ihn 2026 bei rund 5 % von über 100.000 untersuchten Startseiten. Für eine KMU-Website ist er deshalb kein Muss — ein Logo, das auch dunkel funktioniert, schon.

Häufige Fragen

Spart Dark Mode wirklich Akku?

Ja, aber nur bei OLED-Bildschirmen und vor allem bei hoher Helligkeit. Die Purdue University maß bei voller Helligkeit 39 bis 47 % weniger Verbrauch, bei üblicher Helligkeit nur 3 bis 9 %.

Braucht meine Website einen Dark Mode?

Nicht zwingend. Sinnvoll ist er bei Seiten mit viel Lesestoff oder Tools, die lange offen sind. Wichtiger ist, dass dein Logo und deine Farben in Mails und Apps auch auf dunklem Grund funktionieren.

Ist Dark Mode besser für die Augen?

Nicht pauschal. Für die meisten Menschen ist dunkle Schrift auf Hell besser lesbar. Manchen Menschen mit Sehschwäche hilft der Dark Mode. Deshalb: anbieten, nicht erzwingen.

Warum sieht mein Newsletter im Dark Mode kaputt aus?

Weil manche Mail-Apps deine Farben selbst umdrehen. Helle Logo-Varianten, Konturen und Tests in der Gmail-App und in Outlook helfen.

Begriff teilenHat dir die Definition geholfen? Schick sie weiter.