Enregistrer le choix du thème

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 17 sur 27.

Lorsque les utilisateurs passent d’un thème clair à un thème sombre, nous voulons que le site Web se souvienne de leur choix.
Pour cela, nous utilisons localStorage en JavaScript. Il stocke des données dans le navigateur, et ces données sont conservées même après l’actualisation de la page ou la fermeture du navigateur.

La logique est la suivante :

Lorsque l’utilisateur change de thème, enregistrer le thème actuel dans localStorage.
Au chargement de la page, vérifier localStorage et appliquer automatiquement le thème enregistré.

HTML :

<button id="themeToggle">Toggle Theme</button>

CSS :

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Ce code vérifie si l’utilisateur a précédemment enregistré un thème sombre dans localStorage et l’applique au chargement de la page.

Lorsque le bouton est cliqué, il active ou désactive le mode sombre sur la page, puis met à jour localStorage afin que la préférence soit mémorisée pour la prochaine visite

const button = document.getElementById("themeToggle");

// Appliquer le thème enregistré au chargement de la page
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Enregistrer la préférence
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Cela garantit que la préférence de l’utilisateur est conservée d’une visite à l’autre sur votre site.

Défi

Facile

Créez un bouton de changement de thème qui mémorise les préférences de l’utilisateur.

Étapes :

Au chargement de la page : Vérifiez si l’utilisateur a précédemment sélectionné le mode sombre
1. Si "dark" est enregistré dans localStorage, ajoutez la classe "dark-mode" à l’élément body
Lorsque l’on clique sur le bouton de changement : Basculez entre les thèmes clair et sombre
1. Basculez la classe "dark-mode" sur l’élément body
2. Enregistrez le thème actuel dans localStorage

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>