Dark Mode ist ein alternatives Farbschema für Benutzeroberflächen, das dunkle Hintergrundfarben mit heller Schrift kombiniert. Was als Nischenfeature begann, ist heute ein Standard, den Nutzer auf Websites und in Apps erwarten.
Warum Dark Mode?
Augenkomfort
Bei schwachem Umgebungslicht reduziert Dark Mode die Blendwirkung des Bildschirms. Weniger helle Flächen bedeuten weniger Lichtimmission in dunklen Umgebungen.
Akkuersparnis
Auf OLED- und AMOLED-Displays schalten schwarze Pixel tatsächlich ab. Dark Mode kann die Akkulaufzeit bei Smartphones um 30-60% verlängern – ein konkreter Nutzenvorteil.
Ästhetik
Dunkle Interfaces wirken modern, elegant und premium. Inhalte wie Bilder und Videos kommen vor dunklem Hintergrund besonders gut zur Geltung.
Design-Herausforderungen
Farbkontraste
Dark Mode ist nicht einfach ein invertierter Light Mode. Die Farbtheorie muss angepasst werden: Reines Weiß (#FFFFFF) auf reinem Schwarz (#000000) erzeugt zu starken Kontrast und ermüdet die Augen. Besser sind leicht aufgehellte Hintergründe (#1C1C1E) und gedämpftes Weiß (#E5E5E5).
Farbsättigung
Gesättigte Farben, die im Light Mode gut aussehen, können im Dark Mode blenden. Die Sättigung sollte reduziert und die Helligkeit angepasst werden.
Elevation durch Helligkeit
Statt Schatten (wie im Light Mode) signalisiert im Dark Mode eine hellere Hintergrundfarbe die Erhöhung eines Elements. Karten und Modals erhalten eine leicht hellere Fläche als der Seitenhintergrund.
Bilder und Icons
Bilder mit transparentem Hintergrund müssen für beide Modi funktionieren. SVG-Icons mit currentColor passen sich automatisch an.
Implementierung mit Tailwind CSS
Tailwind CSS macht Dark Mode einfach: Der dark:-Prefix schaltet Styles basierend auf Nutzereinstellungen oder einer manuellen Klasse um. In Kombination mit CSS Custom Properties und dem Design System werden Farbwerte zentral definiert.
Dark Mode im Design System
Ein durchdachtes Design System definiert semantische Farben für beide Modi: background-primary, text-primary, accent-color – jeweils mit Light- und Dark-Variante. So bleibt die Bedeutung der Farben konsistent, während die konkreten Werte wechseln.
Barrierefreiheit im Dark Mode
Barrierefreiheit gilt für beide Modi. Die WCAG-Kontrastanforderungen (mindestens 4.5:1 für normalen Text, 3:1 für großen Text) müssen in Light und Dark Mode eingehalten werden.
Für professionelles UI Design ist Dark Mode heute keine optionale Zusatzfunktion, sondern ein erwarteter Standard, der sorgfältige Planung erfordert.