Le « Color Switcher » est une fonctionnalité interactive qui permet aux utilisateurs de changer le thème de couleur d’une page web en cliquant sur un bouton. Cette technique est particulièrement utile pour améliorer l’expérience utilisateur en offrant une personnalisation visuelle.
Dans notre exemple, le switcher modifie les couleurs de fond et de texte de la page. Cela est rendu possible grâce à l’utilisation de variables CSS dynamiques et un peu de JavaScript pour contrôler ces variables.
Les variables CSS, également connues sous le nom de propriétés personnalisées, sont déclarées dans le pseudo-élément :root, ce qui les rend accessibles globalement sur toute la page. Dans cet exemple, des variables telles que --bg-color et --text-color sont définies pour contrôler respectivement les couleurs de fond et de texte. L’utilisation de variables CSS offre un moyen flexible et centralisé de gérer les styles sur l’ensemble du site.
Implémentation
See the Pen Why desn’t work? by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté
Le cœur de l’interactivité réside dans le JavaScript. Un bouton dans le HTML est lié à une fonction JavaScript appelée toggleLight. Lorsque l’utilisateur clique sur ce bouton, la fonction toggleLight est exécutée. Cette fonction utilise une variable state pour suivre l’état actuel du thème (clair ou sombre).
La fonction toggleLight modifie les valeurs des variables CSS en utilisant document.documentElement.style.setProperty. Lorsque l’utilisateur clique sur le bouton, si l’état est 0 (thème clair), les variables sont modifiées pour afficher un thème sombre (fond noir et texte blanc), et la variable state est mise à jour à 1. Lors du prochain clic, si l’état est 1, les variables reviennent à leurs valeurs initiales pour un thème clair, et state repasse à 0.
Cette méthode offre une solution élégante et efficace pour implémenter un switcher de thème sur une page web. Elle démontre également la puissance de combiner CSS et JavaScript pour créer des interactions dynamiques et améliorer l’expérience utilisateur.
La variable state dans le script JavaScript joue un rôle crucial en tant qu’indicateur de l’état actuel du thème de couleur de la page. Cette variable est utilisée pour suivre si le thème est dans son état « clair » ou « sombre ». Voici comment cela fonctionne :
- Initialisation et Suivi de l’État : Au début,
stateest initialisée à0, ce qui représente le thème clair (l’état initial défini dans le CSS). Cette valeur est utilisée pour suivre quel thème est actuellement actif. - Basculer Entre les Thèmes : Lorsque l’utilisateur clique sur le bouton pour changer les couleurs, la fonction
toggleLightest déclenchée. Cette fonction vérifie la valeur actuelle destatepour déterminer quelles actions effectuer :- Si
stateest0, cela signifie que le thème clair est actuellement actif. La fonction change alors les variables CSS pour refléter le thème sombre (par exemple, en définissant le fond en noir et le texte en blanc) et met à jourstateà1, indiquant que le thème sombre est maintenant actif. - Si
stateest1, cela indique que le thème sombre est actuellement actif. La fonction revient alors aux valeurs de couleur du thème clair et remetstateà0.
- Si
- Simplicité et Clarté : L’utilisation de
staterend le code plus simple et plus clair. Au lieu d’avoir à vérifier les valeurs actuelles des variables CSS pour décider quelle action prendre, la fonctiontoggleLightpeut simplement vérifier la valeur destate. Cela rend le code plus facile à lire, à maintenir et à déboguer.
En résumé, state agit comme un commutateur simple, permettant au script de savoir quel ensemble de couleurs appliquer à chaque clic. C’est une méthode efficace pour gérer des états alternatifs dans des interactions JavaScript.