创建一个黑暗的主题开关-jQuery localStorage和CSS

问题描述

我对jQuery和localStorage非常陌生。我正在创建一个深色主题选项供用户选择。我一切正常，但我肯定会有更好的方法。这是我当前拥有的代码，我知道我重复了太多代码。只是想不出如何简化它。如前所述，代码可以正常工作，但是当页面加载时，在到达我假定的本地存储之前，仍然会出现一个轻量主题。因此，即使他们选择了DARK主题，在页面加载时，灯光主题也会在切换前先闪烁1秒钟。

这就是密码

    $(document).ready(function() {
    var darkmode_data = localStorage.getItem("darkmode");
    //CHK LOCALSTORAGE
    if (darkmode_data == "yes") {
        $("#darkmode").prop('checked',true);
        $('body,.cardicon,.odd').toggleClass('darkmodebg');
        $('.card-body,.card,footer.page-footer,.even').toggleClass('darkmodebg2');
        $('h1,h2,h3,h4,h5,h6').toggleClass('darkmodetxt');
        $('hr').toggleClass('darkmodehr');
        $('.card .number').toggleClass('darkmodeblue');
    }
    else if(darkmode_data == "no"){
        $("#darkmode").prop('checked',false);
    }
    //CLICK FUNCTION
    $('#darkmode').click(function(e) {
        $('body,h6').toggleClass('darkmodetxt');
        $('hr').toggleClass('darkmodehr');
        $('.card .number').toggleClass('darkmodeblue');
        if ($(this).is(":checked")) {
            localStorage.setItem("darkmode","yes");
        } 
        else {
            localStorage.setItem("darkmode","no");            
        }
    });
 });

您可以在代码中看到，当用户切换到黑暗模式时，我正在更改一些元素（14）样式。

非常感谢您的协助。我很感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）