Multi-Brand-Themes mit CSS-Variablen implementieren

Beim Multi-Branding werden dieselben Komponenten-Alias-Tokens je nach Marke unterschiedlichen globalen Tokenwerten zugeordnet. Komponenten verweisen auf Alias-Tokens; die Theme-Dateien der Marken ordnen die Aliase den markenspezifischen globalen Tokens neu zu.

Definieren Sie globale Tokens in :root: alle rohen Farbwerte, Abstände und Typografiewerte. Dies ist die Standardmarke. Komponenten verweisen nie direkt auf globale Tokens, sondern immer über Aliase.

Alias-Tokens verweisen mithilfe von var() auf globale Tokens: --color-action: var(--color-brand-primary). Komponenten verwenden --color-action. Wenn Sie die Bedeutung von --color-brand-primary ändern, ändert sich das gesamte System.

Wenden Sie Marken-Themes mit einer Klasse auf html oder ein Containerelement an. Jede Theme-Klasse überschreibt die globalen Tokens für den jeweiligen Markenbereich. Komponenten innerhalb des Containers übernehmen die Werte der Marke automatisch.

Dark Mode ist eine Theme-Variante – eine Klasse oder Media Query, die Farb-Tokens überschreibt. Verwenden Sie prefers-color-scheme für die Standardeinstellung des Betriebssystems und eine .dark-Klasse für die Benutzervorgabe. Beide ändern dieselben Alias-Tokens.

CSS Custom Properties werden kaskadiert und vererbt. Ein auf ein Containerelement angewendetes Theme wirkt sich auf alle Nachkommen aus. Verschachtelte Themes überschreiben äußere Themes auf Containerebene – nützlich für Szenarien, in denen ein Widget innerhalb einer Seite ein eigenes Theme verwendet.

Stellen Sie sicher, dass Alias-Tokens immer definiert sind. Wenn eine Theme-Klasse fehlt, sollte der Alias zuverlässig auf einen Standardwert zurückfallen. Verwenden Sie die Fallback-Syntax von CSS var(): var(--color-action, #3b82f6), um unsichtbaren Text oder fehlende Hintergründe zu verhindern.

Style Dictionary kann aus einem Token-JSON separate CSS-Dateien für Themes erzeugen. Der Build-Schritt generiert theme-brand-a.css und theme-brand-b.css. Laden Sie zur Laufzeit die passende Datei oder kompilieren Sie sie für jede Marke in separate Bundles.

Schreiben Sie visuelle Regressionstests, die jede Komponente in jedem Theme rendern. Percy und Chromatic erstellen Screenshots für jede Theme-Variante. Automatisierte visuelle Tests erkennen Regressionen, wenn sich globale Tokenwerte unerwartet ändern.

Schalten Sie Theme-Klassen mit JavaScript um: document.documentElement.classList.replace("theme-a", "theme-b"). CSS-Variablen werden sofort aktualisiert, ohne Komponenten neu zu rendern – weder ein erneutes React-Rendering noch eine Neuberechnung statischer Stilwerte ist erforderlich.

CSS-Variablen werden zum Zeitpunkt des Paints aufgelöst – eine Änderung einer Root-Variable löst für alle Elemente, die sie verwenden, einen Repaint aus. Beschränken Sie Änderungen globaler Variablen auf Benutzerinteraktionen wie das Umschalten des Themes, nicht auf Animationsschleifen. Verwenden Sie für animierte Theme-Effekte Übergänge einzelner Eigenschaften.

Wie ermöglichen Themes mit CSS Custom Properties den Markenwechsel, ohne das CSS der Komponenten zu ändern?

Multi-Branding trennt globale rohe Tokenwerte von semantischen Alias-Tokens. Theme-Klassen überschreiben globale Tokens innerhalb eines Containerbereichs. Komponenten, die auf Aliase verweisen, übernehmen automatisch das jeweils aktive Marken-Theme. So wird ein Wechsel zur Laufzeit ohne Änderungen am Komponentencode möglich.