Estoy tratando de implementar un código para hacer un cambio de modo oscuro para mi sitio web. Estoy atascado cambiando el valor de los botones al valor guardado en el almacenamiento local. Si carga el valor, no se puede cambiar a través del botón más tarde y si lo elimino, necesito hacer clic en el botón dos veces en la carga para que cambie el valor inicial incorrecto. No recibo mensajes de error y no sé cómo avanzar.

mi Javascript

 function darkmode() { theme = document.getElementById("themebutton"); if (theme.value == "Dark") { theme.value = "Light"; document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("saved", "light"); } else if (theme.value == "Light") { theme.value = "Dark"; document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("saved", "dark"); } function buttonvalue() { document.getElementById("themebutton").value = saved; } buttonvalue(); window.onload = (event) => { if (!localStorage.getItem("saved")) { populateStorage(); } else { setStyles(); } }; function populateStorage() { localStorage.setItem("saved", "light"); setStyles(); } function setStyles() { document.documentElement.setAttribute("data-theme", saved); }

mi boton

 <button type="button" id="themebutton" value="Light" onclick="darkmode();"> dark mode </button>

¡Gracias por adelantado!