Wie Dark-Mode-Tokens funktionieren
Dark-Mode-Tokens sind ein zweiter Satz von Werten, der an dieselben semantischen Token-Namen gebunden ist wie das helle Theme. Ein Moduswechsel richtet Namen wie --color-surface auf andere Farben aus, ohne dass eine Komponente wissen muss, welcher Modus gerade aktiv ist.
Warum Invertieren nicht funktioniert
Der naheliegende Weg - Helligkeit spiegeln, Schwarz und Weiß tauschen - erzeugt ein dunkles Theme, das auf zunächst schwer benennbare Weise falsch aussieht.
Ein paar konkrete Gründe:
Reines Schwarz ist hart. Die meisten gut gemachten Dark Themes verwenden ein sehr dunkles Grau, oft mit leichtem Farbstich, statt #000000. Weißer Text mit vollem Kontrast auf reinem Schwarz erzeugt Halation - der Text scheint auszubluten.
Gesättigte Farben wirken auf Dunkel heller. Ein Blau, das auf Weiß angenehm sitzt, kann gegen einen dunklen Hintergrund flimmern. Dark-Mode-Varianten werden üblicherweise entsättigt und aufgehellt, nicht nur aufgehellt.
Die Elevation kehrt sich um. In hellen Themes werfen erhöhte Flächen Schatten. In dunklen Themes ist Schatten nahezu unsichtbar, deshalb zeigen sich erhöhte Flächen dadurch, dass sie heller werden. Schatten-Tokens, die in einem Modus funktionieren, tragen im anderen keine Information.
Kontrastverhältnisse überstehen das Spiegeln nicht. Eine Paarung, die in Hell AA besteht, kann in Dunkel durchfallen. Jede Paarung muss neu geprüft werden, nicht nur neu berechnet.
Die Struktur, die es möglich macht
Dark Mode ist zuerst ein Benennungsproblem und erst danach ein Farbproblem. Es geht nur sauber, wenn die semantische Ebene bereits existiert.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}Komponenten referenzieren --color-surface. Sie erfahren nie, dass es einen Modus gibt. Ein drittes Theme später ist ein weiterer Block derselben Form, keine Änderung an jeder Komponente.
Referenzieren Komponenten direkt Primitive, gibt es nichts umzuhängen, und Dark Mode wird zu einer Bedingung in jeder Datei.
Erzeuge beide gemeinsam
Ein Dark Theme, das sechs Monate später nachgerüstet wird, ist eine Durchsicht jeder Komponente. Zusammen mit dem hellen Theme aus denselben Skalen erzeugt, ist es umsonst.
Das ist das stärkste Argument dafür, die Modi von Anfang an zu klären, selbst wenn du nur einen ausspielst: Die strukturellen Kosten stecken in der Benennung, und Benennung ist billig, bevor es Komponenten gibt, und teuer danach.
Wo Flash DSM hier steht
Jedes erzeugte System produziert Hell und Dunkel gemeinsam, gebunden an dieselben semantischen Namen, mit über die Paarungen geprüftem Kontrast, statt einen Modus nachträglich aus dem anderen abzuleiten.