Construire un toggle switch dark mode accessible et persistant
Ce sixième tutoriel de la série CSS Avancé et Architecture est un tutoriel de synthèse et de mise en situation. Pour la première fois, nous ne découvrons pas un nouveau concept isolé — nous les convoquons tous simultanément pour construire un composant réel, complet et production-ready.
Ce que nous construisons
Un interrupteur de thème clair / sombre (toggle switch) intégré dans une page de démonstration minimaliste. En apparence simple, ce composant mobilise l'intégralité des acquis de la série : structure HTML sémantique, attributs ARIA, méthodologie BEM, nesting CSS natif, système de tokens et architecture @layer.
HTML & Accessibilité
La structure HTML est l'occasion de revisiter des décisions de nommage BEM — card__footer devient card__actions. Le composant switch lui-même illustre une règle fondamentale : on n'utilise pas <label> pour un role="switch", car <label> est réservé aux éléments de formulaire natifs. Le lien entre le label textuel et le bouton passe par aria-labelledby, et c'est aria-checked qui porte l'état — pas le texte du label.
CSS & Architecture
Le composant theme-switch dispose de son propre contrat de tokens locaux (--theme-switch-bg, --theme-switch-text), conformément à la philosophie établie au Tuto 4. Le nesting CSS natif structure les états (&[aria-checked="true"], &:focus-visible) directement dans le bloc, rendant le code lisible et cohérent.
JavaScript & Persistance
Le JS est volontairement minimaliste. La logique de priorité est claire : préférence sauvegardée (localStorage) prime sur la préférence système (prefers-color-scheme), qui prime sur la valeur par défaut (data-theme="light" dans le HTML).
Bibliothèque de composants
Ce tuto introduit également une pratique professionnelle : la bibliothèque de composants réutilisables. Chaque composant y est autonome (HTML, CSS, JS, README), intégrable via @import ... layer() pour respecter l'architecture @layer du projet hôte, et prévisualisable via son propre fichier exemple.html. Un portail index.html centralise la navigation — la bibliothèque est conçue pour grandir au fil des projets.
- Durée de ce tuto: 02H
- Tarif de ce tuto: 25 €
- Date de ce tuto: 2026-10-23
Il y a actuellement 438 tutos
Il y a actuellement 30 bundles
