0

Buenas tengo este problema, cuando estoy queriendo ejecutar este codigo de dark mode, se guarda

perfectamente en el localstorage y el light mode funciona correctamente si saco el codigo por

fuera, osea remueve las clases el problema es cuando esta dentro de la funcion que evalua si

contiene o no ese atributo como referencia para poder ejecutar la funcion correcta,

lo estaba intentando hacer con toggle pero no se me ocurria como hacerlo, crei que de esta manera

era mas facil pero se me complico

en que me estoy equivocando?

let galeria = document.querySelectorAll('.container')
let nav = document.querySelector('.navegador')
let cambiarModo = document.querySelector('.cambiar-modo')
let info = document.querySelector('.conteiner-info')
let subMenu = document.querySelectorAll('.enlaces')
let sombraSlid = document.querySelector('.contslider')
let impresora = document.querySelector('.impresora')
let body = document.body;

let DarkMode = () => {
  cambiarModo.classList.add('move-circle')
  cambiarModo.style.transition = 'all .5s'
  body.classList.add('color-body')
  body.style.transition = 'all .5s'
  nav.classList.add('nav-color')
  nav.style.transition = 'all .5s'
  sombraSlid.classList.add('slider-shadow')
  sombraSlid.style.transition = 'all .5s'
  info.classList.add('info-color')
  info.classList.add('info-borde')
  info.style.transition = 'all .5s'
  impresora.classList.add('shadow-impresora')
  impresora.style.transition = 'all 1s'
  subMenu.forEach(e => {
    e.classList.add('enlaces-color')
  })
  galeria.forEach(e => {
    e.classList.add('shadow-image')
    e.style.transition = '1s'
  });
  localStorage.setItem('theme' , 'dark')
  }

let LightMode = () => {
  cambiarModo.classList.remove('move-circle')
  cambiarModo.style.transition = 'all .5s'
  body.classList.remove('color-body')
  body.style.transition = 'all .5s'
  nav.classList.remove('nav-color')
  nav.style.transition = 'all .5s'
  sombraSlid.classList.remove('slider-shadow')
  sombraSlid.style.transition = 'all .5s'
  info.classList.remove('info-color')
  info.classList.remove('info-borde')
  info.style.transition = 'all .5s'
  impresora.classList.remove('shadow-impresora')
  impresora.style.transition = 'all 1s'
  subMenu.forEach(e => {
     e.classList.remove('enlaces-color')
  })
  galeria.forEach(e => {
    e.classList.remove('shadow-image')
    e.style.transition = '1s'
  });
  localStorage.setItem('theme' , 'light')
  }

 //--------------call---------------------------------------=>

cambiarModo.addEventListener('click' , () => {
    if(cambiarModo.hasAttribute('move-circle') === false)(
      DarkMode()
    )
    if(cambiarModo.hasAttribute('move-circle') === true)(
      LightMode()
    )


window.addEventListener('DOMContentLoaded' , () => {
  if(localStorage.getItem('theme') === null)
      localStorage.setItem('theme','dark')

  if(localStorage.getItem('theme') === 'light')(
        LightMode()
    )
    
  if(localStorage.getItem('theme') === 'dark')(
     DarkMode()
  )

})
2
  • A mi me da un error de sintaxis en el addEventListener del click, pues no pones la llave y el paréntesis de cierre correctamente antes del window.addEventListener. Soluciona eso y dinos si aun te da errores, y cuales son, porque en tu pregunta no he sabido entender que problema te da. Usa jsfiddle.net para descubrir esos errores de sintaxis facilmente, como yo he hecho.
    – masterguru
    Commented el 10 mar. 2022 a las 6:16
  • quizas no copie el codigo correctamente pero ami no me da errores, igualmente ya lo solucione gracias Commented el 11 mar. 2022 a las 18:37

1 respuesta 1

0

Bueno logre hacer una pequeña solucion, que fue agregando unos return, pero solamente puedo cambiar 1 o 2 veces el modo nuevamente, si a alguno le sirve le dejo aca voy a seguir probando igualmente

if(cambiarModo.classList.contains('dark-mode'))
return(
    LightMode()
)
if(cambiarModo.classList.contains('light-mode'))
return(
    DarkMode()
)

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.