He escrito un código que en lugar de incorporar un modo claro/oscuro, incorpora un modo primavera/verano/otoño/invierno. Aquí hay un ejemplo de una temporada:
const springThemeOn = sessionStorage.getItem("springtheme") if (springThemeOn==="true"){ document.body.className = "spring-theme"; spring.classList.add('hide-icon'); summer.classList.remove('hide-icon'); autumn.classList.remove('hide-icon'); winter.classList.remove('hide-icon'); } //spring change springIcon.addEventListener('click', () => { document.body.classList.toggle('spring-theme'); spring.classList.toggle('show-icon'); summer.classList.toggle('show-icon'); autumn.classList.toggle('show-icon'); winter.classList.toggle('show-icon'); // Store toggle info between pages if (document.body.className.includes("spring-theme")){ // Currently in spring mode sessionStorage.setItem("spring-theme", "true") } else { // Currently in other mode sessionStorage.setItem("spring-theme", "false") } }) Imagina esto con las cuatro estaciones. El código funciona, pero cuando hago clic en cada ícono respectivamente, cada uno se agrega a la clase de cuerpo de la siguiente manera: <body class="b-page spring-theme summer-theme autumn-theme winter-theme"> y solo muestra el último clic en el modo.
Quiero poder cambiar entre los cuatro íconos y no tener que hacer clic en activar/desactivar cada ícono para agregarlos/eliminarlos del cuerpo de la clase. No quiero que se acumulen en el cuerpo de la clase. ¿Hay una solución para esto? ¡Gracias!
En lugar de tener un elemento de almacenamiento para cada tema, haga que todos compartan un único elemento de almacenamiento.
const theme = sessionStorage.getItem("theme"); if (theme === 'spring') { // ... } else if (theme === 'summer') { // ... } // etcY en el oyente de clics, algo como:
if (document.body.className.includes("spring-theme")){ sessionStorage.setItem('theme', ''); // remove any existing themes } else { sessionStorage.setItem('theme', 'spring'); // add it }De esta manera, no habrá colisiones.