Dark-Mode-Farben entwickeln — Tipps für dunkle Themes
Dark Mode ist heute ein unverzichtbares Feature für moderne Webanwendungen. Nutzer bevorzugen dunkle Themes besonders in abgedunkelten Umgebungen und abends, weil sie die Augen schonen. Aber gute Dark-Mode-Farben zu entwickeln ist anspruchsvoller als es zunächst scheint — man kann nicht einfach alle Farben invertieren. Dieser Artikel zeigt, wie man mit dem WikiPlus Farbauswahl-Tool durchdachte Dark-Mode-Paletten entwickelt.
Die häufigsten Fehler beim Dark-Mode-Design
Viele Entwickler machen beim ersten Dark-Mode-Versuch dieselben Fehler. Reines Schwarz (#000000) als Hintergrund: Reines Schwarz wirkt auf Bildschirmen oft zu hart und künstlich. Die menschliche Wahrnehmung ist es nicht gewohnt, tiefschwarze Flächen in der Natur zu sehen. Bessere Wahl: sehr dunkle Blau- oder Grautöne wie #1a1a2e, #121212 (Google Material Design) oder #0f172a (Tailwind Slate-950). Reines Weiß als Text auf schwarzem Hintergrund: Zu starker Kontrast ermüdet die Augen. Besser sind off-white Töne wie #e2e8f0 oder #e0e0e0. Gesättigte Primärfarben unverändert übernehmen: Sehr gesättigte Farben, die im Light Mode gut funktionieren, wirken auf dunklem Hintergrund zu aggressiv. Die Helligkeit muss angehoben und oft die Sättigung leicht reduziert werden. Elevation nicht sichtbar machen: Im Light Mode zeigt Schatten die Tiefe. Im Dark Mode funktioniert das nicht gut — stattdessen verwendet man subtile Helligkeitsunterschiede für verschiedene Ebenen.
Elevation-System für Dark Mode: Tiefe durch Helligkeit
Im Dark Mode ist das Elevation-System anders als im Light Mode. Statt Schatten für Tiefe zu verwenden, erhöht man die Helligkeit der Oberfläche, je höher ihre Elevation ist. Google Material Design definiert dies als 'Surface Overlays': Die Basis-Oberfläche ist am dunkelsten, Karten und Dialoge werden progressiv heller. Praktisches Beispiel mit einem Basisgrau von #121212: Level 0 (Hintergrund): #121212 (0% Overlay). Level 1 (Karten, Sidebar): #1d1d1d oder hsl(0, 0%, 11%). Level 2 (Dropdown-Menüs): #212121. Level 4 (Modals, Drawers): #272727. Level 8 (Navigation): #2d2d2d. Level 16 (Bottom Sheets): #333333. Diese Abstufungen lassen sich mit dem HSL-Format und dem WikiPlus Farbauswahl-Tool systematisch entwickeln, indem man den Helligkeitswert schrittweise erhöht.
Primärfarben für Dark Mode anpassen
Im Dark Mode müssen interaktive Elemente wie Buttons, Links und Highlights ausreichend Kontrast zum dunklen Hintergrund bieten. Das bedeutet in der Regel: Primärfarben müssen heller (höhere Lightness in HSL) und manchmal weniger gesättigt sein. Beispiel: Eine Primärfarbe, die im Light Mode bei hsl(220, 90%, 50%) liegt, sollte im Dark Mode auf hsl(220, 80%, 65%) oder ähnliches angepasst werden, damit der Kontrast zum dunklen Hintergrund stimmt. Für Links gilt: Im Light Mode ist ein mittleres Blau gut lesbar auf weißem Hintergrund. Im Dark Mode braucht man ein helleres Blau. Immer den Kontrastwert prüfen — der Mindestkontrast für normalen Text ist 4,5:1 nach WCAG AA. Der WikiPlus Farbauswahl-Tool hilft dabei, die angepassten Farbwerte schnell zu ermitteln.
CSS-Implementation: @prefers-color-scheme und CSS-Variablen
Die sauberste CSS-Implementation für Dark Mode kombiniert CSS Custom Properties mit der @prefers-color-scheme-Media-Query. Grundstruktur: :root { --bg: #ffffff; --surface: #f8fafc; --text: #1e293b; --primary: hsl(220, 90%, 50%); } @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --primary: hsl(220, 80%, 65%); } }. Mit diesem Ansatz müssen Farben nur an einer Stelle definiert werden, und das gesamte Design schaltet automatisch um. Für manuelles Toggle (Button, der Light/Dark wechselt) kann man eine Klasse auf das <html>-Element setzen und die @media-Regel durch einen Klassen-Selektor ergänzen: .dark { ... }. JavaScript setzt dann die Klasse und speichert die Präferenz in localStorage.
Häufig gestellte Fragen
- Muss ich für Dark Mode alle Farben neu definieren?
- Nicht unbedingt alle. Neutrale Farben (Hintergründe, Texte, Rahmen) müssen fast immer angepasst werden. Akzentfarben brauchen oft nur leichte Helligkeitsanpassungen. Bilder und Icons bleiben in der Regel unverändert, können aber mit filter: brightness() oder CSS-Blendmodi subtil angepasst werden.
- Wie teste ich meinen Dark Mode auf verschiedenen Betriebssystemen?
- In Chrome DevTools kann man unter 'Rendering' (Cmd+Shift+P → 'Show Rendering') die Farb-Präferenz simulieren. Firefox hat eine ähnliche Option. Für echte Tests sollte man auf verschiedenen Geräten (iPhone, Android, Windows, Mac) testen, da Displaykalibrierungen sich unterscheiden.
- Sollte ich Dark Mode immer unterstützen?
- Für neue Projekte ist Dark Mode heute ein Standard-Feature, das Nutzer erwarten. Laut Statistiken nutzen über 80% der Smartphone-Nutzer Dark Mode. Der Implementierungsaufwand mit CSS-Variablen ist überschaubar und der Nutzengewinn für viele Nutzer erheblich.