mi página web tiene una función de tema oscuro y esto se puede cambiar tocando un botón, pero quiero mantener el estado del tema después de que el usuario actualice la página. funciona como si la etiqueta del cuerpo tuviera la clase "clara", el tema es claro y cuando no tiene la clase "clara", el tema es oscuro.
Puedo establecer la propiedad de className del cuerpo en localStorage, pero el problema es que cuando actualizo la página, la lectura de className de localStorage no se establece en la etiqueta del cuerpo.
CSS:
body.light { --img-bg: url("../assets/images/bg-desktop-light.jpg"); --clr-primary: hsl(243, 12%, 30%); --clr-page-bg: hsl(0, 0%, 98%); --clr-card-bg: hsl(0, 0%, 100%); --clr-gb-1: hsl(240, 8%, 24%); --clr-gb-2: hsl(243, 12%, 30%); --clr-gb-3: hsl(252, 6%, 83%); --clr-gb-4: hsl(237, 10%, 64%); --clr-gb-5: hsl(252, 9%, 73%); --clr-gb-6: hsl(252, 21%, 94%); }j:
themeSwitcherBtn.addEventListener("click", () => { bodyTag.classList.toggle("light"); const themeArr = [ { bodyClass: bodyTag.className, }, ]; const themeClass = localStorage.setItem( "themeInfo", JSON.stringify(themeArr) ); }); window.onload = () => { const themeClass = JSON.parse(localStorage.getItem("themeInfo")) ? bodyTag.classList.add(themeClass[0].bodyClass) : bodyTag.className === ""; };El problema está en la variable themeClass. Lo estás usando antes de la inicialización. El valor de themeClass es el resultado devuelto por el operador ternario. Entonces, para que funcione aquí hay una sugerencia:
window.onload = () => { const themeClass = JSON.parse(localStorage.getItem("themeInfo")); bodyTag.className = themeClass ?themeClass[0].bodyClass : ""; };prueba esto:
const lsToken = 'hasLightTheme'; const tag = 'light'; themeSwitcherBtn.addEventListener("click", () => { localStorage.setItem(lsToken, bodyTag.classList.toggle(tag)); }); window.onload = () => { const hasLightTheme = !!localStorage.getItem(lsToken) bodyTag.classList.toggle(tag, hasLightTheme); };Eliminé el almacenamiento del tema en una matriz porque no vi ningún uso para eso. También almacené la clave localStorage y el nombre del tema en variables. He simplificado bastante la función de carga. También algunas otras simplificaciones como eliminaron la declaración de variables que nunca se usaron para nada.
tiene clase "clara", el tema es claro y cuando no tiene clase "clara" el tema es oscuro.
Esta es una buena solución si sabe que nunca tendrá más que un tema predeterminado (sin clase en el cuerpo) y un tema personalizado (claro en este caso)
Pero si prevé tener más temas en el futuro, esta solución no es buena.