Basado en el comentario de @AngelReynaTorrejon, esto podría servir:
function cambiarModo() {
var cuerpoweb = document.body;
var oscuro = cuerpoweb.classList.toggle("oscuro");
localStorage.setItem("oscuro", oscuro);
}
document.addEventListener("DOMContentLoaded", function() {
if (localStorage.getItem("oscuro")) {
cambiarModo();
}
});
El método toggle()
que ya se está usando en cambiarModo()
permite saber si la clase oscuro
se añadió al elemento (retorno true
) o si se eliminó del elemento (retorno false
). Así que este valor de retorno se puede almacenar en el almacenamiento local a través de la propiedad localStorage. Esta propiedad permite acceder a un objeto que tiene, entre otros, dos métodos útiles en este caso: setItem()
y getItem()
.
Al llamar localStorage.setItem("oscuro", oscuro)
en cambiarModo()
se está guardando un valor true
o false
en el ítem oscuro
del almacenamiento local para saber si el modo es oscuro o no, respectivamente. Los valores almacenados en el almacenamiento local permanecen almacenados y se pueden consultar incluso si la página se refresca.
Para cambiar el modo cuando la página se carga, en caso de que sea necesario, se puede usar el evento DOMContentLoaded y registrar una función que sea llamada cuando este evento ocurra. En esta función se puede consultar el valor del ítem oscuro
en el almacenamiento local a través de localStorage.getItem("oscuro")
. Si el valor obtenido es true
significa que se había cambiado a modo oscuro y para mantener esto se puede llamar nuevamente a cambiarModo()
.