Sélecteur de thème

Le sélecteur de thème permet de choisir un thème clair ou sombre au lieu de suivre le système d’exploitation en silence. Le partiel d’en-tête partagé le rend dans les deux sites; les collections de jetons fournissent les valeurs de couleurs sémantiques propres à chaque mode.

Exemple#

Quand l’utiliser#

• Un seul sélecteur par site, dans l’habillage de la page — en-tête ou pied de page — pas dans le contenu
• Offrez-le une fois la couche de jetons en place; un sélecteur sans jetons code en dur une deuxième palette
• Pas pour des choix de style propres à une page ou à un composant

Comportement#

Le premier script en ligne lit le choix bhdicaire-theme enregistré. Lorsqu’aucun choix n’existe, il suit prefers-color-scheme; il s’exécute avant la feuille de style afin d’éviter un flash en thème clair. Le contrôle enregistre un choix explicite light ou dark dans le stockage local. Un changement ultérieur de préférence système met le site à jour seulement lorsqu’aucun choix explicite n’existe.

assets/css/generated/themes.css est généré depuis tokens/themes/light.tokens.json et tokens/themes/dark.tokens.json. Chaque collection remplace les mêmes chemins de couleur sémantiques sous data-theme, afin que les composants continuent de consommer des rôles comme --color-paper et --color-ink plutôt que des littéraux propres à un mode.

Accessibilité#

• L’état initial doit suivre la préférence du système; le sélecteur enregistre un choix explicite et ne la remplace jamais en silence
• Le contrôle doit porter une étiquette pour lecteurs d’écran qui nomme l’action, pas seulement une icône
• Il doit être entièrement utilisable au clavier — atteignable avec Tab, activé avec Entrée ou Espace
• C’est un bouton natif dont aria-pressed indique si le mode sombre est actif; son libellé accessible nomme l’action suivante
• Les SVG de soleil et de lune sont décoratifs; le libellé localisé reste disponible aux technologies d’assistance