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)

Salut,

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

_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 ?

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 ?

var cat = localStorage.getItem('myCat');

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

_laurent a écrit :

var cat = localStorage.getItem('myCat');

https://developer.mozilla.org/fr/docs/Web/API/Window/localStorage

Un truc comme ça ?

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

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

Alors, je me trompe peut être mais j'ai l'impression que tu ne sais pas trop ce que tu écris

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');
  }