Dark Mode (UI)

Definition: Dark Mode (Dunkelmodus) ist eine Darstellungsvariante einer Benutzeroberfläche bei der dunkle Hintergrundfarben (typisch #121212–#1E1E1E) mit hellen Texten und Vordergrundelementen kombiniert werden – das Gegenstück zum klassischen Light Mode. Technische Implementierung: CSS Media Query @media (prefers-color-scheme: dark) erkennt systemseitig eingestellten Dark-Mode-Wunsch des Nutzers und wendet entsprechende Styles an; JavaScript window.matchMedia('(prefers-color-scheme: dark)') ermöglicht programmatischen Zugriff auf die Präferenz; CSS Custom Properties (--color-background; --color-text) erlauben effizientes systemweites Theming ohne Code-Duplizierung. Dark-Mode-Varianten: System-gesteuert (folgt OS-Einstellung automatisch); Manueller Toggle (Nutzer wählt per UI-Button; Präferenz in localStorage gespeichert); Geplanter Dark Mode (nach Tageszeit; weniger verbreitet). Wichtige Designprinzipien: Keine simple Invertierung aller Farben (erzeugt Grautöne statt echter Dunkelheit; Schatten werden sinnlos); stattdessen eigene dunkle Farbpalette mit angepassten Kontrastverhältnissen; Farbsättigungsreduktion bei Dark Mode empfohlen (leuchtende Primärfarben wirken auf dunklem Hintergrund visuell zu dominant).

Erläuterung

Dark Mode existiert in der Computerwelt seit den Anfängen: frühe Computerterminals (VT100, 1978; IBM PC, 1981) zeigten standardmäßig grünen oder weißen Text auf schwarzem Hintergrund – Light Mode war der historische Bruch, nicht Dark Mode. Der moderne Dark Mode als bewusste Design-Entscheidung und Nutzerpräferenz wurde durch Apple mit macOS Mojave (September 2018) und iOS 13 (September 2019) zum Mainstream-Thema: Apple's Implementierung war die erste vollständige Betriebssystem-weite Dark-Mode-Integration bei einem Consumer-Betriebssystem, kurz darauf gefolgt von Android 10 (September 2019, Google) und Windows 10 Dark Mode (April 2019, mit vollständiger App-Integration). Die CSS-Spezifikation für prefers-color-scheme wurde vom W3C als Teil des Media Queries Level 5 Drafts spezifiziert (2019); der erste browser-support erschien in Safari 12.1 (März 2019) und Chrome 76 (Juli 2019). Google Material Design Team veröffentlichte 2019 dedizierte Dark Theme Guidelines: das Team um Doris Liu und Janet Sung definierte Kernprinzipien für Dark-Mode-Design: dunkle Oberflächen werden durch verschiedene Grauschattierungen mit unterschiedlicher Elevation ausgedrückt (höhere Elevation = helleres Grau, nicht Schatten wie im Light Mode); Accent-Farben sollten im Dark Mode desaturiert werden (z.B. statt #6200EE → #BB86FC für Material Design Purple) um auf dunklem Hintergrund nicht zu aggressiv zu wirken; Weiß-auf-Schwarz-Kontrast soll nicht 100% sein (weißer Text #FFFFFF auf rein schwarzem Hintergrund #000000 erzeugt zu starken Kontrast der Augenermüdung verursachen kann – stattdessen Off-White auf Dark-Grey). Bezüglich OLED-Akkuersparnis: Googles Forschung (2018, veröffentlicht auf Android Dev Summit) zeigte messbare Akkuersparnisse auf OLED-Displays: bei 50% Displayhelligkeit verbraucht ein weißes Interface auf dem Pixel 2 ~63% mehr Akkuleistung als ein dunkles Interface; bei voller Helligkeit bis zu 23× mehr Energie für weiße Pixel vs. schwarze Pixel auf OLED (da OLED-schwarze Pixel buchstäblich ausgeschaltet sind). Auf LCD-Displays hat Dark Mode keinen Akkuvorteil da die Hintergrundbeleuchtung immer aktiv ist. Eine Nutzungsstudie von Nielsen Norman Group (2020) zeigte dass Dark Mode bei schlechten Lichtverhältnissen die Lesbarkeit verbessert, aber bei gutem Tageslicht Light Mode für die meisten Nutzer lesbarer ist – Dark Mode ist daher primär eine Präferenz- und Komfortfrage, nicht universal besser.

CSS-Implementierung und Farbpaletten-Design

CSS Custom Properties für Dark/Light-Theming: Best Practice: Farbwerte als Custom Properties definieren; in prefers-color-scheme umschalten; Grundstruktur: :root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-primary: #0066cc; --color-surface: #f5f5f5; --color-border: #e0e0e0; }; @media (prefers-color-scheme: dark) { :root { --color-bg: #121212; --color-text: #e4e4e4; --color-primary: #4da6ff; --color-surface: #1e1e1e; --color-border: #333333; } }; Alle CSS-Regeln nutzen dann Variablen statt Festwerte (background: var(--color-bg); color: var(--color-text)); Vorteil: einmalige Farbänderung updated das gesamte Interface; kein CSS-Code-Splitting nötig; Elevation im Dark Mode: Material Design-Ansatz: höhere Elevation = helleres Grau; --surface-1: #1e1e1e; --surface-2: #242424; --surface-3: #272727; --surface-4: #2c2c2c (statt Schatten); Schatten im Dark Mode: Box-Shadow auf dunklem Hintergrund kaum sichtbar; stattdessen: leichte Aufhellung der Oberfläche + subtiler 1px Rahmen
Farbpaletten-Anpassung für Dark Mode: Problem mit simpler Invertierung: filter: invert(1) dreht alle Farben um; Bilder werden invertiert (unerwünscht); Schatteneffekte werden zu Leuchteffekten; Markenfarben verlieren ihre Bedeutung; Korrekte Methode – separate Dark-Mode-Palette: Hintergründe: nicht reines Schwarz (#000000) sondern dunkleres Grau (#121212 = Material Design Baseline); Abstufungen für Ebenen (#1E1E1E, #242424, #2D2D2D); Text: nicht reines Weiß sondern Off-White (87% Opazität auf Schwarz ≈ #E0E0E0); mittlerer Text: 60% (#9E9E9E); deaktivierter Text: 38%; Primärfarben: Sättigungsreduzierung empfohlen; statt satten Blau #0052CC → helleres weniger gesättigtes #4DA6FF; kontrollieren ob auf dunklem Hintergrund immer noch ≥ 4,5:1 Kontrast; Bilder: keine Farbanpassung; optional: img { opacity: 0.9 } für leichte Dämpfung bei Dark Mode; dark: Prefix in Tailwind CSS: dark:bg-gray-900 dark:text-gray-100 direkt im HTML für Dark-Mode-Varianten
Manueller Dark-Mode-Toggle – Implementierung: JavaScript-Ansatz: Toggle-Button setzt data-theme="dark" auf <html> oder <body>; CSS: [data-theme="dark"] { --color-bg: #121212; ... }; Persistenz: localStorage.setItem('theme', 'dark'); Beim Seitenload: const saved = localStorage.getItem('theme') || (matchMedia('prefers-color-scheme: dark').matches ? 'dark' : 'light'); Früh im <head> ausführen (vor CSS-Rendering) um Flash of Wrong Theme (FOWT) zu vermeiden; Inline-Script oder Blocking-Script vor <link rel="stylesheet">; Toggle-UI: aria-label="Dunkelmodus aktivieren" / "Hellmodus aktivieren" (je nach aktuellem Zustand updaten); aria-pressed="true/false" für Toggle-State; Icon: Sonne für Light-Mode, Mond für Dark-Mode (verbreitete Konvention); Systemeinstellung respektieren als Default; manuelle Auswahl hat Vorrang; CSS-only-Ansatz (ohne JS): @media (prefers-color-scheme: dark) für rein system-basiertes Theming; kein manueller Override möglich

Dark Mode in Design-Systemen und WCAG-Accessibility

WCAG-Kontrast-Anforderungen im Dark Mode: WCAG 2.1 AA: Normaltext ≥ 4,5:1 Kontrastverhältnis; Großtext ≥ 3:1; grafische Elemente ≥ 3:1; im Dark Mode häufige Fehler: Primärfarbe aus Light Mode auf dunklem Hintergrund prüfen (z.B. Blau #0066CC auf Weiß: 5,8:1 ✓; auf #121212: 5,4:1 ✓ – meist okay); aber: sehr helle Farben auf fast-weiß verlieren im Dark Mode Kontrast; Placeholder-Text und sekundärer Text: Grau #888888 auf #121212: nur 3,9:1 = nicht AA-konform für Normaltext; muss auf #9E9E9E oder heller angehoben werden; Testing-Tools: WebAIM Contrast Checker (manuell); Colour Contrast Analyser (Desktop-Tool; Tanaguru); Figma-Plugin «Able» oder «Color Contrast» prüft direkt im Design; Chrome DevTools: CSS Overview → Colors zeigt Kontrast-Probleme; Fokus-Indikator im Dark Mode: Standard-Browser-Outline (blau/schwarz) kann auf dunklem Hintergrund unsichtbar sein; immer explizites :focus-visible styling definieren für Dark Mode
Dark Mode in Design-Systemen: Material Design 3 (Google): vollständige Dark-Mode-Farbpaletten für alle Tokens (Primary, Secondary, Tertiary, Error, Background, Surface, On-Surface etc.); M3-Farb-System generiert automatisch Dark-Mode-Varianten via Material Theme Builder; Apple Human Interface Guidelines: Dark Mode als First-Class-Feature; semantische Systemfarben (systemBackground, label, secondaryLabel) adaptieren automatisch für Dark/Light; Figma Dark Mode Design: Figma Variables (seit 2023): erstellt Light/Dark Color Modes als Variable Collections; Komponenten referenzieren Farbvariablen statt feste Werte; Design und Code verwenden dieselben Tokens; Storybook Dark Mode Addon: zeigt Komponenten in Dark/Light nebeneinander; State of CSS 2023: 88% der Entwickler haben prefers-color-scheme bereits in Projekten genutzt; Dark Mode gilt als Standard-Feature moderner Webprojekte
Bilder, Grafiken und Schatten im Dark Mode: Schatten: im Light Mode definieren Schatten Elevation; auf dunklem Hintergrund sind Schatten kaum sichtbar; Alternativen: leichte Aufhellung der Oberfläche (--surface-elevated: #242424 statt #1E1E1E); dünner heller Border (border: 1px solid rgba(255,255,255,0.1)); Bilder: Fotos: keine Farbanpassung nötig; optional img { filter: brightness(0.9) } zur Dämpfung; SVG-Icons: Farbe über currentColor (erbt Textfarbe) adaptiert automatisch; falls fixed-color-SVGs: separate Dark-Mode-Varianten oder CSS-Filter; Illustrationen: separate Dark-Mode-Versionen meist nötig; Gradient-Anpassung: Background-Gradients müssen für Dark Mode angepasst werden; helle Gradients (#fff → #f0f0f0) auf Dark umstellen (#1a1a1a → #252525); Logos: weißes Logo auf dunklem Hintergrund vs. schwarzes Logo auf hellem – picture-Element mit prefers-color-scheme im source-media-Attribut ermöglicht automatischen Logo-Wechsel

Praxistipp: Implementieren Sie Dark Mode nicht als Notlösung durch Invertierung sondern als durchdachtes zweites Farbschema. Definieren Sie alle Farben als CSS Custom Properties in :root und überschreiben Sie diese in einem @media (prefers-color-scheme: dark)-Block – das ermöglicht systembasiertes Theming ohne JavaScript. Prüfen Sie anschließend alle Textfarben im Dark Mode mit dem WebAIM Contrast Checker: besonders Grautöne für sekundären Text und Placeholder-Text unterschreiten im Dark Mode häufig das 4,5:1-Minimum. Und achten Sie auf den «Flash of Wrong Theme» bei manuellen Toggles: das Theme-Lade-Script muss im <head> vor dem Stylesheet stehen, sonst flackert die Seite beim Laden kurz im falschen Modus.