Dark Mode ist keine Invertierung

Der schnellste Dark Mode, der je ausgeliefert wurde, ist eine Zeile CSS: filter: invert(1) hue-rotate(180deg) auf dem Wurzelelement. Ein Team unter Zeitdruck probiert es aus, und der erste Screenshot sieht fast plausibel aus — helle Flächen sind dunkel geworden, dunkler Text ist hell geworden, das Layout ist intakt. Dann benutzt es jemand. Fotos erscheinen als Negative, bis jedes einzelne gegen-invertiert wird. Das Markenblau kommt als eine flaue Annäherung an sich selbst zurück. Rahmen, die früher als ruhige, eingelassene Linien gelesen wurden, wirken jetzt erhaben, ruhende Buttons sehen gedrückt aus, und nichts, worauf man zeigen könnte, ist genau genommen kaputt — der ganze Bildschirm ist einfach auf subtile, gleichmäßige Weise falsch.

Dark Mode ist nicht das invertierte helle Theme — es ist eine zweite Palette, abgeleitet aus denselben Ausgangsfarben. Invertierung verwendet die Werte des hellen Themes an gespiegelten Positionen wieder und scheitert auf drei Arten gleichzeitig: Rollenbeziehungen kippen pauschal um, die Elevation verliert ihr Signal, und die Farbe laugt auf dunklem Grund aus. Ableitung führt stattdessen die Konstruktion der Palette für einen dunklen Kontext neu aus — mit einer eigenen Helligkeitskurve, die aus einem tiefen Boden ansteigt, mit Chroma, das angehoben wird, um die perzeptive Dämpfung auszugleichen, und mit jeder Rolle neu auf Kontrast geprüft. Diese Unterscheidung liegt allem in unserem Dark-Mode-Leitfaden zugrunde; in diesem Artikel geht es darum, warum der naheliegende Ansatz scheitert und was der funktionierende stattdessen tut.

Warum scheitert es, die helle Palette zu invertieren?

Invertierung gibt es in zwei Ausprägungen. Die grobe Ausprägung ist der CSS-Filter: Das Invertieren der RGB-Kanäle verwandelt jede Farbe in ihre Komplementärfarbe — deshalb braucht der Hack einen hue-rotate(180deg)-Nachschlag — und selbst dann kommen die Farbtöne nur ungefähr zurück, und jedes Bild muss gerettet werden. Die disziplinierte Ausprägung behält Farbton und Chroma bei und spiegelt nur die Helligkeit, und sie verdient es, ernst genommen zu werden, weil sie aus Gründen scheitert, die etwas lehren.

Die Rollenlogik bricht. In einem hellen Theme sitzt ein dezenter Rahmen etwas dunkler als die Fläche, die er begrenzt, und das Auge liest das als gezeichnete Linie — eine Vertiefung. Spiegle die Helligkeit, und der Rahmen ist nun etwas heller als seine Fläche, was als erhaben gelesen wird: ein Grat, der Licht einfängt, statt einer Rille, die Schatten hält. Multipliziere das über jede dazwischenliegende Beziehung — Trennlinien, Tabellenstreifen, Eingabefeld-Konturen, Hover-Tönungen, deaktivierter Text — und das Theme füllt sich mit kleinen physikalischen Lügen. Das tiefere Problem ist, dass manche Beziehungen umkippen sollten (dunkler Text auf Hell wird zu Recht zu hellem Text auf Dunkel), während andere es nicht dürfen, und die Invertierung kann den Unterschied nicht erkennen. Sie kippt alle um, unterschiedslos.

Die Elevation kippt falsch. Der Light Mode signalisiert eine angehobene Fläche mit einem Schatten darunter. Auf dunklem Grund ist dieses Signal kaum wahrnehmbar — es gibt fast keinen dunkleren Ort, an den ein Schatten gehen könnte — also signalisieren dunkle Themes Höhe andersherum: Flächen werden heller, je höher sie steigen — die Konvention, die in Materials Dark-Theme-Leitfaden festgehalten ist. Invertierung tut nichts, um das zu erzeugen. Die Schatten überleben die Spiegelung, sinnlos, und die Flächenbeziehungen landen dort, wo die Arithmetik sie hinsetzt, statt dort, wo die Elevations-Logik des Dark Mode sie braucht.

Die Farbe laugt aus. Wahrgenommene Farbigkeit wird relativ zur Umgebung beurteilt, und derselbe Chroma-Wert wirkt gegen Fast-Schwarz merklich matter als gegen Weiß. Eine invertierte Palette überträgt die Chroma-Werte des hellen Themes unverändert, sodass die Markenfarbe ausgewaschen ankommt und jedes Badge und jeder Akzent müde mit ihr ankommt. Abgeleitete dunkle Paletten wirken dem entgegen, indem sie das Chroma anheben — in Scale Composer um rund 20 % — während die Invertierung nicht weiß, dass irgendetwas entgegengewirkt werden muss.

Was bedeutet es, eine dunkle Palette abzuleiten?

Ableitung behält die Eingaben bei und macht die Konstruktion neu. Die Ausgangsfarben — die Markenfarben, aus denen die Palette gewachsen ist — bleiben gleich, sodass das dunkle Theme erkennbar dieselbe Marke ist. Alles Nachgelagerte wird für den dunklen Kontext frisch berechnet.

Die Helligkeitskurve ist die größte Veränderung. Eine Light-Mode-Farbrampe läuft von nahezu Weiß hinunter zu einer tiefen Stufe — L ≈ 0,97 bis ≈ 0,25 —, weil helle Oberflächen viele brauchbare Tönungen und ein moderates dunkles Ende benötigen. Die abgeleitete dunkle Farbrampe spiegelt das nicht. Sie läuft ihre eigene Kurve und steigt aus einem tiefen Boden wieder auf: Die Stufen der Hintergrund-Klasse liegen bei etwa L ≈ 0,13–0,19, und die Rampe klettert am Ende der Text-Klasse auf ≈ 0,95. Das Chroma wird obendrauf neu geplant — um etwa 20 % gegenüber den hellen Werten angehoben, begrenzt durch das, was der Farbraum (Gamut) bei jeder Helligkeit zulässt. Und die semantischen Rollen werden neu abgeleitet, statt nur neu zugewiesen: Text-, Rahmen- und Zustandsrollen werden gegen die neuen Flächen gewählt, wobei die WCAG-Untergrenzen und APCA auf dem dunklen Grund geprüft werden, denn eine Paarung, die auf Weiß bestanden hat, beweist nichts über Fast-Schwarz. Der Token-Export führt dann die hellen und dunklen Rollen-Sätze nebeneinander — einen Abschnitt semantic und einen semantic-dark —, sodass ein Theme-Wechsel aufgelöste Werte tauscht, ohne zur Laufzeit neu zu berechnen.

Wo weichen Invertierung und Ableitung in Zahlen voneinander ab?

Nimm die blaue Farbrampe mit #2563eb als Ausgangsfarbe — oklch(0.546 0.215 262.9). Die linke Spalte ist die generierte helle Farbrampe; die mittlere ist die disziplinierte Spiegelung (L → 1 − L, Chroma beibehalten); die rechte ist die abgeleitete dunkle Farbrampe.

Lies zuerst die beiden Enden. Die helle Farbrampe spannt 0,97 → 0,25, ihre Spiegelung spannt also 0,03 → 0,75 — ein Bereich, der für ein helles Theme gebaut ist, umgeklappt, kein Bereich, der für ein dunkles gebaut ist. Der invertierte Boden bei L 0,03 liegt weit unter der Zone von ≈ 0,13–0,18, in der dunkle Hintergründe funktionieren, in einem Terrain, in dem Halation und abgesoffene Details wohnen. Und die invertierte Decke endet bei 0,75: Die Stufe, die Text tragen sollte, erscheint als oklch(0.75 0.026 262.9) ≈ #A5AEBF, ein trübes Graublau, wo die abgeleitete Farbrampe ≈ 0,95 erreicht — ≈ #E6EFFF, ein Off-White, das die Aufgabe tatsächlich erfüllen kann.

Lies dann das Chroma an der Arbeitsstufe. Die Invertierung behält C 0,192 bei und senkt es auf L 0,39: ≈ #0134A9, ein dunkles, gedämpftes Blau, das nie jemand ausgewählt hat. Die abgeleitete Farbrampe setzt den interaktiven Kern auf L ≈ 0,54 mit auf ≈ 0,23 angehobenem Chroma: ≈ #1C5EF1, lebendig auf dem dunklen Grund, so wie die Ausgangsfarbe auf Weiß lebendig war.

Öffne diesen Vergleich in Scale Composer — dieselbe blaue Ausgangsfarbe zweimal gerendert, naive Invertierung neben der abgeleiteten dunklen Farbrampe, mit den übereinandergelegten Helligkeitskurven, sodass die Spiegelung und der Wiederanstieg als Formen sichtbar werden.

Was braucht immer noch einen Designer?

Ableitung automatisiert die Werte, nicht das Urteil. Ein paar Entscheidungen bleiben menschlich. Welche Elemente ihre volle Leuchtkraft behalten, ist eine davon: Ein dunkles Theme, in dem jede Füllung das angehobene Chroma übernimmt, kann lauter wirken als sein helles Gegenstück, und zu entscheiden, was leise bleibt, ist eine Design-Entscheidung. Bildmaterial ist eine weitere — Fotos und Illustrationen lassen sich weder invertieren noch ableiten, und für sie eine dunkeltaugliche Behandlung zu wählen, ist eine eigene Aufgabe. Und der Seitenanker — ob der dunkelste Hintergrund an die tiefe Stufe der Marke gebunden bleibt oder sich in einen schlichten Neutralton löst — verändert die Temperatur des ganzen Themes. Die Ableitung gibt dir eine korrekte Ausgangspalette; diese Entscheidungen machen daraus eine gestaltete.

Probier es an deiner eigenen Palette aus

Der Unterschied zwischen gespiegelt und abgeleitet lässt sich leichter fühlen als nachlesen. Leite eine dunkle Palette aus deiner eigenen Markenfarbe ab — füge eine Ausgangsfarbe ein und beobachte, wie die dunkle Farbrampe mit ihrer eigenen Kurve, ihrem angehobenen Chroma und ihren neu geprüften Rollen herauskommt, neben dem, was eine Invertierung dir gegeben hätte.