0

Saludos tengo esté codigo que hace un toogle de clase en toda la página entre tema claro o oscuro, como podría agregar un localstorage para mantener esa clase al refrescar, gracias

const themeBtn = document.querySelectorAll('.theme-btn');

for (let i = 0; i < themeBtn.length; i++) {

  themeBtn[i].addEventListener('click', function () {

    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    for (let i = 0; i < themeBtn.length; i++) {

      themeBtn[i].classList.toggle('light');
      themeBtn[i].classList.toggle('dark');

    }

  })

}

html

<div class="light-theme"></div>

gracias de antemano

1
  • 1
    En esta respuesta tienes algo parecido a lo que quieres. Extrapola el código de allí para adaptarlo al tuyo y si tienes problemas edita la pregunta con lo que hayas hecho y el problema que tengas para que podamos ayudarte (o quizás en esta otra respuesta sea más facil de ver)
    – masterguru
    Commented el 2 jul. 2022 a las 3:59

1 respuesta 1

1

localstorage es muy simple de usar, solo asignarlo a una variable y válidas su resultado

    document.addEventListener('click',function(e){
          if(e.target.classList.contains('light-theme'){
            localstorage.setItem('theme','light');
          }
       
 if(e.target.classList.contains('dark-theme'){
            localstorage.setItem('theme','dark');
          }
        }

Y para implementarlo solo lo llamas

const theme = localstorage.getItem('theme');
6
  • ¿y que ocurre cuando aún no se ha definido por primera vez? Es decir, cuando aun no se ha pulsado nunca el botón esa constante dará error porque no está definida en el localStorage aún tal como lo has puesto en tu respuesta
    – masterguru
    Commented el 2 jul. 2022 a las 4:13
  • Puedes definir un tema base o preguntar al principio de la página si if(theme) y si ya existe la implementa
    – hejevero
    Commented el 2 jul. 2022 a las 4:25
  • Si no existe ese ítem en localstorage solo veras un error por consola
    – hejevero
    Commented el 2 jul. 2022 a las 4:26
  • Te lo decia para que mejoraras la respuesta, pues será lo siguiente que te va a preguntar el OP. No lo decia porque no lo supiera :-)
    – masterguru
    Commented el 2 jul. 2022 a las 4:28
  • Ha vale pensé que eras la persona del post xD, estoy desde el cel ahora y modificare la respuesta gracias por el dato
    – hejevero
    Commented el 2 jul. 2022 a las 4:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.