Как соединить две кнопки темного режима на одной странице?

Question

Я использовал две кнопки темного режима на своей странице. Один в строке меню, а другой в нижнем колонтитуле.

Однако проблема в том, что всякий раз, когда я переключаюсь в темный режим с одной кнопки, другая кнопка не переключается сама.

Скажем, если я переключу ночной режим из строки меню, то кнопка нижнего колонтитула будет продолжать показывать, что дневной режим включен.

Это моя тестовая страница веб-сайта.

Пожалуйста, помогите решить мою проблему с кодом.

Спасибо

Код для кнопки в строке меню

    <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>  

js для обеих кнопок

    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');
        }
      }

Answer 1

 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">

всякий раз, когда вызывается themeToggle, измените атрибут checked обоих входов.

Answer 2

Чтобы получить оба флажка, лучше использовать querySelectorAll:

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

LocalStorage не работает во фрагменте, но вы можете проверить его на своем промежуточном сайте

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>