He estado usando dos botones de modo oscuro en mi página. Uno en la barra de menú y el otro en el pie de página.

Sin embargo, el problema es que cada vez que cambio al modo oscuro desde cualquier botón, el otro botón no se alterna.

Digamos que si cambio el modo nocturno desde la barra de menú, el botón de pie de página seguirá mostrando que el modo día está habilitado.

Esta es mi Página de prueba del sitio web.

Amablemente ayuda a resolver mi problema con el código también.

Gracias

Código para el botón en la barra de menú


    <label class="switch" style="padding: 23px 0;">
        <input type="checkbox" onclick="themeToggle()" class="theme-switcher">
        <div>
            <span></span>
        </div>

Código para el botón en el pie de página


    <label class="switcher">
    <input type="checkbox" onclick="themeToggle()" class="theme-switcher-2">
    <div>
    <i class="fas fa-sun"></i>
    <i class="fas fa-arrow-left arrow"></i>
    <i class="fas fa-moon"></i>
    </div>
    </label>  


El js para ambos botones


    var tSwitcher = document.getElementsByClassName('theme-switcher');
    let element = document.body;

    let onpageLoad = localStorage.getItem("theme") || "";
    if (onpageLoad != null && onpageLoad == 'dark-mode') {
            for(let i = 0; i<tSwitcher.length; i++){
                    tSwitcher[i].checked = true;    
        }

    }

    if(onpageLoad) element.classList.add(onpageLoad);

    function themeToggle() {
        if (event.target.checked) {
          localStorage.setItem('theme', 'dark-mode');
          element.classList.add('dark-mode');
        } else {
          localStorage.setItem('theme', '');
          element.classList.remove('dark-mode');
        }
      }

0
neeraj 15 feb. 2020 a las 12:10

2 respuestas

La mejor respuesta

Para obtener ambas casillas de verificación, es mejor usar querySelectorAll:

querySelectorAll('[class^=theme-switcher]')

LocalStorage no funciona en el fragmento pero puede verificarlo en su sitio de preparación

var tSwitcher = document.querySelectorAll('[class^=theme-switcher]');
let element = document.body;
let onpageLoad = localStorage.getItem("theme") || "";
if (onpageLoad != null && onpageLoad == 'dark-mode') {
      for(let i = 0; i<tSwitcher.length; i++){
          tSwitcher[i].checked = true;    
      }

}

if(onpageLoad) element.classList.add(onpageLoad);

function themeToggle() {
    if (event.target.checked) {
      localStorage.setItem('theme', 'dark-mode');
      tSwitcher.forEach(function(el){ 
          element.classList.add('dark-mode');
          el.checked = true;
      })
    } else {
      localStorage.setItem('theme', '');
      tSwitcher.forEach(function(el){ 
          element.classList.remove('dark-mode');
          el.checked = false;
       })
    }
  }
<label class="switch" style="padding: 23px 0;">
        <input type="checkbox" onclick="themeToggle()" class="theme-switcher">
        <div>
            <span></span>
        </div>

    <label class="switcher">
    <input type="checkbox" onclick="themeToggle()" class="theme-switcher-2">
    <div>
    <i class="fas fa-sun"></i>
    <i class="fas fa-arrow-left arrow"></i>
    <i class="fas fa-moon"></i>
    </div>
    </label>
1
Banzay 15 feb. 2020 a las 09:59
 var tSwitcher = document.getElementsByClassName('theme-switcher')[0];
var t2 = document.getElementsByClassName('theme-switcher-2')[0];
        
 function themeToggle() {
  if (event.target.checked) {
    tSwitcher.checked = true; 
    t2.checked = true
    localStorage.setItem('theme', 'dark-mode');
    element.classList.add('dark-mode');
  } else {
     tSwitcher.checked = false; 
     t2.checked = false
     localStorage.setItem('theme', '');
     element.classList.remove('dark-mode');
  }
}
 <input type="checkbox" onclick="themeToggle()" class="theme-switcher">
 <input type="checkbox" onclick="themeToggle()" class="theme-switcher-2">

Cada vez que se llame a themeToggle, cambie el atributo checked de ambas entradas.

2
priyanshu sinha 15 feb. 2020 a las 09:36