Von VONA
Dark Mode richtig umsetzen
Dark Mode ist mehr als invertierte Farben. Kontrast, Farbtemperatur, Schatten — wie man ein echtes dunkles Interface gestaltet.
Der einfachste Dark Mode ist kein Dark Mode — es ist eine Inversion. filter: invert(1) auf das HTML-Element, und fertig. Das Ergebnis sieht schrecklich aus: Fotos werden zu Negativen, Farben verlieren ihre Bedeutung, und das Interface wirkt wie ein zufälliges Experiment. Ein echter Dark Mode entsteht durch bewusste gestalterische Entscheidungen — nicht durch algorithmische Umkehrung.
Der fundamentale Unterschied liegt in der Farbphilosophie. In einem hellen Interface arbeitet man mit Tönen auf weißem Grund — Schatten, mittlere Grautöne, dunkle Akzente. In einem dunklen Interface kehrt sich die Logik nicht einfach um. Stattdessen arbeitet man mit Farbebenen: sehr dunkle Hintergründe als Fundament, etwas hellere Flächen für Karten und Panels, still leuchtende Akzentfarben, die sich vom Hintergrund abheben, ohne zu strahlen. Das sind eigenständige Designentscheidungen — keine abgeleiteten.
Kontrast im Dark Mode
Ein häufiger Fehler: zu hoher Kontrast. Reines Weiß auf echtem Schwarz erzeugt auf modernen OLED-Bildschirmen eine optische Strahlwirkung, die ermüdend ist. Gute Dark-Mode-Implementierungen verwenden Off-White-Töne für den primären Text — oft zwischen #DADADA und #F0F0F0 — und nicht-schwarze Hintergründe. Ein gutes Basis-Dunkel ist zum Beispiel #111111, nicht #000000. Dieser Unterschied ist klein, aber sein Effekt auf die wahrgenommene Qualität des Interfaces ist beträchtlich.
Auch Schatten verhalten sich im Dark Mode anders. Im hellen Interface definieren dunkle Schatten Tiefe. Im dunklen Interface sind dunkle Schatten kaum sichtbar — weil der Hintergrund schon dunkel ist. Tiefe entsteht im Dark Mode durch aufgehellte Flächen und subtile Borders, nicht durch Schatten. Material Design und Apples Human Interface Guidelines behandeln dieses Thema detailliert und sind gute Referenzen für systematische Lösungen.
Technische Umsetzung
Für die technische Umsetzung empfehlen wir CSS Custom Properties als Fundament. Alle Farben werden als semantische Tokens definiert, die je nach Theme überschrieben werden. Das erlaubt es, Dark Mode mit wenigen Zeilen CSS zu implementieren — und bei Bedarf weitere Themes hinzuzufügen, ohne den Rest des Codes anzufassen.
- Keine reinen Schwarz- und Weiß-Töne — immer leicht gebrochene Werte
- Tiefe durch aufgehellte Flächen, nicht durch Schatten
- Farbsättigung im Dark Mode leicht reduzieren für natürliche Wirkung
- Systemeinstellung respektieren via
prefers-color-scheme, aber Override erlauben - Bilder und Icons separat auf Dark-Mode-Verträglichkeit prüfen
Dark Mode ist für viele Nutzer nicht Komfort, sondern Notwendigkeit — wegen Lichtsensitivität, langen Arbeitszeiten am Bildschirm oder einfach Vorliebe. Wer ihn nicht implementiert oder schlecht umsetzt, schließt diese Nutzer aus. Wer ihn gut macht, schafft ein Interface, das in beiden Welten funktioniert — und oft im dunklen Modus besonders überzeugend aussieht.