Dark-Mode-Farbsysteme: So baust du eine Palette, die um 2 Uhr nachts funktioniert
Ein praxisnaher Leitfaden zu Dark-Mode-Farbsystemen. Das Modell der Oberflächen-Elevation, die Entsättigungsregel, Akzentkalibrierung und die sieben Marken, die 2026 die saubersten Dark-Mode-Paletten ausliefern.
Dark-Mode-Farbsysteme: So baust du eine Palette, die um 2 Uhr nachts funktioniert
Ein Dark Mode ist ein paralleles System, und die Produkte, die für den Dunkelmodus einfach einen Schalter umlegen, sehen kaputt aus, sobald das Licht ausgeht.
Das ist der ganze Artikel in einem Satz. Der Grund, warum die meisten Dark Modes scheitern, ist konkreter: Designer greifen zu „Light-Palette invertieren“ und landen bei grauen Flachlandschaften in Grau auf Grau oder bei elektrischem Korallrot, das die Netzhaut versengt. Die Lösung ist architektonisch, nicht kosmetisch. Baue ein paralleles System mit eigenem Elevation-Modell, eigenen Entsättigungsregeln und eigener Akzentkalibrierung, und das Ergebnis wirkt gewollt, weil es gewollt ist.
Ein Dark Mode ist ein paralleles System, keine Invertierung
Deine helle Palette hat Tokens für Hintergrund, Oberfläche, Rahmen, Text und Akzent. Deine dunkle Palette braucht dieselben Tokens, und die Werte sind nicht das Inverse der hellen Werte. Chroma verhält sich bei niedriger Helligkeit anders. Farbtonverschiebungen passieren an der Wahrnehmungsgrenze. Was im Light Mode bei L 0.62 als sauberes Korallrot durchgeht, blüht im Dark Mode bei L 0.72 auf einer fast schwarzen Oberfläche zu vibrierendem Neon auf.
Die Teams, die saubere Dark Modes ausliefern, fassen keinen simplen Toggle an. Sie entwerfen eine zweite Palette, mappen sie auf dieselbe semantische Token-Ebene und verbinden beide über einen Mode-Switch an der Theme-Wurzel. Das ist mehr Arbeit. Es ist der einzige Ansatz, der dich nicht blamiert.
Das Modell der Oberflächen-Elevation
Hintergrund. Oberfläche. Erhöhte Oberfläche. Overlay-Oberfläche. Jede funktionierende Dark-Mode-Design-UI hat diese vier Stufen, und das Auslassen der dritten Stufe ist der häufigste Grund, warum dunkle UIs flach wirken.
Im Light Mode ist Elevation offensichtlich: Weiße Karten liegen auf grauen Hintergründen, Schatten sind billig, Tiefe gibt es geschenkt. Im Dark Mode verschwinden Schatten auf dunklen Oberflächen. Elevation muss in der Helligkeit der Oberfläche selbst leben. Jede Stufe ist ein kleiner, bewusster Schritt nach oben in der Helligkeit, kein Sprung.
Die vier Stufen sind keine ästhetischen Entscheidungen. Sie sind tragende Struktur. Jede Komponente in deinem System sitzt auf einer dieser Stufen, und die Lesbarkeit jedes Paars aus Text und Oberfläche hängt davon ab, wo im Stapel du es platzierst.
Der Hintergrund legt den Boden fest
Der Hintergrund ist die tiefste Stufe. Die Regel: Nimm nie reines Schwarz (oklch(0 0 0)) bei voller Sättigung. Nimm ein leicht getöntes Fast-Schwarz bei etwa 8 bis 10 Prozent Helligkeit. Die Tönung ist fast immer warm, weil kühle Schwarztöne billiger und kälter wirken, als es das Produkt verdient.
Ein Wert wie oklch(0.10 0.012 30) ergibt ein dunkles, warmes Anthrazit, das auf jedem Display als „Schwarz“ durchgeht, aber das tote Vakuumgefühl von reinem Schwarz vermeidet. Die 0.012 Chroma und der Farbtonwinkel von 30 Grad (eine leichte Wärme) reichen. Mehr, und es wirkt schlammig. Weniger, und es wirkt leblos.
Die Oberfläche trägt den Inhalt
Die Oberfläche ist die Stufe, auf der die meisten Inhalte sitzen, leicht vom Hintergrund abgehoben. Der Helligkeitsschritt vom Hintergrund zur Oberfläche beträgt typischerweise 3 bis 5 Punkte in OKLCH. Diese Lücke ist das erste Signal, das das Auge liest: Hier lebt der Inhalt, der Hintergrund liegt dahinter.
oklch(0.14 0.010 30) gegen oklch(0.10 0.012 30) reicht als visuelle Trennung ohne Rahmen oder Schatten. Die Chroma sinkt leicht, weil sie bei steigender Helligkeit dunkler Oberflächen zurückgenommen werden muss, damit nichts schlammig in den Hintergrund blutet. Das ist beim Rendern subtil und völlig falsch, wenn du es überspringst.
Erhöhte Oberfläche und Overlay-Oberfläche
Erhöhte Oberflächen tragen Karten und Panels. Overlay-Oberflächen tragen Modals und Sheets. Die Helligkeitsfolge geht weiter: erhöhte Oberfläche bei etwa oklch(0.18 0.008 30), Overlay-Oberfläche bei oklch(0.22 0.007 30). Die Chroma sinkt mit jedem Schritt, denn weiter oben im Stapel heißt näher am Betrachter, und diese Oberflächen müssen sauber wirken.
Der Grund, warum die meisten dunklen UIs zu flachem grauem Brei zusammenfallen, ist, dass Designer zwei Stufen nutzen: Hintergrund und Oberfläche. Karten liegen auf dem Hintergrund, Text liegt auf der Oberfläche, und alles wirkt in derselben Tiefe. Füge die dritte und vierte Stufe hinzu, und die UI gewinnt sofort an Lesbarkeit, ohne einen einzigen Schlagschatten.
Die Entsättigungsregel
Gesättigte Farben, die bei Licht funktionieren, brennen nachts. Die Regel: Entsättige Akzente um 15 bis 25 Prozent und senke die Chroma bei Text und Rahmen noch stärker. Es geht nicht darum, die Marke zu dimmen. Es geht darum, wie das Auge Chroma bei wenig Umgebungslicht verarbeitet.
Bei viel Umgebungslicht (das Büro am Mittag) wirkt kräftige Chroma lebendig. Bei wenig Umgebungslicht (der Schreibtisch um Mitternacht) wirkt dieselbe Chroma aggressiv, strahlend überzeichnet und körperlich unangenehm. Die Lösung ist nicht, Farbe zu fürchten. Sie ist, sie zu kalibrieren. Die Marke bleibt erkennbar. Das Produkt tut nicht mehr weh.
Warum reinweißer Text falsch ist
Reines Weiß auf Fast-Schwarz ist kein hoher Kontrast, es ist zu viel Kontrast. Der Halo-Effekt, bei dem heller Text in die dunkle Umgebung zu bluten scheint, ist ein dokumentiertes optisches Phänomen, das dunkle UIs schwerer lesbar macht, nicht leichter.
Der richtige Wert für Primärtext im Dark Mode liegt bei etwa 90 bis 95 Prozent Helligkeit mit einem Hauch warmer Tönung. oklch(0.93 0.005 60) wirkt wie „Weiß“, haloet aber nicht. Sekundärtext sinkt auf oklch(0.70 0.010 60), in Fließtextgröße noch gut lesbar und visuell zurückhaltend gegenüber dem Primärtext. Das Off-White ist der Wert, den Designer am häufigsten falsch machen, weil er sich wie ein Kompromiss anfühlt und tatsächlich der korrekte Wert ist.
Akzentkalibrierung hält die Marke erkennbar
Markenakzente müssen im Dark Mode funktionieren, ohne ihre Identität zu verlieren. Die Kalibrierung ist eine Helligkeitsanhebung plus eine Chroma-Senkung, keine Farbtonverschiebung. Wenn der Akzent im Light Mode oklch(0.62 0.22 25) ist, ist der Akzent im Dark Mode oklch(0.72 0.17 25). Gleicher Farbton. Höhere Helligkeit, damit er sich von dunklen Oberflächen abhebt. Niedrigere Chroma, damit er nicht haloet.
Der Fehler ist, den Dark Mode als Ort zu behandeln, an dem Akzente gedimmt werden. Dimmen tötet die Markenwiedererkennung. Helligkeit anheben und Chroma senken bewahrt das Gefühl der Markenfarbpalette und verhindert zugleich visuelles Brennen. Der Nutzer bemerkt die Anpassung nicht. Er bemerkt, dass das Produkt gut aussieht.
Der Kontrast-Check, den WCAG verpasst
WCAG-2.1-Kontrastverhältnisse lassen eine Menge hässlicher dunkler UI durch. Ein Verhältnis von 4.5:1 zwischen einer dunklen Oberfläche und gedämpftem grauem Text kann WCAG bestehen und trotzdem unter realen Umgebungsbedingungen wirklich schwer lesbar sein. Der zweite Durchgang ist APCA, das Helligkeitswahrnehmung genauer modelliert, besonders bei der Unterscheidung von hell auf dunkel.
Nach APCA kommt der Augentest. Shimmer ist das Flimmern, das du siehst, wenn zwei Farben mit ähnlicher Helligkeit, aber unterschiedlicher Chroma nebeneinander stehen. Halo ist das Ausbluten heller Elemente in dunkle Umgebung. Bloom ist das wahrgenommene Glühen bei gesättigten Akzenten. Ist eines davon vorhanden, fällt das Paar durch, egal wie das Verhältnis aussieht. Korrigiere die Werte, nicht das Verhältnis. Für einen tieferen Blick auf die Mechanik von barrierefreiem Farbkontrast deckt die vollständige Methodik Randfälle ab, die ein Audit im Light Mode nicht zutage fördert.
Sieben Marken mit sauberen dunklen Paletten
Linear, Notion, Vercel, Stripe, GitHub, Arc und Raycast lösen den Dark Mode jeweils anders. Die Muster, die sie teilen, sind die, die sich zu klauen lohnen.
| Marke | Oberflächenmodell | Akzentstrategie | Was sie richtig machen |
|---|---|---|---|
| Linear | Echtes Vier-Stufen-Modell, enge Schritte | Lila angehoben, Chroma ~0.15 | Schritte so eng, dass die Tiefe nahtlos wirkt |
| Notion | Drei Stufen mit Overlay | Minimaler Akzenteinsatz im Dark Mode | Fast keine Chroma, nur Tiefe |
| Vercel | Binär (Hintergrund + erhöht) | Nur Weiß | Brutal einfach; funktioniert, weil es konsequent ist |
| Stripe | Vier Stufen, warme Tönung | Blau kalibriert, nicht reduziert | Dichte Daten lesen sich auf jeder Stufe sauber |
| GitHub | Drei benannte Themes (dark, dimmed, high-contrast) | Blaugrün, entsättigt | „Dimmed“ ist der richtige Standard |
| Arc | Individuelle Tönung pro Space | Vollständig nutzerdefinierter Farbton | Elevation durch Farbtonverschiebung, nicht durch Helligkeit |
| Raycast | Zwei Stufen mit starkem Blur | Oranger Akzent, aggressiv angehoben | Blur erzeugt angedeutete Elevation |
Linear ist die Referenzimplementierung. Die Oberflächenschritte sind eng genug, dass die UI wie ein einziges dunkles Feld mit echter Tiefe wirkt. Der lila Akzent ist als Linears Lila erkennbar, ohne je zu brennen. Die typografische Hierarchie stützt sich auf Helligkeitsstufen in den Text-Tokens, nicht nur auf die Größe.
Vercel beweist, dass das binäre Modell funktionieren kann, wenn man vollständig dazu steht. Keine dritte Oberfläche. Keine grauen Zustände. Alles ist entweder tiefer Hintergrund oder leicht erhöhte Oberfläche, und die monochrome Konsequenz lässt es wie eine Designentscheidung wirken statt wie eine Einschränkung. Die meisten Teams kriegen das nicht hin, weil sie Statusfarben, Illustrationen und Markenmomente haben, die Elevation brauchen.
GitHubs „Dimmed“-Option ist die richtige Erkenntnis, auf den falschen Umfang angewendet. Sie haben sie als Theme-Variante gebaut, aber die eigentliche Lehre ist, dass eine warm getönte dunkle Oberfläche für längeres Lesen angenehmer ist als der kühlere Standard. Jeder Dark Mode sollte standardmäßig warm laufen.
Du willst einen Dark Mode, der um 2 Uhr nachts gewollt aussieht statt mittags invertiert? Brainy entwirft parallele dunkle Farbsysteme mit Elevation-Modell, Akzentkalibrierung und der OKLCH-Token-Map, bereit für Figma und CSS. Brainy beauftragen.
Die funktionierende Dark-Mode-Token-Map
Die folgende Token-Map liefert einen echten Dark Mode in OKLCH-Farb-Koordinaten. Primitive sind die Rohwerte. Semantiken sind die Rollen. Lege Primitive als Rohwerte in eine Figma-Variablenkollektion. Mappe Semantiken als Aliase auf Primitive. Diese Zwei-Ebenen-Architektur ist das ganze Token-System.
| Token | Rolle | OKLCH-Wert | Hex ca. |
|---|---|---|---|
--color-bg | Hintergrundboden | oklch(0.10 0.012 30) | #191512 |
--color-surface | Standard-Inhaltsoberfläche | oklch(0.14 0.010 30) | #221e1a |
--color-surface-elevated | Karten, Panels | oklch(0.18 0.008 30) | #2c2723 |
--color-surface-overlay | Modals, Menüs, Sheets | oklch(0.22 0.007 30) | #35302c |
--color-text-primary | Fließtext, Überschriften | oklch(0.93 0.005 60) | #edeae5 |
--color-text-secondary | Bildunterschriften, Labels, Meta | oklch(0.70 0.010 60) | #b0a89e |
--color-text-disabled | Deaktivierte Zustände | oklch(0.45 0.005 60) | #6e6860 |
--color-border-subtle | Trenner, Haarlinien | oklch(0.22 0.008 30) | #36302b |
--color-border-default | Eingaberahmen, Kartenrahmen | oklch(0.28 0.010 30) | #433d37 |
--color-accent | Primäre CTA, aktive Zustände | oklch(0.72 0.17 25) | #e0816a |
--color-accent-muted | Hover, sekundärer Akzent | oklch(0.65 0.12 25) | #c27060 |
--color-accent-subtle | Getönter Hintergrund hinter Akzentelementen | oklch(0.16 0.04 25) | #2a1e1a |
Der Farbton liegt durchgehend bei 25 bis 30 Grad (warmes Korallterritorium). Das System hält zusammen, weil die Temperatur vom Boden bis zur Decke konsistent ist. Setzt du den Farbton auf 250 Grad, bekommst du eine Linear-ähnliche Palette. Bei 200 Grad bekommst du eine Vercel-nahe Palette. Die Struktur ändert sich nicht. Nur der Farbton.
Für die Implementierung wird die gesamte Tabelle auf CSS Custom Properties an :root[data-theme="dark"] gemappt. In Figma ist jede Zeile eine Variable in einer „Dark“-Mode-Kollektion. Diese Zwei-Kollektionen-Architektur macht ein Designsystem über alle Oberflächen hinweg skalierbar.
Mode-Switching: die Implementierung, die nicht flackert
Umschalten zwischen Modi ohne Aufblitzen des falschen Themes gelingt, indem du das Farbschema am html-Element setzt, bevor irgendein JavaScript läuft. Jeder andere Ansatz ist in mindestens einem Randfall falsch.
Das Muster: Lies localStorage nach einer gespeicherten Präferenz in einem blockierenden Inline-<script>-Tag im <head>. Wende data-theme="dark" oder data-theme="light" synchron auf das html-Element an, bevor das CSS, das auf Custom Properties verweist, gerendert wird. Kein React. Kein useEffect. Kein Flackern.
<script>
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');
</script>
Dieses Script blockiert mit Absicht. Es läuft vor dem Rendern. Der Flash of Unstyled Content entsteht, wenn das Theme nach dem ersten Paint in JavaScript angewendet wird, und dieses eine blockierende Script beseitigt ihn vollständig.
Systempräferenz, Standard und Override
Der Standard sollte der OS-Präferenz folgen. Der Nutzer-Override sollte in localStorage persistiert werden. Der Toggle sollte drei Zustände anbieten: System, Hell und Dunkel.
Ein Zwei-Zustände-Toggle ist ein Designfehler. Der Nutzer, der sein OS auf dunkel stellt und will, dass die App folgt, will keinen zweiten Schalter verwalten. Der Toggle braucht einen „System“-Zustand, der den gespeicherten Override löscht und die OS-Präferenz führen lässt. Die meisten Apps bauen zwei Zustände und bekommen dann jedes Mal ein Support-Ticket, wenn jemand sein OS-Theme ändert und sich wundert, warum die App nicht gefolgt ist.
FAQ
Schadet der Einsatz von Akzentfarben im Dark Mode der OLED-Akkulaufzeit?
Akzentfarben decken in einer typischen UI nur eine kleine Fläche ab. Die Akkuersparnis durch den Dark Mode auf OLED stammt fast vollständig von dunklen Flächen. Ein korallroter CTA-Button auf dunklem Hintergrund verändert den Akkuverbrauch nicht nennenswert. Reine schwarze Hintergründe zählen. Gesättigte Vollbild-Illustrationen zählen. Ein Button nicht.
Kann ich meine Markenfarbe aus dem Light Mode direkt als Akzent im Dark Mode verwenden?
Nicht ohne Kalibrierung. Liegt deine Markenfarbe im Light Mode in OKLCH bei L 0.55 bis 0.65, wird sie direkt auf einer dunklen Oberfläche entweder zu schwach wirken (zu dunkel, um zu knallen) oder haloen (zu kräftig gegen dunkles Umgebungslicht). Hebe die Helligkeit um 8 bis 12 Punkte an. Senke die Chroma um 20 bis 30 Prozent. Behalte den Farbton. Das ist der kalibrierte Akzent für den Dark Mode.
Was ist der minimal brauchbare Dark Mode für ein System, das noch keinen hat?
Hintergrund, Oberfläche, erhöhte Oberfläche, Primärtext, Sekundärtext, Akzent. Sechs Tokens. Es ist nicht vollständig, aber es ist ein System. Jede Komponente lässt sich auf einen dieser sechs Werte mappen, das Elevation-Modell steht für die Erweiterung bereit, und du kannst es ausliefern, ohne dich zu blamieren. Fang dort an, nicht mit hundert Tokens und ohne Struktur.
Ist ein automatisch generierter Dark Mode jemals akzeptabel?
Für Prototypen, interne Tools und Produkte mit einem aktiven Designer ist eine automatische Invertierung mit Sättigungsanpassungen als Ausgangspunkt akzeptabel. Als ausgelieferter Dark Mode für ein Produkt mit Markenstandards und echten Nutzern: nein. Automatisierte Dark Modes scheitern an Akzentfarben, an Illustrationen und an Komponentenzuständen. Sie sind eine Startskizze, kein fertiges System.
Macht OKLCH den Dark Mode leichter zu bauen?
Dramatisch. OKLCHs wahrnehmungsgleichmäßige Helligkeitsachse sorgt dafür, dass sich Helligkeitsschritte zwischen Elevation-Stufen über alle Farbtöne hinweg wie erwartet verhalten. In HSL sieht ein 5-Punkte-Schritt bei Orange anders aus als ein 5-Punkte-Schritt bei Blau. In OKLCH nicht. Wer das Elevation-Modell in OKLCH baut, bekommt Schritte, die sich unabhängig vom Akzentfarbton konsistent anfühlen. Das vollständige Plädoyer für OKLCH-Farbe erklärt die Mathematik im Detail.
Sollten sich semantische Tokens zwischen Hell und Dunkel unterscheiden oder nur die Primitive?
Primitive unterscheiden sich. Semantiken bleiben gleich. --color-surface bedeutet in beiden Modi „die Standard-Inhaltsoberfläche“. Das Primitiv, auf das es zeigt, ist im Dark Mode ein anderes. Das ist der Sinn der Zwei-Ebenen-Architektur. Komponenten referenzieren Semantiken. Semantiken referenzieren Primitive. Der Mode-Switch weist die Primitive neu zu. Komponenten aktualisieren sich automatisch und korrekt.
Die Verschiebung, die Dark-Mode-Systeme wirklich freisetzen
Ein echter Dark Mode ist eine parallele Designoberfläche. Kein Nachgedanke. Kein Einstellungs-Toggle. Eine zweite Oberfläche mit eigener Struktur, eigenen Beschränkungen und eigenen handwerklichen Entscheidungen. Die Teams, die ihn so behandeln, liefern Produkte aus, die um 2 Uhr nachts gewollt aussehen. Die Teams, die einen Schalter umlegen, liefern Produkte aus, die aussehen, als hätte jemand vergessen, sie fertigzustellen.
Das Elevation-Modell ist das Fundament. Die Entsättigungsregel und die Akzentkalibrierung sind die Handwerksschicht. Die OKLCH-Token-Map ist die Implementierung. Der Drei-Zustände-Toggle mit flackerfreiem Mode-Switching ist die Auslieferungsbedingung. Jedes Teil hängt zusammen. Nichts davon ist optional, wenn das Ergebnis gut werden soll.
Baue das parallele System. Liefere die Map aus. Der Unterschied zeigt sich.
Du willst einen Dark Mode, der um 2 Uhr nachts gewollt aussieht statt mittags invertiert? Brainy entwirft parallele dunkle Farbsysteme mit Elevation-Modell, Akzentkalibrierung und der OKLCH-Token-Map, bereit für Figma und CSS. Brainy beauftragen.
Jetzt wird in drafts/dark-mode-color-systems.md gespeichert.
Want a dark mode that looks intentional at 2 a.m. instead of inverted at noon? Brainy designs parallel dark color systems with the elevation model, accent calibration, and the OKLCH token map ready to drop into Figma and CSS.
Get Started
