Concevoir deux schémas de couleurs cohérents pour votre marque
Comment maintenir l’identité visuelle de votre marque en mode clair et sombre.
CSS & Accessibilité
Utiliser les propriétés CSS personnalisées pour gérer les thèmes
Les variables CSS (custom properties) transforment la gestion des thèmes. Au lieu de modifier des centaines de règles, vous contrôlez les couleurs depuis un seul endroit. C’est la fondation d’un système de design robuste et maintenable.
Pourquoi les variables CSS changent tout
Avant les variables CSS, changer une couleur signifiait éditer dix, vingt, parfois cinquante règles différentes. Une ligne d’oubli et votre design devient incohérent. Les variables CSS (ou custom properties) éliminent ce problème en centralisant les valeurs.
Au lieu de coder la couleur en dur à chaque fois, vous la définissez une seule fois et la réutilisez partout. C’est comme avoir une variable JavaScript, mais directement en CSS. Mieux encore, vous pouvez les modifier dynamiquement avec JavaScript ou créer des variantes de thème en quelques lignes.
Clé: Les variables CSS fonctionnent avec héritage CSS. Une variable définie sur un parent est accessible à tous ses enfants. C’est puissant pour les thèmes qui changent par section.
La syntaxe de base
Définir une variable CSS est simple. Vous utilisez le préfixe
--
suivi du nom que vous choisissez. Par exemple:
--couleur-principale
. Traditionnellement, les développeurs les définissent dans :root pour qu’elles soient globales.
Une fois définie, vous l’utilisez avec la fonction
var()
. Si vous voulez un fallback (valeur par défaut), vous le passez en deuxième argument. C’est utile pour la compatibilité avec les anciens navigateurs, même si ce n’est plus vraiment nécessaire en 2026.
Exemple:
:root { –couleur-principale: #c084fc; }
button { background: var(–couleur-principale); }
Gérer les thèmes avec des variables
C’est là que ça devient vraiment puissant. Au lieu de réécrire votre CSS pour chaque thème, vous redéfinissez simplement les variables. Imaginons un thème clair et un thème sombre. Les deux partagent la même structure CSS, mais avec des valeurs différentes.
Vous pouvez créer une classe
.theme-sombre
qui redéfinit les variables. Tous les éléments qui utilisent
var(--couleur-texte)
s’ajustent automatiquement. Pas de duplication, pas d’incohérence. C’est l’approche que les équipes professionnelles utilisent pour maintenir des systèmes de design complexes.
1
Définir les variables de base en :root
2
Créer des variantes de thème avec des classes
3
Redéfinir les variables dans chaque thème
4
Utiliser var() partout dans votre CSS
À noter
Cet article couvre les concepts fondamentaux des variables CSS pour la gestion des thèmes. Les implémentations réelles dépendent de votre architecture et de vos besoins spécifiques. Testez toujours vos variables sur les navigateurs que vos utilisateurs emploient. La plupart des navigateurs modernes supportent les variables CSS, mais une vérification de compatibilité est recommandée pour les projets destinés à des audiences hétérogènes.
Avantages pratiques
Utilisez les variables CSS et vous gagnez en flexibilité. Un changement de couleur marque? Une ligne modifiée. Un nouveau thème saisonnier? Vous créez une nouvelle classe et c’est fait. Les développeurs Belges qui gèrent plusieurs sites apprécient particulièrement cette approche.
Les variables CSS fonctionnent aussi avec JavaScript. Vous pouvez modifier une variable au runtime avec
document.documentElement.style.setProperty('--ma-variable', 'nouvelle-valeur')
. Cela ouvre des possibilités intéressantes pour les thèmes dynamiques ou les personnalisations basées sur les préférences utilisateur.
- Maintenance simplifiée — une source de vérité pour chaque valeur
- Thèmes multiples sans duplication de code
- Modification dynamique avec JavaScript
- Meilleure documentation du système de design
Conclusion
Les propriétés CSS personnalisées ne sont pas juste une fonctionnalité, c’est une philosophie de design. Elle encourage la cohérence, la maintenabilité et la flexibilité. Si vous travaillez sur un projet avec plusieurs thèmes ou si vous envisagez d’en ajouter, les variables CSS sont votre meilleur allié. Elles transforment ce qui pourrait être une tâche fastidieuse en quelque chose d’élégant et gérable. C’est l’approche que les équipes professionnelles adoptent, et maintenant vous savez pourquoi.
Prêt à approfondir votre compréhension du mode sombre?
Découvrir les schémas de couleurs cohérents