Comment passer votre site en mode sombre avec le JavaScript

Vous souhaiter implémenter un mode sombre sur votre site web ? Ce tutoriel est fait pour vous !

Par Tom  |   04/09/2021 - 13:52

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&gt;
// R&eacute;cup&egrave;re le th&egrave;me qui &agrave; &eacute;tait enregistrer
const currentTheme = localStorage.getItem("theme");

// Si le th&egrave;me n&rsquo;a pas &eacute;t&eacute; trouv&eacute;
if (currentTheme) {
  // Cela attribut le th&egrave;me s&eacute;lectionn&eacute; &agrave; la page
  document.documentElement.setAttribute("data-theme", currentTheme);

  // Si le th&egrave;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&rsquo;&eacute;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.


4 Commentaires
Akw3l  le 20/09/2021 - 18:55
Super tutoriel, ça pourras je pense m'aidez dans le futur :D

 Membre   |  Jeune apprenti dans l'informatique, je développe en plusieurs code comme : JS, C# (vite fait), Glua à 13 ans :) !

Tom : Merci pour ton retour Axel :D

 Administrateur  |  Apprenti Technicien Informatique  20/09/2021 - 19:38


valo  le 20/09/2021 - 19:27
Super tuto bravo

 Membre   |  

Tom : Merci :)

 Administrateur  |  Apprenti Technicien Informatique  20/09/2021 - 19:38


Vous devez être connecté pour écrire un commentaire ou une réponse