Как установить тему темного режима на нескольких страницах?

Question

Я пытаюсь реализовать темный режим на моем сайте, который имеет 3 разные страницы. Я сделал 3 отдельных javascript файла на каждую страницу и скопировал код темного режима на каждую страницу. Теперь я хочу сохранить настройки, чтобы пользователю не приходилось постоянно нажимать на функцию темного режима каждый раз, когда они go переходят на другую часть сайта. Это то, что у меня есть, что меняет его на темный режим. Я видел ответы, используя localStorage, но я все еще плохо знаком с JS, поэтому у меня возникли проблемы с его реализацией. Должен ли я иметь только один javascript файл для всех 3 страниц или хранить его отдельно?

   <label class="switch">
   <input type="checkbox" id="darkmode">
   <span class="slider round"></span>
   </label>


let checkbox = document.getElementById("darkmode");
let body = document.getElementById('body')

checkbox.addEventListener( 'change', function() {
if(this.checked) {
    body.classList.add('dark')
} else {
    body.classList.remove('dark')     
}
});

Answer 1

Простой трюк - использовать window.localstorage () или cookies (), это поможет вам легко реализовать эту функцию. Для получения дополнительной информации, вы можете увидеть эту статью MDN Window.localStorage & MDN cookie.Cook ie

Практический пример всегда помогает нам на 100%, Это лучший способ сделать это. https: // codepen.io/Md_Tahazzot/pen/xxKLmJa

Answer 2

Для этого вы можете сделать следующее:

• На каждой странице выполнить следующие изменения:

    checkbox.addEventListener( 'change', function() {
         localStorage.setItem('dark',this.checked);
         if(this.checked) {
              body.classList.add('dark')
         } else {
              body.classList.remove('dark')     
         }
    });

• И вкл. загрузите каждую страницу, выполните следующие действия:

    if(localStorage.getItem('dark')) {
         body.classList.add('dark');
    }