Tengo un proyecto básico de Astro en el que estoy usando HTML, CSS y JS estándar. Estoy tratando de habilitar la capacidad de alternar el modo oscuro. Tengo un archivo global.css con estilos raíz:

 * { box-sizing: border-box; margin: 0; } :root { --primary: white; --text: black; } .darkmode { --primary: black; --text: white; }

Luego tengo un componente de botón:

 <button class="darkmode-toggle" aria-pressed="false">Enable Dark Mode</button> <script> let darkmode = localStorage.getItem('darkmode'); const systemPrefs = window.matchMedia('(prefers-color-scheme: dark)').matches; const darkmodeToggle = document.querySelector('.darkmode-toggle'); const enableDarkmode = () => { document.documentElement.classList.add('darkmode'); darkmodeToggle.textContent = 'Disable Dark Mode'; darkmodeToggle.setAttribute('aria-pressed', 'true'); localStorage.setItem('darkmode', 'enabled') } const disableDarkmode = () => { document.documentElement.classList.remove('darkmode') darkmodeToggle.textContent = 'Enable Dark Mode' darkmodeToggle.setAttribute('aria-pressed', 'false') localStorage.setItem('darkmode', null) } if (darkmode === 'enabled' || systemPrefs) enableDarkmode() darkmodeToggle.addEventListener('click', _ => { darkmode = localStorage.getItem('darkmode') darkmode !== 'enabled' ? enableDarkmode() : disableDarkmode() }) </script>

Esta implementación funciona y podrá verla desde este CodeSandbox. Este problema que tengo es que cuando la página se actualiza, el color vuelve al valor predeterminado.

Supongo que esto generalmente se soluciona usando localStorage, lo cual me hace pensar que hay algo mal en mi implementación. ¿Dónde estoy haciendo un mal uso de localStorage?