Variables CSS pour les thèmes
Déclarez des propriétés personnalisées avec --, utilisez var(), redéfinissez-les dans des portées imbriquées et implémentez un bouton de bascule entre les thèmes clair et sombre.
Variables CSS pour les thèmes est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les propriétés personnalisées CSS ?
Les propriétés personnalisées CSS (variables CSS) stockent des valeurs réutilisables dans toute une feuille de style. Elles sont déclarées avec --name: value et utilisées avec var(--name). Contrairement aux variables des préprocesseurs comme Sass, elles sont dynamiques : vous pouvez les modifier avec JavaScript.
Déclarer des propriétés personnalisées
Déclarez les propriétés sur :root pour les rendre disponibles partout. Vous pouvez également les déclarer sur n’importe quel élément afin de limiter leur portée au sous-arbre de cet élément.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Utiliser des propriétés personnalisées
Référencez une variable avec var(--name). Ajoutez une valeur de repli comme second argument : var(--color-primary, #3182ce). La valeur de repli est utilisée si la variable n’est pas définie.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}La cascade : variables à portée limitée
Les propriétés personnalisées se propagent selon la cascade et sont héritées. Si vous redéfinissez une variable sur un élément enfant, sa valeur remplace celle de l’élément parent pour cet élément et tous ses descendants.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Mode sombre avec les variables CSS
Le modèle de mode sombre le plus clair consiste à définir des palettes de couleurs claires et sombres sous forme de variables CSS. Basculez une classe ou utilisez une requête de média qui détecte la préférence de thème de couleur pour changer de palette. Il n’est pas nécessaire de remplacer individuellement les propriétés de couleur.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Basculer le mode sombre avec JavaScript
Ajoutez un bouton de bascule qui modifie un attribut de données ou une classe sur l’élément racine. Les variables CSS s’occupent du reste : une seule ligne de JavaScript, sans remplacement individuel des styles.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Mettre à jour les variables avec JavaScript
element.style.setProperty('--name', value) met à jour une propriété personnalisée directement dans l’élément. La supprimer avec removeProperty restaure la valeur issue de la cascade. Cela permet de créer des thèmes dynamiques et des valeurs animées.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Les tokens de conception comme variables CSS
Définissez toutes les décisions de conception — palette de couleurs, échelle d'espacement, échelle typographique — sous forme de variables CSS. Vous créez ainsi une source unique de vérité que les composants utilisent. La modification d'un token se propage instantanément partout.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Utiliser des variables dans calc()
Les variables CSS fonctionnent dans calc(), ce qui permet d'effectuer des calculs adaptatifs à partir des valeurs des tokens.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Compatibilité des navigateurs
Les propriétés personnalisées CSS sont prises en charge par tous les navigateurs modernes (depuis 2016 pour les principaux navigateurs). Vous n'avez pas besoin d'un préprocesseur pour cette fonctionnalité. Solution de repli pour les navigateurs très anciens : fournissez une valeur statique avant var().
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Propriétés personnalisées et variables Sass
Les variables Sass sont compilées en valeurs statiques. Les propriétés personnalisées CSS existent à l'exécution, sont dynamiques, peuvent être modifiées avec JavaScript et se propagent dans le DOM. Utilisez les variables CSS pour les thèmes et les variables Sass pour les constantes définies lors de la compilation.
Vérification rapide
Comment lire et mettre à jour une propriété personnalisée CSS depuis JavaScript ?
Récapitulatif : propriétés personnalisées CSS
Déclarez-les avec -- sur :root pour une portée globale. Utilisez-les avec var(). Les variables dont la portée est limitée se propagent aux descendants. Mode sombre : redéfinissez les tokens de couleur dans une requête média ou un attribut de données. Mettez-les à jour depuis JavaScript avec style.setProperty(). Les tokens de conception sous forme de variables constituent une source unique de vérité.
Questions Fréquemment Posées
La leçon « Variables CSS pour les thèmes » est-elle gratuite ?
Oui — le texte complet de « Variables CSS pour les thèmes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Variables CSS pour les thèmes » ?
Déclarez des propriétés personnalisées avec --, utilisez var(), redéfinissez-les dans des portées imbriquées et implémentez un bouton de bascule entre les thèmes clair et sombre. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Variables CSS pour les thèmes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Approfondissement de Flexbox : alignement, retour à la ligne et ordre
- CSS Grid : zones de modèle, auto-fit et minmax
- Combiner Flexbox et Grid
- Variables CSS pour les thèmes