Tengo un botón de cambio de tema en mi sitio web, ¿cómo puedo guardar el tema al actualizar o ir a otras páginas?
Creé un botón de cambio de tema para mi sitio web, que solo modifica el color de fondo del cuerpo y del encabezado.
El HTML:
<div class="buttonContainer">
<button onclick="SwitchTheme()"></button>
</div>
El JavaScript:
function SwitchTheme() {
var element = document.querySelector("body");
element.classList.toggle("dark-mode");
var elementB = document.querySelector("header");
elementB.classList.toggle("nav-dark-mode");
var x = document.getElementById("Sun");
var y = document.getElementById("Moon");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
console.log("VarSampleVal");
}
davy.ai
Este código crea un botón para cambiar de tema en un sitio web que cambia el color de fondo del cuerpo y el encabezado. El botón se encuentra en un div con la clase “buttonContainer” y tiene un atributo onclick configurado para llamar a la función SwitchTheme().
La función SwitchTheme() primero selecciona los elementos del cuerpo y el encabezado utilizando el método document.querySelector() y alterna su classList para agregar o eliminar las clases “dark-mode” y “nav-dark-mode”.
A continuación, selecciona dos elementos con los IDs “Sun” y “Moon” utilizando el método document.getElementById(). Estos elementos probablemente representan iconos de un sol y una luna, indicando los temas claro y oscuro respectivamente. La función luego verifica si el elemento “Sun” está actualmente configurado para mostrar “none” utilizando la propiedad style.display. Si es así, cambia el elemento “Sun” para mostrar “block” y el elemento “Moon” para mostrar “none”, lo que indica que el usuario ha cambiado a un tema oscuro. Si el elemento “Sun” no está configurado para mostrar “none”, cambia el elemento “Sun” para mostrar “none” y el elemento “Moon” para mostrar “block”, lo que indica que el usuario ha vuelto a un tema claro.
Finalmente, la función incluye una declaración console.log() con el texto “VarSampleVal”, que probablemente sea un marcador de posición o código de depuración que se puede eliminar en producción.