He agregado una función en mi sitio web que permite al usuario alternar entre el modo claro y oscuro. Sin embargo, cuando cambio de página, no parece guardar la configuración actual y me vuelve a poner en la configuración predeterminada. Por ejemplo, el sitio está en modo claro de forma predeterminada. Si estoy en la página de inicio, luego cambio al modo oscuro y navego a una nueva página, el sitio vuelve al modo claro en lugar de permanecer en el modo oscuro. Mi javascript está debajo y, como referencia, tengo todas las páginas de mi sitio usando exactamente el mismo script, ya que es la única función que tengo, no pensé que tendría sentido crear el mismo script para cada página individual.
const toggle = document.getElementById('toggleDark'); const body = document.querySelector('body'); const element = document.getElementById("id01"); const a = document.querySelector('a'); toggle.addEventListener('click', function(){ this.classList.toggle('bi-moon'); if(this.classList.toggle('bi-brightness-high-fill')){ body.style.background = 'white'; body.style.color = '#151515'; body.style.transition = '0.5s'; element.innerHTML = "lights off"; a.style.color = '#151515'; }else{ body.style.background = '#151515'; body.style.color = 'white'; body.style.transition = '0.5s'; element.innerHTML = "lights on"; a.style.color = 'white'; } });Puede guardar un valor en localStorage y buscarlo en cada página.
localStorage.setItem("dark_mode", "true"); if (localStorage.getItem("dark_mode") === "true") { // Set the theme here }