Variables CSS pour changer de thème

Les propriétés personnalisées CSS (variables) définies sur :root sont disponibles partout dans la feuille de style. Définissez une palette de couleurs complète une seule fois — arrière-plans, couleurs du texte, surfaces, bordures — et référencez-la partout. Cette source unique de vérité rend le changement de thème trivial.

Lorsqu’un attribut data-theme="dark" est défini sur document.documentElement, un sélecteur CSS tel que [data-theme='dark'] remplace les variables racine par des valeurs sombres. Les composants référencent var(--color-bg) et récupèrent automatiquement les nouvelles valeurs sans aucune modification du code.

Au minimum, définissez : --color-bg (arrière-plan de la page), --color-text (texte principal), --color-primary (couleur de marque), --color-surface (arrière-plan des cartes ou panneaux) et --color-border (séparateurs). Un jeu cohérent de jetons empêche l’apparition de valeurs de couleur choisies au cas par cas dans les composants.

Dans le CSS de vos composants, référencez les variables avec background: var(--color-bg) et color: var(--color-text). Vous pouvez également fournir une valeur de repli : var(--color-bg, #ffffff). Le navigateur évalue la variable au moment du rendu, de sorte qu’une seule classe fonctionne pour les thèmes clair et sombre.

Ajoutez transition: background-color 200ms, color 200ms au sélecteur :root. Lorsque l’attribut data-theme change, tous les éléments qui utilisent des variables CSS s’animent simultanément vers leurs nouvelles valeurs. Cela donne une finition soignée sans code d’animation JS.

La gestion du thème via des variables CSS est préférable à la définition de styles en ligne depuis JavaScript. Le navigateur gère nativement tous les recalculs de styles, aucun rendu supplémentaire de React n’est déclenché pour chaque composant enfant thématisé et la cascade CSS gère automatiquement l’héritage. JS doit seulement modifier un attribut sur l’élément racine.

Vous pouvez combiner les variables CSS avec la requête @media (prefers-color-scheme: dark) comme solution de repli uniquement en CSS. Définissez vos surcharges sombres dans la requête média en plus du sélecteur data-theme ou à sa place. Cela garantit que le mode sombre fonctionne même si JavaScript ne s’est pas encore exécuté.

L’approche la plus robuste consiste à superposer les deux mécanismes : la requête @media fournit la valeur par défaut de l’OS, tandis qu’un attribut data-theme permet une surcharge utilisateur via JavaScript. Lorsque l’attribut est présent, il est prioritaire grâce à sa spécificité ; lorsqu’il est absent, la requête média prend effet.

Pour les images qui rendent mal sur des arrière-plans sombres, utilisez l’élément HTML picture avec un élément enfant source media="(prefers-color-scheme: dark)". Le navigateur sélectionne automatiquement la variante sombre. Pour les icônes SVG en CSS, vous pouvez utiliser filter: invert(1) comme approximation rapide.

Les variables CSS peuvent également être limitées à des composants individuels en les définissant sur l’élément racine d’un composant plutôt que sur :root. Cela permet une personnalisation par composant, par exemple une barre latérale avec son propre jeton d’arrière-plan, différent de celui de la page, tout en continuant à changer correctement avec la bascule de thème globale.

Chrome DevTools affiche les valeurs calculées des variables CSS dans le panneau Styles. Cliquez sur la référence de la variable pour accéder à sa définition. Il est ainsi facile de vérifier que le jeton sombre ou clair correct est appliqué à un élément. Vous pouvez également modifier les valeurs des variables directement dans le panneau.

Quel sélecteur CSS utilise-t-on pour définir des propriétés personnalisées CSS globales qui s’appliquent à l’ensemble du document ?

Les propriétés personnalisées CSS sur :root fournissent un système centralisé de jetons pour les thèmes. Basculez un attribut data-theme sur l’élément HTML pour changer instantanément de thème. Ajoutez des transitions CSS pour une animation fluide, utilisez la requête média prefers-color-scheme comme solution de repli uniquement en CSS et évitez les surcharges de style JS par composant.