Transitions fluides des modes clair et sombre : jetons, CSS et mouvement
Comment créer un commutateur de thème clair/sombre qui respecte les paramètres du système, évite un flash au chargement, stylise les contrôles natifs et anime sans nuire à l'accessibilité.
À retenir
Créez des thèmes sur des jetons sémantiques, suivez les paramètres du système avec le schéma de couleurs préféré par défaut, laissez les utilisateurs le remplacer et définissez la propriété du schéma de couleurs pour que les contrôles de formulaire et les barres de défilement correspondent. Appliquez le thème enregistré avant le rendu de la page pour éviter un flash. Gardez l'animation du commutateur courte, comme un fondu enchaîné rapide ou une transition de vue, et ignorez-la lorsque le mouvement réduit est activé.
Commencer à partir des paramètres du système
La fonctionnalité multimédia de schéma de couleurs préféré vous indique si l'utilisateur a demandé à son système d'exploitation un thème clair ou sombre. Utilisez-le par défaut et ajoutez un commutateur intégré à l'application qui le remplace et est mémorisé.
Thème avec des jetons, pas des remplacements
Définissez les couleurs en tant que jetons sémantiques (surface, texte, bordure, accent) et attribuez à chaque thème ses propres valeurs, généralement sous forme de propriétés personnalisées CSS sur l'élément racine. Les composants ne changent alors jamais entre les thèmes ; seules les valeurs des jetons le font. Il s'agit de la même approche de jeton à trois niveaux utilisée pour les systèmes de conception multimarques.
N'oubliez pas les contrôles natifs
MDN explique que la propriété color-scheme indique au navigateur les schémas pris en charge par un élément, ce qui modifie les couleurs par défaut des contrôles de formulaire, des barres de défilement et des autres interfaces utilisateur intégrées. Sans cela, une page sombre peut afficher des entrées et des barres de défilement d’un blanc éclatant.
Évitez le flash lors du chargement
Si le thème enregistré est appliqué par JavaScript après le rendu de la page, les utilisateurs voient un flash du mauvais thème. Appliquez-le le plus tôt possible, avec un petit script en ligne dans l'en-tête du document ou un attribut rendu par le serveur, avant que la feuille de style ne soit peinte.
Animez soigneusement le commutateur
Un court fondu enchaîné, d'environ 150 à 250 millisecondes, donne l'impression que le changement est délibéré. Évitez de faire la transition de chaque propriété de couleur sur chaque élément, ce qui peut être lent sur les grandes pages ; un seul instantané de transition de vue est souvent plus fluide. Rendre la bascule elle-même claire, avec une étiquette ou une info-bulle, et supprimer l'animation lorsque le mouvement réduit est activé.
Extrait d’implémentation en production
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Principes clés à retenir
- Par défaut, préfère le schéma de couleurs ; laissez les gens passer outre et s'en souvenir
- Thème avec des jetons sémantiques, pas de remplacements par composant
- Définir le schéma de couleurs pour que les contrôles natifs correspondent
- Appliquer le thème enregistré avant la première peinture
- Gardez l’animation du commutateur courte et respectez les mouvements réduits
Questions fréquentes
Sources
- prefers-color-scheme — Documents Web MDN
- color-scheme — Documents Web MDN
- View Transition API — Documents Web MDN