Switcher le contraste de votre site-web est devenu courant sur la toile. Je vous montre ici comment faire avec Javascript, puisqu’il s’agit d’une action réalisée par l’utilisateur. Mais on pourrait aller plus loin en regardant si ce dernier n’a pas mémorisé son choix lors de ses visites précédentes, ou en fonction de l’heure de la journée … Je passe ici en revue les différents cas de figure auxquels j’ai déjà été confrontés
Vous trouverez mon codePen ci-dessous pour savoir de quoi il s’agit.
Alors comment procéder pour switcher de thème dark/light ?
Le mieux est comme toujours, de prévoir le coup dès le début du projet. Comme il s’agit de changer le style de votre site-web, vous allez devoir prévoir son thème « dark », c’est-à-dire un style moins fatiguant pour les yeux et les écrans, et qui permettra à vos visiteurs de parcourir vos pages aux petites heures de la nuit ! Blague à part, il ne s’agit pas simplement d’inverser les couleurs, mais de prévoir pour chaque couleur utilisée, son oméga ou son style plus sombre tout en respectant le style graphique que vous aviez choisi au départ (dégradés, aplats, svg etc.)
Les variables CSS
En fait, il s’agira de modifier les variables CSS selon le style choisi par votre visiteur. Pour ce faire, quoi de plus naturel que de passer par la balise structurant le corps de votre site nommée « <body>« . C’est ce que j’ai fait dans mon exemple. Vous y allez définir le style par défaut. Dans mon cas, c’est « dark ». Pourquoi faire comme ceci ? Parce que vous allez pouvoir ensuite modifier cette valeur en fonction de l’heure de la journée par exemple ou en fonction du choix utilisé par une extension tierce. Le javascript fait le reste :
Explication du code
À la ligne 16, je commence à réaliser l’action du clique sur le bouton qui permettra de changer de thème.
Par la suite, (ligne 18), je regarde quel est le thème actif. En fonction de ce dernier, je change de thème et change la variable « currentTheme » afin de permuter de thème quand bon me semble. Rien de très compliquer à ce que je vous ai déjà montré ici. Ce qui est intéressant, c’est ce qui se passe à la ligne 1 au final. En effet, je regarde ici si les préférences de couleurs par défaut, et je regarde si cela coïncide avec mon thème par défaut à moi : « dark » (ou l’heure de la journée : lire plus loin)
Et le css ?
Le CSS fait la moitié du travail. Puisque c’est ici qu’on va changer les valeurs des variables définissant les couleurs. En fonction de ce qui se passe dans l’attribut rattaché « body » et nommé « data-theme », les couleurs vont permuter. Sachez que le CSS prévoit le coup. En effet, il existe une balise spéciale à placer entre les balises « head pour charger le style. Comme ceci par exemple :
<meta name="theme-color" content="#4285f4" />Dans mon exemple sur Codepen, ce n’est pas ce que je fais, je change simplement la valeur des variables en fonction de l’élément parent changé par l’utilisateur.
Et comment changer le thème par défaut en fonction de l’heure de la journée ?
Vous pourriez le faire au chargement de la page en PHP par exemple sous WordPress.
Mais restons avec Javascript qui sera sans doute le langage de demain. Je réalise tout cela à partir de la ligne 25 de mon code.
Et comment garder en mémoire le choix de l’utilisateur ?
En fait vous pouvez le faire avec Javascript et surtout à l’aide de votre navigateur.
En effet, c’est avec la fonction localeStorage.getIitem(« dark-mode ») que vous allez pouvoir aller chercher la variable précédemment capturée. Elle est liée au navigateur car si vous changez de navigateur, vous n’aurez pas le même choix de couleur choisi en amont. Intéressant, n’est-ce pas ?
Conclusion
Comme vous pouvez le voir, Javascript opère très facilement le changement de mode de votre site-web, ayant même prévu le coup côté navigateur. Mais c’est à vous en tant que web designer de choisir les styles qui permuteront, tout en restant dans la même ambiance validée au départ lors de la mise en route de votre projet web.
