Estoy tratando de usar un selector de temas que agrega un nombre de clase "oscuro" al elemento HTML.
como: <html class="dark">
Quiero guardar el nombre de la clase en localStorage para que sea coherente incluso después de recargar la página.
Aquí está mi JS
(function () { window.__onThemeChange = function () { }; function setTheme(newTheme) { window.__theme = newTheme; preferredTheme = newTheme; document.documentElement.setAttribute('class', newTheme); window.__onThemeChange(newTheme); } var preferredTheme; try { preferredTheme = localStorage.getItem('theme'); } catch (err) { } window.__setPreferredTheme = function (newTheme) { setTheme(newTheme); try { localStorage.setItem('theme', newTheme); } catch (err) { } } var darkQuery = window.matchMedia('(prefers-color-scheme: light)'); darkQuery.addListener(function (e) { window.__setPreferredTheme(e.matches ? 'light' : 'dark'); }); setTheme(preferredTheme || (darkQuery.matches ? 'light' : 'dark')); })(); ¿Alguna idea de cómo guardar correctamente la class="dark" en localStorage?
Lo que estoy viendo aquí es que en la función __setPreferredTheme estás encadenando un valor 'claro' u 'oscuro' y luego analizando este valor en la variable preferedTheme, lo que provoca un error porque estás analizando una cadena. Debería poder simplemente pasar el valor de la clase en la función sin usar parse o stringify.