Проблема с настройкой сохранения темного режима (localStorage)

Question

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

Я застрял до сих пор и не смог найти никаких полезных ресурсов по этому вопросу.

Вот моя скрипка и мой js-скрипт ниже.

Скрипка

Javascript

$(document).ready(function(){
    $('ul').click(function(){
        $('ul').toggleClass('active')

        let darkThemeEnabled = $('section').toggleClass('dark');

        localStorage.setItem('dark-theme-enabled', darkThemeEnabled);
    })
})

if (localStorage.getItem('dark-theme-enabled')) {
    $('section').toggleClass('dark');

    $('ul').toggleClass('active');  
}

Answer 1

Это сработало для меня (я поместил свой темный режим на свое тело):

const body = document.querySelector('body');
const checkBox = document.getElementById('checkbox');

window.addEventListener('load', () => {        

    if (!localStorage.dark_mode)
        localStorage.dark_mode = false;

    else if (JSON.parse(localStorage.dark_mode) === true) {
            body.classList.add('dark-mode');
            checkbox.checked = true;
            }
});

checkBox.addEventListener('click', (e) => {
    body.classList.toggle('dark-mode');

    if (body.classList.contains('dark-mode')) {
        checkbox.checked = true;
        localStorage.dark_mode = true;
    }
    else {
        checkbox.checked = false;
        localStorage.dark_mode = false;
    }
});

Answer 2

Вам необходимо установить логическое значение localStorage:

$("section").toggleClass("dark");
let darkThemeEnabled = $("section").hasClass("dark");
localStorage.setItem("dark-theme-enabled", darkThemeEnabled);

РЕДАКТИРОВАТЬ

Также измените способ получения:

if (localStorage.getItem('dark-theme-enabled')) {
    $('section').addClass('dark');
    $('ul').addClass('active');  
}