Mettre en œuvre des thèmes multimarques avec des variables CSS

La thématisation multi-marque associe un même ensemble de jetons alias de composants à différentes valeurs de jetons globaux pour chaque marque. Les composants font référence aux jetons alias ; les fichiers de thème de chaque marque réaffectent les alias aux jetons globaux propres à la marque.

Définissez les jetons globaux dans :root : toutes les valeurs brutes de couleur, d’espacement et de typographie. Il s’agit de la marque par défaut. Les composants ne font jamais référence directement aux jetons globaux : ils passent toujours par des alias.

Les jetons alias font référence aux jetons globaux à l’aide de var() : --color-action: var(--color-brand-primary). Les composants utilisent --color-action. Modifier la signification de --color-brand-primary modifie l’ensemble du système.

Appliquez les thèmes de marque à l’aide d’une classe sur html ou sur un élément conteneur. Chaque classe de thème remplace les jetons globaux dans la portée de cette marque. Les composants contenus dans le conteneur héritent automatiquement des valeurs de la marque.

Le mode sombre est une variante de thème : une classe ou une requête média qui remplace les jetons de couleur. Utilisez prefers-color-scheme pour le réglage par défaut de l’OS et une classe .dark pour permettre à l’utilisateur de le remplacer. Les deux modifient les mêmes jetons alias.

Les propriétés personnalisées CSS se propagent en cascade et sont héritées. Un thème appliqué à un élément conteneur affecte tous ses descendants. Les thèmes imbriqués remplacent les thèmes extérieurs au niveau du conteneur, ce qui est utile pour thématiser un widget intégré à une page.

Assurez-vous que les jetons alias sont toujours définis. Si une classe de thème est absente, l’alias doit revenir correctement à une valeur par défaut. Utilisez la syntaxe de valeur de secours de CSS var() : var(--color-action, #3b82f6) afin d’éviter les textes invisibles ou les arrière-plans manquants.

Style Dictionary peut produire des fichiers CSS de thème distincts à partir d’un fichier JSON de jetons. L’étape de compilation génère theme-brand-a.css et theme-brand-b.css. Chargez le fichier approprié à l’exécution ou compilez-le dans des paquets distincts pour chaque marque.

Écrivez des tests de régression visuelle qui effectuent le rendu de chaque composant dans chaque thème. Percy et Chromatic capturent des captures d’écran pour chaque variante de thème. Les tests visuels automatisés détectent les régressions lorsque les valeurs des jetons globaux changent de manière inattendue.

Basculez les classes de thème avec JavaScript : document.documentElement.classList.replace("theme-a", "theme-b"). Les variables CSS se mettent à jour instantanément sans effectuer de nouveau rendu des composants : aucun nouveau rendu de React ni recalcul des styles des valeurs statiques n’est nécessaire.

Les variables CSS sont résolues au moment de la peinture : modifier une variable racine déclenche une nouvelle peinture de tous les éléments qui l’utilisent. Limitez les modifications des variables globales aux interactions de l’utilisateur, comme le changement de thème, plutôt qu’aux boucles d’animation. Utilisez des transitions de propriétés individuelles pour les effets de thématisation animés.

Comment les thèmes fondés sur les propriétés personnalisées CSS permettent-ils de changer de marque sans modifier le CSS des composants ?

La thématisation multi-marque sépare les valeurs brutes globales des jetons et les jetons alias sémantiques. Les classes de thème remplacent les jetons globaux dans la portée d’un conteneur. Les composants qui font référence aux alias reflètent automatiquement le thème de marque actif, ce qui permet de changer de marque à l’exécution sans modifier le code des composants.