He intentado crear el modo día y noche con un botón de casilla de verificación. está funcionando bien el modo predeterminado es el modo de día, pero el problema es que cuando estoy en el modo de noche, luego actualizo la página o voy a otras páginas del sitio, volverá al modo de día
JavaScript
const themeToggler = document.querySelector(".theme-toggler");
//Change Theme
themeToggler.addEventListener("click", () => {
document.body.classList.toggle("dark-theme-variables");
themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
});
Este es el comportamiento esperado, los cambios de estado realizados a través de JavaScript no se conservan entre las recargas del sitio.
Necesita algún tipo de mecanismo que almacene el modo preferido en el dispositivo del cliente.
Hasta donde sé, hay dos formas de hacerlo:
Ejemplo (de mdn) usando LocalStorage:
// Stores "Tom" in "myCat"
localStorage.setItem("myCat", "Tom");
// Retrieves whatever is in "myCat":
const cat = localStorage.getItem("myCat");
Ajustado a su caso de uso, puede hacer algo como esto:
const themeToggler = document.querySelector(".theme-toggler");
//Change Theme
themeToggler.addEventListener("click", () => {
document.body.classList.toggle("dark-theme-variables");
const is_dark_mode = document.body.classList.contains(
"dark-theme-variables"
)
// storing the user's preference in LocalStorage
window.localStorage.setItem("dark-mode", is_dark_mode)
});
Más tarde puede recuperar el valor y ajustar las clases de <body> :
const wants_dark_mode = window.localStorage.getItem("dark-mode") === true
if (wants_dark_mode) {
document.body.classList.add("dark-theme-variables")
}