Toggle switch dark mode en CSS : un interrupteur de thème accessible qui retient le choix

Votre bouton dark mode change bien les couleurs, mais au rechargement le site repart en clair, et un lecteur d'écran l'annonce comme un simple bouton sans état. Ce cours construit l'interrupteur de thème complet, du HTML sémantique au JavaScript : un vrai switch accessible au clavier, qui suit d'abord le thème du système, puis retient le choix du visiteur d'une visite à l'autre. Vous repartez avec un composant autonome, rangé dans une bibliothèque que vous réutilisez sur n'importe quel projet.

Toggle switch dark mode : ce que vous saurez faire

Le composant mobilise tout ce que la série CSS moderne a posé jusqu'ici, appliqué à un cas réel.

• Transformer un button en switch accessible avec role et aria-checked
• Relier un libellé visible à son contrôle avec aria-labelledby
• Offrir un lien d'évitement aux visiteurs qui naviguent au clavier
• Donner à chaque composant son propre contrat de tokens locaux
• Styler les états d'un composant à partir de ses attributs ARIA
• Hiérarchiser choix mémorisé, préférence système et thème par défaut
• Livrer un composant autonome, intégrable avec @import et layer()

Un switch piloté par aria-checked, sans case à cocher

Plutôt que de détourner une case à cocher, le cours part d'un élément button, déjà focalisable et activable au clavier, et lui donne le rôle de switch. L'état ne vit qu'à un seul endroit, l'attribut aria-checked : le CSS s'en sert pour déplacer la pastille et changer la couleur, le JavaScript le met à jour, le lecteur d'écran le lit. Le libellé visible suit le mouvement, « Passer en thème sombre » ou « Passer en thème clair », pour que chacun sache ce que fera le clic. Pour creuser les rôles ARIA posés sur un élément non natif, le cours sur le bouton accessible sans balise button en détaille les mécanismes.

Préférence système ou choix mémorisé : qui décide du thème

Au premier passage, le site respecte le réglage du système via prefers-color-scheme. Dès que le visiteur touche l'interrupteur, son choix est enregistré dans le localStorage et prend le dessus, y compris lorsqu'il revient quelques jours plus tard. Si le JavaScript est désactivé, l'attribut data-theme posé dans le HTML garantit un thème par défaut. Les couleurs claires et sombres viennent du cours précédent sur le dark mode en CSS natif : ici, on branche l'interrupteur dessus.

Une bibliothèque de composants réutilisables

Le dernier chapitre range le switch dans un dossier autonome : HTML, CSS, JavaScript, fichier exemple et README. Le CSS s'importe avec @import et layer() pour respecter l'ordre des couches du projet hôte, sans alourdir la feuille principale. Le code du cours et cette bibliothèque font partie des fichiers fournis, et la série y ajoutera un composant accordéon au prochain épisode.

Pour qui

Le badge Intermédiaire est juste, à une condition : ce cours est le sixième épisode d'une série et s'appuie sur la feuille de style modèle construite dans les épisodes précédents, en particulier les variables CSS et design tokens. Il faut aussi être à l'aise avec les bases de JavaScript : constantes, fonctions, écouteurs d'événements. Aucun framework : HTML, CSS et JavaScript natifs, dans un navigateur récent.

Pour aller plus loin

Vous découvrez la série par cet épisode et voulez comprendre pourquoi tout repose sur les couches CSS : commencez par cascade, spécificité et layers, le premier épisode.