Estoy tratando de usar localStorage para mantener mi tema consistente con los cambios de página, pero parece que no puedo hacerlo funcionar.
Así es como se ve mi html:
<body onload="checkLightMode()"> <li><button class="mode-toggle"><i class="fas fa-sun fa-2x"></i></button></li>También hay un segundo botón duplicado para la navegación móvil.
Y el JavaScript:
const button = document.querySelectorAll('.mode-toggle') button.addEventListener('click', function () { localStorage.setItem('light-mode', true) if (localStorage.getItem('light-mode')) { document.body.classList.toggle('light-mode') document.querySelectorAll('.fa-sun').forEach(icon => icon.classList.toggle('fa-moon')) } else { document.body.classList.remove('light-mode') localStorage.setItem('light-mode', false) } }) function checkLightMode() { if (localStorage.getItem('light-mode')) { body.classList.add('light-mode') } }No puedo usar el almacenamiento local en el fragmento de código de sandbox, así que lo hice con variable, debería ser el mismo concepto.
const button = document.querySelector('.mode-toggle') var isTrueSet = (value) => value === 'true'; let lightMode = false; button.addEventListener('click', function () { const v = localStorage.getItem('light-mode'); if (!lightMode) { // change to (!v && !isTrueSet(v)) document.body.classList.add('light-mode') lightMode = true } else { lightMode = false document.body.classList.remove('light-mode') } }) function checkLightMode() { const v = localStorage.getItem('light-mode'); if (lightMode) { // (!v && !isTrueSet(v)) body.classList.add('light-mode') } } body { background-color: #000; width: 100%; height: 100%; } .light-mode { background-color: #fff; } <div id="one" onload="checkLightMode()"> <li><button class="mode-toggle">mode</button></li> </div>Creo un archivo state.js, que será el primer módulo que se cargue. (Siguiendo metodología angular).
Ahí pongo todas las variables globales. Creo que es fácil de manejar y se adapta a tus necesidades.
let lightMode = false; const button = document.querySelector('.mode-toggle') button.addEventListener('click', function () { if (!lightMode) { document.body.classList.add('light-mode') lightMode = true } else { lightMode = false document.body.classList.remove('light-mode') } }) function checkLightMode() { if (lightMode) { body.classList.add('light-mode') } }Con este método, crearía esta variable más de una vez, permanece en un archivo organizado y es fácil de mantener.