Leçon 3 : couleur, contraste et mode sombre — un theme, deux modes
Le PM demande le mode sombre, et tu découvres que chaque composant a besoin de son propre `dark:bg-gray-900 dark:text-white`. Cette leçon t'apprend à définir des `semantic color tokens` avec des variables CSS — pour que le mode sombre soit un changement de valeur à un seul endroit, et non un `dark:`
Un semantic color token, c'est comme dire « couleur du mur » au lieu de « ce beige précis ». Passe en mode nuit, et tout ce qui est étiqueté « couleur du mur » se repeint d'un coup — sans toucher chaque mur séparément.
- semantic color token
- Un token nommé selon un rôle — `surface`, `on-surface`, `border` — pas une teinte. Le composant demande le rôle, et le theme décide quelle teinte convient à chaque mode.
- CSS-variable theming
- Définir les valeurs de couleur comme des variables CSS (`--surface`) dans `:root` et les surcharger sous `.dark`. Les composants référencent la variable, donc changer la valeur les modifie tous d'un coup.
- contrast ratio
- Une mesure de lisibilité entre la couleur du texte et l'arrière-plan. WCAG AA exige au moins 4.5:1 pour le texte normal — et un semantic token doit le respecter dans les deux modes.
- dark mode strategy
- Le choix de la façon d'implémenter le mode sombre : dupliquer `dark:` sur chaque élément (impossible à maintenir) contre changer les valeurs des tokens à un seul endroit via une classe `.dark` (maintenable).
