He estado trabajando en este código durante horas y sigo encontrando una variedad de problemas, por lo que la cantidad de veces que he editado y probado diferentes formas de codificar esto es mucha. Básicamente, estoy tratando de crear un conmutador de tema de 3 (o más) colores usando botones de opción. Se supone que debe agregar una clase, según la que se haya seleccionado, a la etiqueta del cuerpo para que pueda usar css y variables para cambiar el estilo.

Lo conseguí para agregar la clase a la etiqueta del cuerpo, pero al recargar, no mantendrá la clase. Sigo leyendo sobre localStorage, así que intenté agregarlo, pero nunca lo había usado antes, así que no sé si las varias formas que he probado son simplemente... incorrectas o si simplemente no funcionan. con lo que estoy tratando de hacer.

Solo puedo usar JavaScript y/o JQuery. Esto es lo que tengo actualmente.

HTML

 <input name="theme" type="radio" aria-label="Light" id="light" value="light"> <label for="light">Light</label> <input name="theme" type="radio" aria-label="Medium" id="medium" value="medium"> <label for="medium">Medium</label> <input name="theme" type="radio" aria-label="Dark" id="dark" value="dark"> <label for="dark">Dark</label>

GUION

 jQuery(window).on("load", function() { $("#light").click(function(){ $("body").removeClass("medium"); $("body").removeClass("dark"); $("body").addClass("light"); localStorage.ClassName = "light"; }); $("#medium").click(function() { $("body").removeClass("light"); $("body").removeClass("dark"); $("body").addClass("medium"); localStorage.ClassName = "medium"; }); $("#dark").click(function() { $("body").removeClass("light"); $("body").removeClass("medium"); $("body").addClass("dark"); localStorage.ClassName = "dark"; }); });

También, para tener en cuenta, probé las secciones individuales (con sus nombres de clase relevantes) como

 $("#dark").click(function() { $("body").removeClass("light"); $("body").removeClass("medium"); $("body").addClass(localStorage.getItem('dark')); });