3

estoy practicando en una pagina en la cual se puede cambiar el color de esta en cuatro colores con sus respectivos botones.

 <div class="Colores">
    <button class="BtnTema" data-bg="#48b10b"></button>
    <button class="BtnTema" data-bg="#004369"></button>
    <button class="BtnTema" data-bg="#000"></button>
    <button class="BtnTema" data-bg="#350183"></button>
 </div>

Tengo el siguiente código en JavaScript el cual realiza el cambio del valor de la variable css

let root = document.querySelector(":root");

BtnColores.forEach(color=>{

    color.addEventListener("click", () =>{

        let dataColor = color.getAttribute("data-bg");

        root.style.setProperty("--mainColor", dataColor);

    })  
 })

Lo anterior funciona correctamente, lo que pasa es que quiero guardar el color elegido por el usuario con localstorage.

Tengo el siguiente codigo pero no guarda el valor.

localStorage.setItem("color", dataColor);
if(localStorage.getItem("color") == "#48b10b"){ //valor por defecto
   root.style.setProperty("--mainColor", "#004369");
   console.log("color verde: " + root.style.getPropertyValue("--mainColor"));

}else if(localStorage.getItem("color") == "#004369"){
   root.style.setProperty("--mainColor", "#004369");
   console.log("color azul: " + root.style.getPropertyValue("--mainColor"));

}else if(localStorage.getItem("color") == "#000"){
    root.style.setProperty("--mainColor", "#000");
    console.log("color negro: " + root.style.getPropertyValue("--mainColor"));

}else if(localStorage.getItem("color") == "#350183"){
     root.style.setProperty("--mainColor", "#350183");
     console.log("color morado: " + root.style.getPropertyValue("--mainColor"));
}
3
  • El código que muestras no guarda el color porque ni siquiera lo intenta, ya que lo que hace es recuperar el color que esté almacenado.
    – jachguate
    el 9 jun. 2021 a las 18:37
  • En tu código no está el elemento llamado "color". el 9 jun. 2021 a las 18:57
  • ¿De dónde sale BtnColores? La consola la coloca como no definida. Sería bueno mostrar todas las líneas de código que intervengan en tu problema. el 9 jun. 2021 a las 19:08

1 respuesta 1

2

Debes guardar el color cuando el usuario lo selecciona al hacer clic en el botón correspondiente:

let root = document.querySelector(":root");

BtnColores.forEach(color => {
    color.addEventListener("click", () => {
        let dataColor = color.getAttribute("data-bg");
        root.style.setProperty("--mainColor", dataColor);
        // Guardar color en localStorage cuando se selecciona
        localStorage.setItem("color", dataColor);
    })  
});

Al cargar la página, lees el color seleccionado, en caso de que no exista en localStorage, asignas el valor por defecto y analizas para aplicarlo:

// Leer color y almacenarlo en una variable
// Si no existe, asignar valor por defecto
let color = localStorage.getItem("color") || '#48b10b';

// Ahora usa esa variable para analizar
if(color == "#48b10b") { //valor por defecto
   root.style.setProperty("--mainColor", "#004369");
   console.log("color verde: " + root.style.getPropertyValue("--mainColor"));

} else if(color == "#004369") {
   root.style.setProperty("--mainColor", "#004369");
   console.log("color azul: " + root.style.getPropertyValue("--mainColor"));

} else if(color == "#000") {
    root.style.setProperty("--mainColor", "#000");
    console.log("color negro: " + root.style.getPropertyValue("--mainColor"));

} else if(color == "#350183") {
     root.style.setProperty("--mainColor", "#350183");
     console.log("color morado: " + root.style.getPropertyValue("--mainColor"));
}

Aunque lo ideal sería que tengas este último código dentro de una función por si necesitas aplicar los cambios de color tanto en la carga inicial como en un evento.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.