Vous souhaiter implémenter un mode sombre sur votre site web ? Ce tutoriel est fait pour vous !
Récemment je voulais ajouter un mode sombre sur mon site activable grâce à un bouton “switch” , mais pour cela il me fallait un système qui me permette d’utiliser cette fonctionnalité sans avoir besoin d’être connecté ni même inscrit le site, mais qui me permet quand même de sauvegarder le choix du thème.
Alors j’ai trouvé une solution de sauvegarde en local sur le navigateur, le Web Storage utilisé avec JavaScript et compatible avec tous les navigateurs les plus courants depuis 2015.
Il y a deux propriétés sessionStorage et localStorage elles s’utilisent de la même façon et se différencient seulement par la persistance de leurs données (Attention les données sauvegardées ne seront pas cryptées).
La propriété sessionStorage mémorise les données durant la session de navigation, donc une fois que l’onglet ou le navigateur est fermé, les données sont supprimées.
Tant dis ce que la propriété localStorage mémorise les données même quand le navigateur est fermé.
Dans mon cas, je souhaite sauvegarder le choix du thème que je défini par mon bouton switch, alors je vais utiliser la propriété localStorage.
Pour rappel les deux propriétés s’utilisent de la même façon, donc vous pouvez continuer à suivre ce tutoriel en utilisant la propriété sessionStorage.
Gérer des données
Stocker une donnée
Pour stocker une donnée il faut utiliser local ou sessionStorage.setItem('monTheme', 'darkmode');
Le premier argument de setItem est la clé elle ne peut être que de type String(Chaîne de caractère), elle donne un nom à l’endroit où est stockée la valeur en l'occurrence monTheme.
Le deuxième argument est tout simplement la valeur stockée, dans mon cas darkmode.
Récupérer une donnée
Pour récupérer une donnée il suffit simplement d’utiliser local ou sesssionStorage.getItem(""monTheme"");
Le seul argument de getItem est la clé défini dans le setItem, alors cela nous renverra la valeur inscrite sous la forme d'une chaîne de caractère.
Supprimer une donnée
Pour supprimer une donnée il faut utiliser local ou sessionStorage.removeItem(""monTheme"");
En indiquant la clé défini dans le setItem la valeur et sa clé sera supprimée.
Il y a aussi une façon de supprimer toutes les clés et leurs valeurs en utilisant local ou sessionStorage.clear();.
Bon maintenant voici un cas concret, comme dit plus haut pour mon site j’ai voulu intégrer un thème sombre pour cela j’ai créer une checkbox qui sera placé dans une div ayant pour class theme-switch.
<body>
<h1>Mon site</h1>
<div class=""theme-switch"">
<input type=""checkbox"" id=""switch"">
<label for=""switch"">DARKMODE</label>
</div>
</body>
Pour le CSS :
:root {
--background-color: #fff;
--background-grey-color: #fff;
--text-color: #000;
--shadow-color: 0 6px 14px rgba(96, 97, 112, 0.2);
}
[data-theme=""dark""] {
--background-color:#1c1c1e;
--background-grey-color:#323438;
--text-color: #fefefe;
--shadow-color: 0 ;
}
body {
font-family:'Montserrat';
min-height: 100%;
background-color: var(--background-color);
color: var(--text-color);
}
Puis j’ai fait ce script suivant pour enregistrer le thème quand on clique sur la checkbox
lt;script>
// Récupère le thème qui à était enregistrer
const currentTheme = localStorage.getItem(""theme"");
// Si le thème n’a pas été trouvé
if (currentTheme) {
// Cela attribut le thème sélectionné à la page
document.documentElement.setAttribute(""data-theme"", currentTheme);
// Si le thème est dark alors cela coche la case
if (currentTheme === ""dark"") {
themeToggle.checked = true;
}
}
// La fonction change le theme de la page en fonction de l’état de la checkbox
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute(""data-theme"", ""dark"");
localStorage.setItem(""theme"", ""dark"");
} else {
document.documentElement.setAttribute(""data-theme"", ""light"");
localStorage.setItem(""theme"", ""light"");
}
}Et voilà le résultat :
Par défaut le thème est en mode clair, puis quand on active la checkbox la page passe en mode sombre.