Флажок темного режима должен быть сохранен в локальном хранилище

Question

Я пытаюсь реализовать переключатель темного режима - светлого режима на моем веб-сайте. Я действительно ничего не знаю о JS, но я поиграл с фрагментами кода, которые я нашел в Интернете, и собрал что-то вроде этого.

Что у меня есть на данный момент: - У меня есть два набора цветов в CSSчто я могу переключаться с помощью флажка в панели навигации. - Я также узнал, как я могу сохранять состояние флажка локально, поэтому, если я включаю темный режим, а затем перехожу на другую страницу, флажок все еще отмечен.

Проблема заключается в том, что каждый раз, когда я перемещаюсь вна другой странице флажок сначала снимается, а затем он понимает, что его нужно проверить, и проверяет сам себя. Но это требует времени, есть даже анимация, которая немного раздражает, потому что, если я проверяю ее на странице, я хочу, чтобы она проверялась по умолчанию на всех других страницах, пока я не выключу ее.

Вотвидео, которое объясняет это лучше: https://drive.google.com/file/d/1y48yh1h1bGM6abrthVmtUD8azVuDG4yE/view?usp=sharing

Любая помощь будет признательна, так как я действительно не знаю, что здесь происходит: D

// DARK MODE SWITCHER
var checkbox = document.querySelector('input[name=mode]');

checkbox.addEventListener('change', function() {
  if(this.checked) {
    trans()
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    trans()
    document.documentElement.setAttribute('data-theme', 'light')
  }
})

let trans = () => {
  document.documentElement.classList.add('transition');
  window.setTimeout(() => {
    document.documentElement.classList.remove('transition');
  }, 1000)
}


// SAVE DARK MODE CHECKBOX STATE IN LOCAL STORAGE

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

Answer 1

решение jsfiddle:

https://jsfiddle.net/zhbo40ma/

вам нужно установить свою тему при загрузке страницы:

$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
  if($('#'+key).attr('name') == 'mode') {
    if(value) {
        trans();
        document.documentElement.setAttribute('data-theme', 'dark')
    }
    else {
        trans();
        document.documentElement.setAttribute('data-theme', 'light')
    }
  }
});

не забудьте написать свой trans() функция до загрузки вашей страницы, потому что вы объявляете ее с let