es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Para mantener la casilla de verificación marcada una vez que se ha marcado mientras se navega por todo el sitio web.

Para mantener la casilla de verificación marcada una vez que se ha marcado mientras se navega por todo el sitio web.

28 Jul, 2023 Programación

Estoy utilizando el checkbox para alternar entre los colores del tema oscuro y negro utilizando HTML, CSS y JS. Tengo este código dentro de mi barra de navegación. Funciona bien. Pero una vez que se actualiza o se cambia a otras páginas dentro del sitio web, ya no se mantiene oscuro.

<div>
  <input type="checkbox" class="checkbox" id="chk">
  <label class="label" for="chk">
    <i class="fas fa-moon"></i>
    <i class="fas fa-sun"></i>
    <div class="ball"></div>
   </label>
</div>

Alguien sugirió el concepto de usar el almacenamiento local y probé esto, pero no funciona.

const chk = document.getElementById('chk');

chk.addEventListener('change', () => {
    document.body.classList.toggle('dark');
});

// for checkbox remained checked
document.getElementById('chk').addEventListener('load', function(){
    var test = localStorage.input === 'true'? true: false;
    document.getElementById('chk').checked = test || false;
});

document.getElementById('chk').addEventListener('change', function() {
    localStorage.input = document.getElementById('chk').checked;
    console.log(document.getElementById('chk').checked);
});

Por favor, alguien ayúdeme.

PD: No soy un desarrollador web. Utilizo HTML y CSS de aquí y allá para mi blog. Estoy utilizando GitHub Pages para alojar mi sitio web. https://amatya-aditya.github.io/

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para guardar la preferencia de color del tema del usuario incluso después de recargar la página o navegar, puedes utilizar el almacenamiento local del navegador. Aquí tienes un fragmento de código modificado que debería funcionar:

    const chk = document.getElementById('chk');

// Función para establecer el color del tema basado en el estado del checkbox en el almacenamiento local
function setThemeFromCheckbox() {
  const isDarkTheme = localStorage.getItem('isDarkTheme') === 'true';

  // Establecer el estado del checkbox
  chk.checked = isDarkTheme;

  // Establecer el tema basado en el estado del checkbox
  document.body.classList.toggle('dark', isDarkTheme);
}

// Llamar a la función una vez al cargar la página
setThemeFromCheckbox();

// Añadir un event listener para el cambio del checkbox
chk.addEventListener('change', () => {
  // Actualizar la clase del body y guardar el estado del checkbox en el almacenamiento local
  const isDarkTheme = chk.checked;
  document.body.classList.toggle('dark', isDarkTheme);
  localStorage.setItem('isDarkTheme', isDarkTheme);
});

    Este código debería cambiar el tema oscuro basado en el estado del checkbox y guardar el estado en el almacenamiento local. Cuando el usuario navega a una página diferente o recarga la página actual, el tema debería mantenerse igual que el establecido en el checkbox.

Comments are closed.