Как включить световой режим, чтобы файлы cookie оставались постоянными

Я следовал руководству https://harlemsquirrel.github.io/css/javascript/2017/12/08/dark-light-mode-persistent-switcher.html, но у меня проблема при использовании светового режима, он отлично меняется при нажатии на кнопку переключения, но при перезагрузке или уходе он возвращается в темный режим. Я пробовал полностью использовать обычный javascript, но это мешает ему полностью работать, поэтому приведенный ниже код является наиболее близким к тому, что я получил.

Изменить: я просто хочу добавить, что устанавливаемый и измененный файл cookie работает отлично, а стили тела в порядке, это просто материал jQuery, который не работает должным образом.

function toggleDarkLight() {
  var body = document.body
  var currentClass = body.className
  var newClass = body.className == 'dark-mode' ? 'light-mode' : 'dark-mode'
  body.className = newClass
  var $footer = $("footer")
  var $section = $("section")
  var $div = $("div")
  $section.toggleClass("dark-mode light-mode")
  $div.toggleClass("dark-mode light-mode")
  $footer.toggleClass("dark-mode light-mode")
document.cookie = 'theme=' + (newClass == 'light-mode' ? 'light' : 'dark')
  console.log('Cookies are now: ' + document.cookie)
}

function isDarkThemeSelected() {
  return document.cookie.match(/theme=dark/i) != null
}

function setThemeFromCookie() {
  var body = document.body;
  body.className = isDarkThemeSelected() ? 'dark-mode' : 'light-mode';
  var $footer = $("footer")
  var $section = $("section")
  var $div = $("div")
  $section.addClass("dark-mode light-mode")
  $div.addClass("dark-mode light-mode")
  $footer.addClass("dark-mode light-mode")
}

(function() {
  setThemeFromCookie()
})();

0 ответов

Другие вопросы по тегам