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>