Les propriétés personnalisées CSS expliquées avec un thème clair et sombre en direct construit uniquement avec des variables, getPropertyValue et setProperty en JavaScript, @property, Tailwind v4 @theme et les pièges à éviter.
Déclarez une variable CSS avec deux tirets, --brand: #2563eb;, généralement dans :root pour que toute la page puisse la voir, et lisez-la avec var(--brand). Un second argument sert de valeur de repli : var(--brand, blue). Les variables s'héritent comme color, donc en redéfinir une sur une section la change pour tout ce qu'elle contient, ce qui rend les thèmes très simples.
La syntaxe en un coup d'œil
Ce guide couvre la déclaration, la portée et les valeurs de repli, puis un sélecteur de thème où seules les variables changent, un outil qui lit et écrit des variables en JavaScript sur cette page même, les propriétés enregistrées avec @property, la façon dont Tailwind v4 transforme son thème en variables, et les erreurs qui font échouer var() sans prévenir.
Les variables Sass sont remplacées à la compilation de la feuille de style et disparaissent du résultat. Les propriétés personnalisées CSS existent dans le navigateur à l'exécution, s'héritent à travers le DOM, peuvent varier selon l'élément et être modifiées par JavaScript ou par une règle de media query après le chargement de la page.
Non. var() n'est pas autorisé dans la condition d'une règle @media, car les media queries sont évaluées sans élément dont hériter. Vous pouvez en revanche changer la valeur d'une variable à l'intérieur d'un bloc media query, c'est la méthode habituelle pour rendre les tokens responsive.
Vérifiez l'orthographe et la casse, que la variable est bien définie sur l'élément ou un ancêtre, et que la valeur finale est valide pour la propriété. Si la valeur substituée est invalide, la déclaration devient invalide au moment du calcul de la valeur et la propriété revient à sa valeur héritée ou initiale, pas à votre règle précédente.
Une variable non enregistrée est traitée comme une chaîne : elle bascule à mi-parcours au lieu de s'interpoler. Enregistrez-la avec @property et une syntaxe comme <color> ou <angle>, et le navigateur peut l'interpoler en douceur dans les transitions et animations.
Les propriétés personnalisées et var() fonctionnent dans tous les grands navigateurs depuis des années. @property est plus récent : Firefox l'a ajouté en version 128 en 2024, donc consultez caniuse si vous prenez en charge des versions plus anciennes et gardez une solution de repli non enregistrée.
Valeurs claires et sombres
La deuxième carte redéfinit --accent pour elle-même. La troisième utilise une variable que personne n'a définie, donc la couleur de repli s'affiche.
Un seul jeu de règles de composants. Le thème est un autre jeu de valeurs, choisi par le réglage du système ou par un attribut data-theme.
Lisez la valeur calculée depuis n'importe quel élément. Écrivez sur :root pour un changement global, ou sur un élément pour n'affecter que son sous-arbre.
Enregistrer --angle comme <angle> permet au navigateur de l'interpoler. Sans cet enregistrement, le dégradé sauterait au lieu de tourner.
Dans Tailwind v4, les variables de @theme génèrent des utilitaires comme bg-brand et sont aussi émises en vraies variables CSS utilisables avec var().
Ce qui fait trébucher
Thème clair et sombre, uniquement avec des variables
Thème
mode clair
mode sombre
Rapport hebdomadaire
Commandes en hausse par rapport à la semaine dernière
commandes d'exemple
Voir les détails
La seule chose qui change
Copier le CSS
Lire et écrire des variables en JavaScript
La boîte d'exemple ci-dessous utilise var(--demo-accent, #2563eb) pour sa bordure et var(--demo-radius, 8px) pour ses coins. Définissez l'une ou l'autre variable et la boîte change.
Nom de la variable
Nouvelle valeur
Un nom de propriété personnalisée commence par deux tirets, par exemple --demo-radius.
Lire
Définir
Supprimer
Essayer --demo-radius
Boîte d'exemple
(non défini)
Commencer gratuitement · Sans carte bancaire