#ffffff · Karte: rgba(255,255,255,0.08)Beide Designs
Was ist ein Farbschema oder Theme?
Ein Theme ist ein benannter Satz von Design-Tokens — Hintergrund, Fläche, Text, Sekundärtext, Rahmen und Akzent —, den jede Komponente statt fester Farben liest. Der Wechsel von dunkel zu hell tauscht die Token-Werte einmal aus, und die ganze Oberfläche folgt — deshalb kann ein einziger Akzentwechsel eine ganze App umgestalten.
Beispiel: Das dunkle Schema kombiniert weißen Text (#ffffff) mit dem Hintergrund #0f2027, das helle Schema #1a1a2e mit #f5f7fa. Die relative Luminanz ergibt ein Kontrastverhältnis von etwa 16,7:1 im Dunklen und 15,9:1 im Hellen — beide weit über dem WCAG-AA-Minimum von 4,5:1 für Fließtext. Sekundärtext ist absichtlich schwächer (etwa 7,7:1 dunkel und 4,4:1 hell).
So nutzt man die Theme-Vorschau
- Wechsle zwischen Dunkel und Hell und vergleiche beide Token-Sätze nebeneinander.
- Vergleiche die Muster für Hintergrund, Fläche und Text, aus denen jedes Schema besteht.
- Lies die Akzentfarbe ab, die Buttons, Links und Hervorhebungen steuert.
- Verwende dieselben Tokens im eigenen CSS, damit die Vorschau zu deinem Build passt.
Themes und Kontrast — häufige Fragen
Was ist ein Design-Token?
Ein Design-Token ist ein benannter Wert wie --text oder --surface, auf den Komponenten statt fester Farben verweisen. Ändert man den Token einmal, aktualisiert sich jede Verwendung — deshalb ist der Theme-Wechsel sofort.
Warum ist Kontrast für ein Theme wichtig?
Text muss auf jedem Hintergrund lesbar bleiben. WCAG AA verlangt mindestens 4,5:1 für Fließtext und 3:1 für großen Text, jeder Token-Satz sollte also geprüft statt angenommen werden.
Warum ist der Dunkelmodus nicht rein schwarz?
Sehr dunkle Grautöne wie #0f2027 verringern Schlieren auf OLED-Panels und bewahren etwas Tiefe, sodass Flächen ohne harte reine Schwarzkannten unterscheidbar bleiben.
