Nous Contacter

Créer un composant de bascule accessible et mémorisant

Comment construire un interrupteur de thème qui fonctionne vraiment — celui que vos utilisateurs vont aimer utiliser et qui se souviendra de leur choix

11 min de lecture Avancé Avril 2026
Composant de bascule de thème avec animation fluide entre mode clair et mode sombre, montrant les états du bouton et les transitions CSS

Pourquoi un bon composant de bascule change tout

Un interrupteur de thème, c’est plus qu’un bouton. C’est la première interaction que beaucoup d’utilisateurs vont faire sur votre site. S’il fonctionne mal — s’il ne se souvient pas du choix, s’il est difficile à utiliser avec un clavier, s’il ne dit pas clairement ce qu’il fait — vous perdez la confiance dès le départ.

On va construire quelque chose de solide. Un composant qui gère l’accessibilité correctement, qui persiste le choix de l’utilisateur, et qui fonctionne sur tous les appareils. Pas de magie — juste du code bien pensé.

Interface utilisateur montrant différents états d'un bouton de basculement de thème avec des icônes soleil et lune

Les fondations : HTML et attributs ARIA

Commencez par la structure HTML. Vous n’avez pas besoin d’une `

` complexe — un bouton basique suffit. Le point clé, c’est d’utiliser les bons attributs pour que les lecteurs d’écran comprennent ce qui se passe.

Structure recommandée : 

<button 
    id="theme-toggle" 
    aria-label="Basculer le mode sombre"
    aria-pressed="false"
>
    <i class="fas fa-sun"></i>
</button>

L’attribut `aria-pressed` est crucial — il dit aux utilisateurs de technologie d’assistance quel est l’état actuel. Quand vous basculez le thème, vous mettez à jour `aria-pressed` à `true` ou `false`. C’est la différence entre un composant utilisable et un qui laisse les utilisateurs confus.

L’`aria-label` décrit l’action. “Basculer le mode sombre” est clair — un utilisateur sait exactement ce qui va se passer quand il clique. C’est mieux que juste une icône sans texte.

Éditeur de code montrant la structure HTML d'un bouton accessible avec les attributs ARIA correctement implémentés
Diagramme montrant comment localStorage persiste les préférences de l'utilisateur à travers les sessions de navigation

Faire persister le choix avec localStorage

Voilà le problème : si vous ne sauvegardez pas la préférence, l’utilisateur revient au thème par défaut chaque fois qu’il recharge la page. C’est frustrant. Utiliser `localStorage` résout ça en quelques lignes.

1

Détecter le thème actuel — Vérifiez localStorage au chargement de la page. S’il n’y a rien, utilisez la préférence système avec `prefers-color-scheme`.

2

Appliquer le thème — Ajouter une classe au ` ` ou au ` `. C’est plus simple que de changer les variables CSS directement.

3

Sauvegarder au clic — Quand l’utilisateur clique le bouton, mettez à jour localStorage avec le nouveau thème.

Le truc à retenir : le choix persiste parce qu’il est stocké localement. La prochaine visite, le script lit localStorage avant même que la page n’affiche le contenu. Pas de flash du mauvais thème.

Articles connexes

Approfondissez votre compréhension du basculement de thème

Le CSS qui rend ça beau

Le design du bouton dépend de votre marque, mais voici ce qui fonctionne bien. Un bouton qui a clairement deux états — l’icône change, la couleur change. Pas ambigü.

Les transitions sont importantes. Une animation rapide — disons 300 millisecondes — fait sentir le changement fluide. Les utilisateurs comprennent que quelque chose s’est produit. Pas d’animation instantanée qui laisse douter.

Point clé :

Les transitions CSS sur le changement de thème doivent être rapides — entre 250 et 400ms. Plus lent, ça paraît lent. Plus rapide, on ne voit pas le changement.

Démonstration visuelle d'une animation de basculement de thème montrant la transition fluide des couleurs et des icônes

À noter

Ce guide fournit une approche technique et éducative pour implémenter un composant de basculement de thème accessible. Les implémentations spécifiques varient selon votre pile technologique et vos besoins en accessibilité. Testez toujours vos composants avec des lecteurs d’écran réels et des utilisateurs pour garantir qu’ils fonctionnent correctement. Les normes WCAG 2.1 fournissent des critères détaillés pour l’accessibilité web — consultez-les pour des exigences complètes.

Ce qui fait la différence

Un bon composant de bascule, c’est invisible pour l’utilisateur. Il fonctionne. Il se souvient. Il annonce clairement ce qu’il fait. Aucune confusion, aucune frustration.

Vous avez maintenant les éléments pour construire quelque chose de solide. Commencez par le HTML accessible, ajoutez la persistance avec localStorage, et rendez-le beau avec le CSS. C’est la fondation. À partir de là, vous pouvez améliorer — animations plus sophistiquées, détection de mouvement réduit, animations préférence — mais ce que vous avez ici fonctionne pour la plupart des utilisateurs.

Testez sur les appareils réels. Vérifiez avec un clavier. Essayez avec un lecteur d’écran. Les vrais utilisateurs vous remercieront.

Prêt à explorer plus loin ?

Les articles connexes ci-dessus couvrent la sélection des couleurs, les variables CSS et la détection des préférences système. Ensemble, ils forment une stratégie complète pour le basculement de thème.

Voir tous les articles sur le mode sombre