Dark-Mode-Design: Wie du ein zweites Theme auslieferst, ohne das erste zu zerstören

Die meisten Dark Modes sind nicht gestaltet, sie sind invertiert. Ein Designer dreht den Hintergrund auf fast Schwarz, tönt den Text fast weiß und nennt es fertig. Das Ergebnis ist ein Theme, das hart wirkt, schlechter lesbar ist als die helle Version und die Marke wie ein anderes Produkt im falschen Licht aussehen lässt.

Dieses Paper ist die Praxisversion. Die Farbmathematik, die ein dunkles Theme bewusst wirken lässt, die Komponentenfallen, die im Dunkeln kaputtgehen, und die Token-Struktur, die beide Themes synchron hält, während das Produkt wächst. Keine Dribbble-Verläufe, nur ein dunkles Theme, das sich seinen Platz im Designsystem verdient.

Was Dark Mode wirklich ist

Dark Mode ist ein vollständiges zweites Theme, keine Farbinvertierung. Er hat eine eigene Logik für Oberflächen, eigene Kontrastregeln und eigene Anpassungen der Schriftstärke. Ein echter Dark Mode wird von Grund auf für dasselbe Komponentenset gestaltet und dann über gemeinsame Tokens mit dem hellen Theme abgeglichen.

Die Abkürzung per Invertierung scheitert aus einem konkreten Grund. Der Light Mode verlässt sich auf weiße Flächen, die Tiefe nach oben reflektieren. Der Dark Mode kann das nicht invertieren, weil reines Schwarz Tiefe absorbiert, statt sie zu erzeugen. Das gesamte Elevation-System muss neu gebaut werden. Die Aufschlüsselung im Leitfaden zu Designsystemen erklärt, warum das in Tokens passieren muss und nicht in einzelnen Komponenten.

Warum Dark Mode 2026 wichtig ist

Drei Gründe. Keiner davon ist ästhetisch.

Akkulaufzeit auf OLED-Displays. Jeder schwarze Pixel auf einem OLED-Panel verbraucht null Strom. Eine dunkle Oberfläche auf dem Smartphone kann den Displayverbrauch bei hoher Helligkeit um 30 bis 60 Prozent senken. Für mobile Nutzer ist ein dunkles Theme zuerst ein Akku-Feature und erst dann ein visuelles.

Barrierefreiheit bei Lichtempfindlichkeit. Menschen mit Migräne, Astigmatismus oder Photophobie können eine helle Oberfläche über längere Zeit nicht bequem nutzen. Dark Mode auszuliefern ist ein Bekenntnis zur Barrierefreiheit, keine Geschmacksfrage. Die Checkliste für Web-Barrierefreiheit zeigt, wo Theming in ein vollständiges Audit gehört.

Nutzererwartung. Betriebssysteme liefern einen Dark-Mode-Schalter für das gesamte System. Ein Produkt, das die Systemeinstellung ignoriert, wirkt veraltet. Nutzer filtern App Stores und Erweiterungsverzeichnisse nach Dark-Mode-Unterstützung. Ein fehlendes dunkles Theme ist ein Marketingproblem, nicht nur eine UI-Lücke.

Die erste Regel: Nie reines Schwarz verwenden

Reines Schwarz (#000000) ist der häufigste Fehler in einem neuen Dark Mode. Es fühlt sich richtig an, weil es die dunkelstmögliche Fläche zu sein scheint. Es wirkt falsch, weil das menschliche Auge Tiefe gegen perfektes Schwarz nicht beurteilen kann.

Die Lösung: Nimm ein dunkles Grau mit einem dezenten Markenton als Basisfläche. Etwas im Bereich von #0B0B10 bis #121218 für die meisten Produkte, manchmal bis zu #1A1A1F. Der genaue Wert hängt von der Farbtemperatur der Marke ab. Eine warme Marke bekommt ein leicht warmes Dunkel. Eine kühle Marke ein leicht kühles Dunkel. Reines Neutral wirkt leblos.

Dieselbe Regel gilt für den Text mit dem höchsten Kontrast. Reines Weiß (#FFFFFF) auf einer dunklen Fläche erzeugt Halation, einen Unschärfeeffekt an hellen Kanten, der kleinen Text ermüdend zu lesen macht. Senke den Text auf etwa #E8E8EA oder nutze Weiß mit 85 bis 92 Prozent Deckkraft. Der Unterschied ist fürs Auge unsichtbar, für die Lesbarkeit aber enorm.

---

Flächen-Elevation im Dark Mode

Der Light Mode nutzt Schatten, um zu zeigen, dass eine Karte über dem Hintergrund liegt. Der Dark Mode kann das nicht, weil dunkle Flächen Schatten verschlucken. Der Ausweg ist Elevation über Helligkeit.

Jede Elevation-Stufe macht die Fläche heller, nicht dunkler. Eine Karte über der Basisfläche ist etwas heller als die Basis. Ein Modal über einer Karte ist noch heller. Tiefe in einer dunklen Oberfläche entsteht als Verlauf von Flächen, die zum Nutzer hin aufsteigen, nicht als Schatten, die darunter wegfallen.

Material Design hat das mit einer fünfstufigen Elevation-Skala formalisiert, und die Grundidee gilt für jedes Designsystem. Eine funktionierende Skala für die meisten Produkte:

Die konkreten Zahlen variieren je nach Marke, die Logik nicht. Jede erhöhte Fläche ist heller als die darunter, jeder Schatten ist dezent, und die Hierarchie liest sich als im Raum gestapelte Flächen statt als auf eine Seite gezeichnete Kästen.

Kontrastmathematik für dunkle Themes

Das Glossar zum Kontrastverhältnis behandelt die WCAG-Grundlinie von 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text. Dark Mode lockert diese Regeln nicht, verändert aber, wie man sie erfüllt.

Im Light Mode erreicht Fließtext in etwa #222 auf weißem Hintergrund rund 16 zu 1. Designer sind an enormen Spielraum über dem Minimum gewöhnt. Dark Mode ist enger. Fließtext in #E0E0E0 auf #0E0E12 kommt auf etwa 13 zu 1, was immer noch stark ist, aber die Fehlertoleranz ist kleiner. Den Text auf #B0B0B0 zu senken, um den Look weicher zu machen, kann einen Abschnitt unbemerkt unter 4,5 zu 1 drücken.

Die Disziplin: Jede Farbentscheidung im Dark Mode läuft durch einen Kontrastprüfer. Nicht einmal pro Theme, sondern einmal pro Token-Paarung. Text auf Basisfläche, Text auf Karte, Text auf Modal, Platzhaltertext, deaktivierter Text, Linktext. Jede Paarung ist eine eigene Prüfung.

Eine typische Falle ist das Token für gedämpften Text. Im Light Mode liest sich gedämpfter Text in #666 auf Weiß klar mit 5,7 zu 1. Invertiert zu #999 auf #0E0E12 fällt das Verhältnis auf etwa 4,2 zu 1 und verfehlt WCAG AA. Die Invertierungsabkürzung bricht die Barrierefreiheits-Konformität leise, und die meisten Teams merken es erst, wenn ein Audit es findet.

Farbe im Dark Mode: Sättigung, nicht nur Helligkeit

Markenfarben, die auf weißem Hintergrund strahlen, wirken auf dunklem oft matschig oder elektrisch. Der Grund: Dunkle Flächen verstärken die wahrgenommene Sättigung. Ein zu 100 Prozent gesättigter Akzent wirkt auf heller Fläche selbstbewusst. Derselbe Akzent auf dunkler Fläche wirkt radioaktiv.

Die Regel: Akzentfarben fürs dunkle Theme entsättigen, meist um 10 bis 20 Prozent, und leicht aufhellen. Ein primärer Button in #3455FF auf Weiß könnte auf Dunkel zu #5C78FF werden. Gleiche Farbfamilie, angepasst an die neue Kontrastumgebung. Die Marke bleibt als Marke erkennbar. Sie tut nur nicht mehr weh.

Das Glossar zur Farbpalette behandelt die Grundstruktur, in der diese Anpassung lebt. Ein guter Dark Mode erfindet keine neuen Farben, er liefert einen parallelen Satz derselben Markenfarben, abgestimmt auf den neuen Flächenkontext.

---

Komponentenfallen, die im Dunkeln brechen

Die meisten Komponenten brauchen mindestens eine Anpassung für den Dark Mode. Einige brechen ohne sie komplett. Hier die üblichen Verdächtigen.

Rahmen werden zum wichtigsten Trenner

Im Light Mode trennt ein dezenter Schatten oder ein kaum sichtbarer Rahmen die Komponenten. Im Dark Mode verschwinden Schatten, und die meisten Rahmen lösen sich auf. Der Rahmen wird zum Hauptwerkzeug, um Komponentenkanten zu definieren, und muss oft von etwas wie #EEE im Light Mode auf etwa #2A2A30 im Dark Mode angehoben werden, um sichtbar zu bleiben.

Der Test: Die UI auf einem Laptop bei 80 Prozent Helligkeit ansehen. Wenn Komponentenkanten zu verschwinden beginnen, braucht das Rahmen-Token im dunklen Theme einen helleren Wert.

Schatten kehren ihren Zweck um

Schatten im Light Mode drücken Flächen nach unten und weg. Schatten im Dark Mode müssen Flächen andeuten, die nach oben und vorn kommen. Das gelingt meist durch eine Kombination aus einer sehr dezent helleren Fläche (Elevation) und einem fast unsichtbaren dunklen Schatten darunter, der Gewicht ohne Sichtbarkeit hinzufügt.

Ein funktionierendes Schattenpaar für Dark Mode:

• Außen: 0 4px 12px rgba(0, 0, 0, 0.5), um das Element zu erden
• Innere Oberkanten-Highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05), um eine angehobene Kante anzudeuten

Zusammen eingesetzt wirkt die Komponente erhaben statt ausgeschnitten. Allein wirkt keiner der beiden Effekte überhaupt.

Deaktivierte Zustände verschwinden

Ein deaktivierter Button im Light Mode ist meist ein entsättigtes Grau auf Weiß. Dieselbe Behandlung im Dark Mode lässt den Button komplett in der Fläche verschwinden. Die Lösung: die Deckkraft des deaktivierten Zustands erhöhen, nicht senken. Etwa 40 Prozent Deckkraft über der Farbe der erhöhten Fläche, statt auf ein ausgewaschenes Grau zu fallen. Der deaktivierte Zustand soll weiterhin als Button erkennbar sein, nur inaktiv.

Bilder und Illustrationen brauchen eigene Behandlung

Ein Produktfoto auf weißem Hintergrund sieht auf dunkler Fläche kaputt aus. Eine Markenillustration mit weißem Strich verschwindet komplett. Bilder brauchen ihren eigenen Dark-Mode-Durchgang, sei es über ein separates Asset, einen Hintergrundtausch oder einen sorgfältig abgestimmten Filter. Das ist der teuerste Teil, um Dark Mode korrekt auszuliefern, und der Teil, den die meisten Teams streichen.

Die pragmatische Lösung für Teams, die keine parallelen Bild-Assets ausliefern können: Im Dark Mode jedem Bildcontainer einen weichen Hintergrund geben, etwa #F5F5F7 mit abgerundeten Ecken. Bilder, die auf Weiß aufgenommen wurden, sitzen nun auf einem hellen Container, und der Rest der UI bleibt dunkel.

Fokuszustände bei Eingaben brauchen mehr Kontrast

Ein blauer Fokusring, der auf weißem Hintergrund funktioniert, verliert auf dunklen Flächen an Wirkung. Das Glossar zum Fokuszustand behandelt den von WCAG geforderten Focus-visible-Indikator. Im Dark Mode muss der Fokusring oft 10 bis 20 Prozent heller oder dicker sein als sein Light-Mode-Zwilling. Die Barrierefreiheitsanforderung bleibt gleich, aber die visuelle Umsetzung muss sich anpassen, um sie weiterhin zu erfüllen.

---

Token-Struktur für zwei Themes

Ein Dark Mode, der in CSS-Overrides lebt, ist ein Dark Mode, der driftet. Jede neue Komponente handhabt Theming anders, und binnen sechs Monaten hat das Produkt drei Theming-Muster, die miteinander streiten.

Die richtige Struktur sind semantische Tokens. Das Glossar zum Design Token behandelt das Grundkonzept. Dark Mode ist der Anwendungsfall, der beweist, dass Tokens nicht optional sind.

Drei Token-Ebenen:

Ebene eins: Primitive. Rohe Farbwerte. color.neutral.900, color.brand.500. Keine Meinung, kein Kontext.

Ebene zwei: Semantik. Rollenbasierte Namen. color.surface.base, color.surface.raised, color.text.primary, color.text.muted, color.border.default. Jedes semantische Token verweist auf ein Primitiv.

Ebene drei: Theme. Zwei vollständige Maps, eine pro Theme, die entscheiden, auf welches Primitiv jedes semantische Token aufgelöst wird. Das helle Theme mappt color.surface.base auf color.neutral.50. Das dunkle Theme mappt color.surface.base auf color.neutral.900.

Komponenten konsumieren ausschließlich semantische Tokens. Sie referenzieren nie direkt ein Primitiv und codieren nie ein Theme fest ein. Der Theme-Umschalter ändert die Map, die Komponenten zeichnen sich neu, und nichts bricht. Das ist das einzige Muster, das über ein Team von zwei Designern hinaus skaliert.

Systemeinstellungen respektieren

Der Browser stellt prefers-color-scheme über CSS Media Queries bereit. Das Produkt muss es respektieren. Die Standarderfahrung für Nutzer mit aktiviertem Dark Mode auf OS-Ebene ist das dunkle Theme, Punkt. Ein Schalter in der App ist eine Verfeinerung, kein Ersatz.

Drei Regeln für eine korrekte Umsetzung:

Beim ersten Laden der Systemeinstellung folgen. Überschreibe niemals die OS-Wahl des Nutzers mit einem hellen Theme, nur weil der Designer die hellen Mockups bevorzugt.

Die Wahl des Nutzers in der App speichern. Wenn der Nutzer in der App auf Dunkel umschaltet, übersteht diese Wahl Neuladen und schlägt die Systemeinstellung, bis er sie zurücksetzt.

Eine Option „System folgen“ anbieten. Nutzer, die wollen, dass die OS-Einstellung bestimmt, brauchen einen Weg zurück zu diesem Verhalten. Der Dreizustands-Schalter (hell, dunkel, System) ist das erwartete Muster und sollte standardmäßig ausgeliefert werden.

Dark Mode testen

Dark-Mode-Bugs verstecken sich. Eine Komponente sieht in der Designdatei gut aus, besteht das Code-Review im hellen Theme und wird mit einem Kontrastfehler ausgeliefert, der erst auftaucht, wenn ein Nutzer sie nachts öffnet. Die Testdisziplin ist rigoros.

Der Helligkeitstest. Öffne das Produkt auf einem Laptop bei 30 Prozent Helligkeit in einem dunklen Raum. Alles, was verschwindet, verschmiert oder unangenehm glüht, wird als Bug erfasst. So findest du Rahmen, die zu dezent sind, Text, der zu hell ist, und Akzentfarben, die noch zu gesättigt sind.

Das Kontrast-Audit. Jede Theme-Änderung löst eine vollständige Kontrastprüfung über alle semantischen Paarungen aus. Tools wie axe, WAVE oder der in Figma integrierte Kontrastprüfer fangen die Regressionen ab, die eine visuelle Prüfung übersieht.

Der Screenshot-Diff. Screenshots von Light und Dark Mode werden für jeden Schlüsselscreen bei jedem Release erfasst. Visuelle Diffs decken unbeabsichtigten Theme-Drift auf, bevor es ein Nutzer tut.

Der Test auf echten Geräten. OLED-Smartphones stellen dunkle Flächen anders dar als LCD-Laptops. Ein Dark Mode, der auf einem MacBook perfekt aussieht, zeigt auf einem iPhone oft Banding oder harte Übergänge. Teste auf echten Smartphones, nicht nur im Geräte-Emulator des Browsers.

---

Häufige Dark-Mode-Fehler

Drei Muster verursachen die meisten Qualitätsprobleme beim Ausliefern von Dark Mode. Alle drei lassen sich mit der obigen Token-Struktur vermeiden.

Die halb invertierte UI. Hauptflächen sind auf Dunkel gedreht, aber vergrabene Komponenten (Modals, Tooltips, Marketingseiten, alte Admin-Screens) werden weiterhin im Light Mode ausgeliefert. Der Nutzer schaltet auf Dunkel, und das halbe Produkt springt beim Klick zurück auf Weiß. Die Lösung ist ein Audit jeder Fläche im Produkt, mit einer Checkliste, die die Theme-Abdeckung pro Screen verfolgt.

Der gebrochene Markenmoment. Marketing-Landingpages bleiben hell, während das Produkt dunkel wird, oder umgekehrt. Die Markenidentität zersplittert entlang der Reise des Nutzers, und das Produkt fühlt sich an wie zwei Unternehmen. Die Lösung ist, vorab zu klären, ob die Marketing-Seite Dark Mode bekommt. Beide Entscheidungen sind legitim, aber beide Oberflächen müssen zusammenpassen.

Die Barrierefreiheits-Regression. Der Light Mode wird WCAG-AA-konform ausgeliefert, der Dark Mode verfehlt es an drei Stellen, und niemand prüft es bis zu einem Compliance-Audit. Die Lösung ist die semantische Token-Ebene plus automatisierte Kontrastprüfung in der CI. Jeder PR läuft durch einen Kontrasttest. Fehler blockieren den Merge.

Wenn du ein Team willst, das Dark Mode als erstklassige Systementscheidung ausliefert, von Tokens bis zum Testing, beauftrage Brainy. Dark Mode ist selten das schwere Problem. Das schwere Problem ist, das Paar ohne Drift auszuliefern.

FAQ

Ist reines Schwarz der beste Hintergrund für Dark Mode?

Nein. Reines Schwarz (#000000) erzeugt harten Kontrast mit weißem Text und entfernt die visuellen Tiefenhinweise, die das Auge braucht, um Elevation zu lesen. Nimm ein dunkles Grau mit einem dezenten Markenton, meist im Bereich von #0B0B10 bis #121218. Tiefe in einer dunklen Oberfläche entsteht durch Flächen, die zum Nutzer hin aufsteigen, und das braucht eine Startfläche, die nicht reines Schwarz ist.

Wie gelingt Elevation im Dark Mode ohne Schatten?

Elevation im Dark Mode entsteht durch Helligkeit, nicht durch Schatten. Jede erhöhte Fläche ist etwas heller als die darunter und erzeugt so einen Verlauf von Flächen, die sich zum Nutzer hin stapeln. Ein dezenter dunkler Schatten und ein sehr schwaches Highlight an der Oberkante können den Effekt verstärken, aber der primäre Hinweis ist die Flächenfarbe selbst.

Sollte Dark Mode einfach die Farben des hellen Themes invertieren?

Nein. Invertieren sättigt Akzentfarben auf unangenehme Werte, drückt gedämpften Text unter die WCAG-Kontrastschwellen und zerstört das Elevation-Modell, das auf Schatten beruht. Dark Mode ist ein zweites Theme, das von Grund auf für dasselbe Komponentenset gestaltet und dann über gemeinsame semantische Tokens abgeglichen wird.

Wie gehe ich mit Bildern und Fotos im Dark Mode um?

Bilder, die auf weißem Hintergrund aufgenommen wurden, brechen die Kontinuität des Themes. Optionen: parallele Assets für den Dark Mode ausliefern, bei aktivem Dark Mode einen dezenten hellen Container um jedes Bild legen oder Filter sorgfältig einsetzen. Illustrationen brauchen oft eine eigene Dark-Mode-Variante. Das ist der teuerste Teil von Dark Mode und der am häufigsten übersprungene.

Wie strukturiere ich Tokens für die Unterstützung zweier Themes?

Drei Ebenen. Primitive (rohe Farbwerte), semantische Tokens (rollenbasierte Namen wie color.surface.base) und Theme-Maps (eine pro Theme, die jedes semantische Token auf ein Primitiv auflösen). Komponenten konsumieren nur semantische Tokens, sodass der Theme-Umschalter die Map ändert und nichts bricht. Dieses Muster lässt Dark Mode über ein kleines Team hinaus skalieren.

Verbessert Dark Mode die Barrierefreiheit?

Für Nutzer mit Lichtempfindlichkeit, Migräne oder Photophobie ja. Für Nutzer, die Text mit hohem Kontrast oder bestimmte Farbwahrnehmungen brauchen, nicht unbedingt. Dark Mode ist eine Barrierefreiheitsoption, kein automatischer Barrierefreiheitsgewinn. Ein korrekt umgesetztes dunkles Theme erfüllt die WCAG-Kontrastregeln mit derselben Strenge wie das helle Theme, ein schlecht umgesetztes verfehlt sie.

Dark Mode ist eine Systementscheidung, kein Schalter

Ein Produkt mit einem Theme und einem kaputten zweiten Theme ist schlechter als ein Produkt mit einem sauberen Theme. Dark Mode wird entweder als voll gestaltetes, voll getestetes, voll tokenisiertes Pendant zum hellen Theme ausgeliefert, oder er wird nicht ausgeliefert.

Baue zuerst die Token-Ebene. Rechne danach die Kontraste durch. Gestalte das dunkle Theme gegen jede Elevation, jede Komponente, jeden Bildcontainer. Teste bei niedriger Helligkeit auf echten Geräten. Liefere beide Themes zusammen aus oder keines.

Wenn du Marken-, Web- und UI-Arbeit willst, die Dark Mode als Verpflichtung auf Systemebene behandelt statt als Präferenz-Schalter, beauftrage Brainy. Zwei Themes, ein Produkt, eine kohärente Designentscheidung.

Weiterlesen

• Leitfaden zu Designsystemen
• Barrierefreier Farbkontrast
• Checkliste für Web-Barrierefreiheit
• Farbtheorie für Designer
• Visuelles Hierarchie-Design