Este código está destinado a detectar si un usuario tiene un tema de color elegido previamente, y si no, debe verificar si tiene habilitado el modo oscuro y configurar el tema correspondiente; de lo contrario, simplemente configure el tema en modo claro. Sin embargo, cuando cargo la página en modo de incógnito (por lo que no hay datos de localStorage ), no se carga el tema de color. Y cuando voy a una página con un código diferente (código con la parte localStorage pero sin matchMedia ), elijo un tema de color y vuelvo a esta página, ese tema de color tampoco aparece. Creo que puede haber un error de sintaxis simple porque el código se ve bien pero no funciona por alguna razón.
function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } (function() { if (localStorage.getItem('theme')) { setTheme(localStorage.getItem('theme')) } else { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { if (event.matches) { setTheme('theme-simple-dark') } else { setTheme('theme-simple-light') } }) } }());En línea con mis comentarios, aquí está el código reelaborado. También me sequé un poco. De nuevo, no lo he probado, puede contener errores. setTheme no ha cambiado con respecto al tuyo.
function setThemeBool(dark) { if (dark) { setTheme('theme-simple-dark'); } else { setTheme('theme-simple-light'); } } (function() { const storedTheme = localStorage.getItem('theme'); const themeQuery = window.matchMedia('(prefers-color-scheme: dark)'); // is anything stored from before? if (storedTheme) { // yes, use that setTheme(storedTheme); } else { // no, ask the browser setThemeBool(themeQuery.matches); } // regardless, from now on, if the theme changes, switch accordingly themeQuery.addEventListener('change', event => { setThemeBool(event.matches); }); }());