JavaScript — localStorage et mode sombre
Stockage local et toggle de thème avec sauvegarde
Concepts Théoriques
Le localStorage est un espace de stockage dans le navigateur qui persiste même après la fermeture de l'onglet ou du navigateur. Chaque site a son propre espace — un site ne peut pas lire le localStorage d'un autre. C'est l'outil idéal pour sauvegarder des préférences utilisateur comme le mode sombre.
L'API localStorage
4 méthodes, c'est tout :
- localStorage.setItem('theme', 'dark') — sauvegarder une valeur
- localStorage.getItem('theme') — lire une valeur (retourne la string ou null si la clé n'existe pas)
- localStorage.removeItem('theme') — supprimer une clé
- localStorage.clear() — tout supprimer pour ce site
Limitation importante : localStorage ne stocke que des strings. Pour stocker un objet ou un tableau, convertissez en JSON :
Pour sauvegarder : localStorage.setItem('settings', JSON.stringify(monObjet)); Pour lire : const settings = JSON.parse(localStorage.getItem('settings'));
Vous pouvez inspecter le localStorage dans les DevTools : F12 > onglet Application > Local Storage > votre domaine. Vous y verrez toutes les clés/valeurs et pouvez les modifier ou supprimer manuellement.
Le mode sombre — comment ça fonctionne
Le principe est simple : basculer un attribut data-theme="dark" ou data-theme="light" sur <html> qui change les variables CSS. Tout le site change d'un coup parce que TOUS les styles utilisent les variables.
Quand data-theme="light" est présent, le sélecteur CSS [data-theme="light"] prend le dessus et remplace les valeurs des variables par les couleurs claires.
Le cycle complet du mode sombre
- Au chargement : vérifier si une préférence est sauvegardée dans localStorage
- Si aucune préférence : respecter la préférence système (window.matchMedia)
- Au clic sur le toggle : basculer le thème et sauvegarder
- Au prochain chargement : appliquer la préférence sauvegardée
La préférence système
Les OS modernes ont un réglage clair/sombre. JavaScript le détecte avec : window.matchMedia('(prefers-color-scheme: dark)').matches — retourne true ou false.
> Bonne pratique : Respectez TOUJOURS la préférence système au premier chargement. Le toggle permet ensuite de l'overrider, et le localStorage sauvegarde ce choix.