Qu'est-ce qu'un jeton de design ?
Un design token est une valeur de design nommée : une couleur, un espacement, un rayon, une durée. Au lieu d'écrire #7c5cff partout, on écrit var(--brand).
Avantages :
- un changement de charte en un seul endroit ;
- un vocabulaire commun entre design et code ;
- des thèmes obtenus en redéfinissant les valeurs, pas les composants.
Nommer par rôle, pas par valeur
| ❌ Nom par valeur | ✅ Nom par rôle |
|---|---|
--violet-500 | --brand |
--gray-900 | --bg-primary |
--white | --text-primary |
Un nom par rôle reste vrai quand la valeur change d'un thème à l'autre : --text-primary est clair sur fond sombre, et sombre sur fond clair.
Deux thèmes, un seul jeu de composants
Le thème sombre est défini sur :root, le thème clair le surcharge via l'attribut data-theme :
:root {
--bg-primary: #0b0b12;
--text-primary: #f4f4f8;
--brand: #8b7bff;
}
:root[data-theme="light"] {
--bg-primary: #ffffff;
--text-primary: #14141c;
--brand: #5b47e0;
}
.lo-card {
background: var(--bg-secondary);
color: var(--text-primary);
}Les composants ne mentionnent que des jetons ; ils ignorent quel thème est actif.
Le logo, cas particulier
Une règle de marque : on ne recolore jamais le symbole. Plutôt que de changer sa couleur par CSS, on rend les deux variantes SVG et le CSS affiche celle qui correspond au thème.
Éviter le flash
Un script inline lit localStorage (à défaut prefers-color-scheme) et pose data-theme avant le premier rendu. Sans lui, la page s'afficherait un instant dans le mauvais thème.
Accessibilité
- Vérifiez les contrastes dans les deux thèmes.
- Ne portez jamais un état par la couleur seule : ajoutez un mot ou un symbole.
- Respectez
prefers-reduced-motion.
À retenir
- Des jetons nommés par rôle.
- Le thème est une surcharge de variables, pas une seconde feuille de style.
- Aucune couleur en dur dans les composants.