0

Quiero que al pulsar el botón de la parte superior izquierda se cambie el color de lá página todas las veces que le de al botón pero en cambio cuando le doy 2 veces ya no me deja cambiar mas de color alguna solución? Estoy usando JS

  // Colors
  let defaultColor = "linear-gradient(to right, #000000 , #000000 ,#0044ff)"; // Color of the page
  let lightBgColor = "linear-gradient(to right, rgb(229, 229, 229), rgb(0, 68, 255), #04f)";
  const thmBtn = document.getElementById("changeThemeButton");

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

    // Elements that change
    let bg = document.body;
    // Change to light color 
    if (bg.style.background === "" || bg.style.background === defaultColor) {
      bg.style.background = lightBgColor;

    } else {
      bg.style.background = defaultColor;

    }
  })
body {
  background: linear-gradient(to right, #000000, #000000, #0044ff);
  margin: 0;
}

#changeThemeButton {
  font-size: 1em;
  border-radius: 50%;
  cursor: pointer;
}
<body>

  <button id="changeThemeButton">
    <i class="fas fa-adjust"></i>
  </button>

</body>

2 respuestas 2

1

El error se daba porque los colores en defaultColor estaban en hexadecimal y al agregarlos al body se convertían a rgb por lo tanto la comparación ya no funcionaba.

// Colors
  let defaultColor = "linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 68, 255))"; // Color of the page
  let lightBgColor = "linear-gradient(to right, rgb(229, 229, 229), rgb(0, 68, 255), #04f)";
  const thmBtn = document.getElementById("changeThemeButton");

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

    // Elements that change
    let bg = document.body;
    // Change to light color 
    if (bg.style.background === "" || bg.style.background === defaultColor) {
      bg.style.background = lightBgColor;

    } else {
      bg.style.background = defaultColor;

    }
  })
body {
  background: linear-gradient(to right, #000000, #000000, #0044ff);
  margin: 0;
}

#changeThemeButton {
  font-size: 1em;
  border-radius: 50%;
  cursor: pointer;
}
<body>

  <button id="changeThemeButton">
    <i class="fas fa-adjust"></i>
  </button>

</body>

1
  • Gracias por la respuesta, el problema en si no era ese, sino que en vez de utilizar background, tenía que utilizar background-color, pero aún así lo pusé en rgb y cambié los colores
    – Jorge
    el 22 jun. 2021 a las 19:20
0

document.addEventListener('DOMContentLoaded', () => {

    // Colors
    let defaultColor = "rgb(11, 11, 11)"; // Color of the page
    let lightBgColor = "rgb(242, 242, 242)"; 
    let darkColor = "rgb(11, 11, 11)";
    let lightColor = "rgb(242, 242, 242)";
    const thmBtn = document.getElementById("changeThemeButton"); 

    thmBtn.addEventListener("click", () => {
        // Elements that change
        let bg = document.body;
        
        // Change to light color 
        if (bg.style.backgroundColor === "" || bg.style.backgroundColor === defaultColor) {
             
            bg.style.backgroundColor = lightBgColor;
        }
        // Change to dark color
        else {
            bg.style.backgroundColor = defaultColor; 
        }
    })
})
#changeThemeButton {
    font-size: 1em;
    border-radius: 50%;
}

body {
    background-color: rgb(11, 11, 11);
    margin: 0;
}
<button id="changeThemeButton">
  <i class="fas fa-adjust"></i>
</button>

Tu Respuesta

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

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