Der Dark Mode im UX-Design: Ein Schatten-Spiel

2019 führte Apple den systemweiten Dark Mode ein. Damals war es ein Trend. 2026 ist es ein Standard. Nutzer erwarten, dass ihre Apps und Websites sich ihrer Umgebung anpassen. Wenn man nachts im Bett liegt und eine schneeweiße Website aufruft, fühlt es sich an wie ein Angriff auf die Netzhaut ("Flashbang Effect").

Doch viele Designer machen den Fehler: Sie nehmen ihr weißes Design, drücken "Invertieren" und nennen es fertig. Das Ergebnis? Grässliche Kontraste, schwarze Schatten auf schwarzem Grund und ermüdende Augen.

Echten Dark Mode zu designen, ist eine eigene Disziplin. Es geht um Helligkeits-Hierarchien (Elevation), nicht um Farben.

Featured Snippet: Dark Mode Design (Dunkelmodus) erfordert spezifische Anpassungen der Farbpalette. Wichtige Regeln: 1. Nutzen Sie niemals reines Schwarz (#000000), sondern Dunkelgrau (#121212), um "Smearing" zu vermeiden. 2. Nutzen Sie Helligkeit statt Schatten, um Tiefe zu erzeugen (Elevation). 3. Entsättigen Sie Akzentfarben, um Blendung zu reduzieren.

---

The Cost of Inaction: Der Akku-Fresser

Warum lieben Nutzer den Dark Mode?

1. Augenschonung: Weniger "Blaulicht" am Abend.
2. Batterie: Auf OLED-Screens (heute Standard bei Smartphones) verbrauchen schwarze Pixel 0 Strom. Eine weiße Website verbraucht bei 100% Helligkeit bis zu 60% mehr Akku als eine dunkle.

Wenn Ihre App keinen Dark Mode hat, deinstallieren Power-User sie oft, um ihren Akku zu schonen. Bei Websites ist es ein Zeichen von Qualität. "Diese Firma kümmert sich um Details."

---

Die Design-Regeln für die Dunkelheit

Don't use Black.

Reines Schwarz (#000000) ist zu hart. Auf OLED-Screens schalten sich bei #000000 die Pixel komplett aus. Wenn man dann schnell scrollt, "schmieren" die Pixel nach (Black Smearing), weil sie Zeit brauchen, um wieder anzugehen. Best Practice: Nutzen Sie ein sehr dunkles Grau, z.B. #121212 (Material Design Standard). Das wirkt weicher und hochwertiger.

Elevation = Helligkeit

Im Light Mode nutzen wir Schatten (box-shadow), um zu zeigen, dass eine Karte "über" dem Hintergrund schwebt. Im Dark Mode sieht man Schatten nicht (schwarz auf schwarz). Lösung: Je höher ein Element schwebt, desto heller wird sein Hintergrund.

• Background: #121212
• Card Level 1: #1E1E1E
• Card Level 2 (Modal): #2C2C2C

Wir arbeiten mit Licht, nicht mit Schatten.

Farben entsättigen

Ein knalliges Blau (#0000FF), das auf Weiß gut aussieht, verursacht auf Dunkelgrau ein optisches Flimmern. Es ist zu grell. Lösung: Nutzen Sie Pastell-Töne. Nehmen Sie Ihre Brand-Farbe und mischen Sie 20-40% Weiß hinzu, um sie weicher zu machen.

---

Technische Umsetzung: CSS Variables

Vergessen Sie separate Stylesheets. Nutzen Sie CSS Custom Properties.

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --text-primary: #e0e0e0;
  }
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

Mit modernen Frameworks wie Tailwind CSS ist das noch einfacher (dark:bg-gray-900). Wichtig: Bieten Sie immer einen Toggle (Schalter) auf der Website an. Manche Nutzer haben ihr System auf "Dark" gestellt, wollen aber Texte lieber auf Hell lesen (oder umgekehrt). Respektieren Sie die System-Einstellung (Default), aber erlauben Sie einen Override.

---

Myth-Busting: "Dark Mode ist besser für die Augen"

Nicht immer. Für Menschen mit Astigmatismus (Hornhautverkrümmung) ist weißer Text auf schwarzem Grund schwerer zu lesen ("Halation Effect" – die Buchstaben verschwimmen). Deshalb darf Dark Mode niemals Zwang sein. Die Wahlfreiheit ist das eigentliche UX-Feature.

---

Unasked Question: "Was mache ich mit Bildern?"

Ein helles weißes Foto auf einer dunklen Seite ("Flashbang"). Wie geht man damit um? Pro-Tipp: Legen Sie im CSS einen leichten Filter über Bilder im Dark Mode.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.8) contrast(1.2);
  }
}

Das dimmt die Bilder etwas herunter, damit sie nicht blenden, erhält aber den Kontrast. Für Logos (PNG mit Transparenz) brauchen Sie oft zwei Versionen: Eine dunkle fürs Helle und eine helle fürs Dunkle. Nutzen Sie das <picture> Element dafür.

---

FAQ: Dark Mode Engineering