Enregistrer le choix du thème

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

Lorsque les utilisateurs basculent entre les thèmes clair et sombre, nous voulons que le site web se souvienne de leur choix.
Pour cela, nous utilisons <strong>localStorage</strong> en JavaScript. Il stocke les données dans le navigateur, et ces données subsistent même après le rafraîchissement de la page ou la fermeture du navigateur.

La logique est la suivante :

Lorsque l'utilisateur change de thème, enregistrez le thème actuel dans localStorage.
Lorsque la page se charge, vérifiez localStorage et appliquez 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 lors du chargement de la page.

Lorsque le bouton est cliqué, il bascule 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 lors de ses visites sur votre site.

Défi

Facile

Créez un sélecteur de thème qui mémorise la préférence 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" au body
Lorsque le bouton de bascule est cliqué : 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>