Как включить световой режим, чтобы файлы 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()
})();