Sergio Yael Alvarado
Desarrollador Web
Cómo hacer un Modo Oscuro con Javascript y LocalStorage?
En esta ocasión mostraré cómo hacer un modo oscuro con Javascript básico, solo son las bases para poder adaptarlo a otros proyectos.
Simplemente obtuve el botón y el body del HTML con getElementByID para posteriormente usar addEventListener y agregar classList para alternar las clases CSS usando classList.remove y classList.add para modificar el body. Luego con localStorage guardé los valores y luego hice una validación para obtener los valores y aplicar el estilo previamente almacenado. Respecto al CSS usé variables para facilitar el cambio entre el tema claro y oscuro.
El código también está en mi GITHUB
Adjunto ejemplo funcional en codepen.io:
See the Pen Easy Dark Mode with Pure Javascript by Sergio Yael (@sergioyael) on CodePen.