Como puede ver, lo almaceno en localStorage, funciona bien. El problema surge cuando vuelvo a cargar la página, se restablece al tema principal (oscuro).
let lightMode = localStorage.getItem("theme") const lightModeToggle = document.querySelector(".moon-white"); const enableLightMode = () => { document.body.classList.add("light-theme"); localStorage.setItem("theme", "enabled"); }; const disableLightMode = () => { document.body.classList.remove("light-theme"); localStorage.setItem("theme", null); }; lightModeToggle.addEventListener("click", () => { lightMode = localStorage.getItem("theme"); if (lightMode !== 'enabled') { enableLightMode(); } else { disableLightMode (); } });Creo que te falta document.onload listener para leer el tema actual de localStorage y luego configurarlo en el documento cuando se carga en DOM.
let lightMode = localStorage.getItem("theme") const lightModeToggle = document.querySelector(".moon-white"); const enableLightMode = () => { document.body.classList.add("light-theme"); localStorage.setItem("theme", "enabled"); }; const disableLightMode = () => { document.body.classList.remove("light-theme"); localStorage.setItem("theme", null); }; lightModeToggle.addEventListener("click", () => { lightMode = localStorage.getItem("theme"); if (lightMode !== 'enabled') { enableLightMode(); } else { disableLightMode(); } }); document.addEventListener("load", () => { if (lightMode === 'enabled') { enableLightMode(); } else { disableLightMode(); } }); Actualización: ¡Use onload para load evento!
Funciona, pero en lugar de usar document.addEventListener("onload", () => , usé:
window.addEventListener('load', (event) => { lightMode = localStorage.getItem("theme"); if (lightMode === 'enabled') { enableLightMode(); } else { disableLightMode(); } });