Le dark mode en CSS repose sur prefers-color-scheme et les variables (custom properties). Un guide pour basculer entre thèmes sans flash et avec une transition fluide.

Les variables CSS définissent les couleurs (fond, texte, bordures) pour chaque thème. La media query prefers-color-scheme: dark applique le jeu de variables sombre quand l'utilisateur le préfère. On peut ajouter un toggle (checkbox ou JS) qui override en stockant la préférence (localStorage) et en appliquant une classe sur la racine. Pour éviter le flash au chargement, on injecte un script minimal en tête qui lit la préférence avant le premier paint. Les design tokens (Figma, Style Dictionary) peuvent alimenter ces variables pour garder la cohérence design-dev.

Conseil : prévoir un fallback (couleurs par défaut) et tester le contraste (WCAG) en light et dark.

Points forts / Points faibles

Points forts

  • Pas de JS obligatoire (prefers-color-scheme)
  • Variables = un seul endroit pour les couleurs
  • Transition fluide et respect de la préférence système
  • Accessibilité et confort visuel

Points faibles

  • Override manuel (toggle) à gérer si on veut choisir
  • Images et médias à adapter (dark variant) si besoin
  • Tests sur plusieurs OS/navigateurs