11528 sujets

JavaScript, DOM et API Web HTML5

Comment faire un localstorage sur un bouton pour le darmode ?

Bonjour j'ai un bouton qui change la classe dark sur mon site et je voudrais quand je recharge la page de mon navigateur que je puisse garder le thème darkmode actif dans le navigateur 

const chk = document.getElementById('chk');

  chk.addEventListener('change', () => {
    document.body.classList.toggle('dark');
    localStorage.setItem('dark', 'chk');
    
  });


En vous remerciant
Modifié par julios123 (25 Apr 2022 - 11:50)
_laurent a écrit :
Salut,

Il te manque juste de récupérer ton item et faire un if dessus.


Bonjour merci beaucoup pour votre réponse si je comprends bien l'item c'est le toggle qui gère l'activation du darkmode sur le site ?
Modérateur
Non la je parlais de l'item du local storage :

localStorage.setItem('dark', 'chk');


En gros quand tu clic ca set l'item c'est tres bien. Maintenant il suffit juste de faire un get item au chargement de ta page. Et s'il existe tu met le dark theme direct.
_laurent a écrit :
Non la je parlais de l'item du local storage :

localStorage.setItem('dark', 'chk');


En gros quand tu clic ca set l'item c'est tres bien. Maintenant il suffit juste de faire un get item au chargement de ta page. Et s'il existe tu met le dark theme direct.


Comment ça un get item au chargement de la page ?
Modérateur
Alors, je me trompe peut être mais j'ai l'impression que tu ne sais pas trop ce que tu écris Smiley lol

Tout ce qui va etre dans :
chk.addEventListener('change', () => {

  });

ne s'exécutera qu'au "change" de l'élément #chk. Dedans tu fais un setItem pour ton local storage pour enregistrer le fait que tu passe au dark theme c'est très bien.

Mais, ce que tu veux faire c'est qu'en arrivant sur la page ton code récupère ton localStorage "dark" et fasse un if sur cette valeur. Si il existe alors c'est que tu avais enregistré le choix donc tu peux directement appliquer le darktheme
c'est bon ça marche 


  const chk = document.getElementById('chk');

  chk.addEventListener('change', () => {
    document.body.classList.toggle('dark');
    localStorage.darkMode=!localStorage.darkMode;
  });
  window.onload=function() {
    if(localStorage.darkMode) document.body.classList.toggle('dark');
  }
Sujet clos
Aller à