为暗模式添加Localstorage（在jquery中）

我想添加localstorage for dark模式，以记住用户的选择。 我已经阅读并查看了课程，尝试了不同的方法，但代码仍然不能正常工作，我不理解它。 非常感谢您的帮助和问候！：）

jQuery

$(document).ready(function () {
  localStorage.getItem("theme")

    function isDark() {
        return $("html").attr("theme") == 'dark';
    }

    function darkModeToggle() {
        if (isDark()) {
            $("html").attr("theme", "light");
        }
        else {
            $("html").attr("theme", "dark");
        }
    }

    function onClickDark() {
        $('.theme-switcher').on('click', function () {
            darkModeToggle();
            if (isDark()) {
                $(this).addClass('active');
                localStorage.setItem("mode", "dark");    
            }
            else {
                $(this).removeClass('active');
                localStorage.setItem("mode", "light");
            }
        });
    }

    onClickDark();
});

HTML

太阳和月亮的图标

我将在下面的示例代码中向您展示如何使用jQuery中的本地存储执行黑暗模式，就像您想要的那样

它只会让你对如何工作的想法，但你可以删除我的风格和按钮，并创建你自己的想法与更多的功能

我还看到这是黑暗模式下最专业的代码

这个代码只是切换按钮，点击它转换为黑暗模式，再次点击它将转换为光明模式并保存在本地存储。并在启动时检查用户选择的方法

//获取主题切换输入
const themeToggle=document.querySelector(
'.theme开关输入[type=“checkbox”]'
);
//函数，该函数将根据是否选中主题切换来切换主题
功能切换主题（e）{
如果（例如，选中目标）{
document.documentElement.setAttribute（“数据主题”、“暗”）；
}否则{
document.documentElement.setAttribute（“数据主题”、“灯光”）；
}
}
//将事件侦听器添加到主题切换，这将切换主题
themeToggle.addEventListener（“更改”，切换主题，false）；
功能切换主题（e）{
如果（例如，选中目标）{
document.documentElement.setAttribute（“数据主题”、“暗”）；
//将用户的主题首选项设置为“暗”
setItem（“主题”、“暗”）；
}否则{
document.documentElement.setAttribute（“数据主题”、“灯光”）；
//将用户的主题首选项设置为灯光
setItem（“主题”、“灯光”）；
}
}
//从本地存储获取当前主题
const currentTheme=localStorage.getItem（“主题”）；
//如果可以找到当前本地存储项
如果（当前主题）{
//设置正文数据主题属性以匹配本地存储项
document.documentElement.setAttribute（“数据主题”，currentTheme）；
//如果当前主题为黑色，请选中主题切换
如果（当前主题==“暗”）{
themeToggle.checked=真；
}
}

：根目录{
--背景颜色：#fec150；
--字体颜色：#222；
--标题颜色：#0067e6；
--标题背景：#fff；
--主边框：1px实心rgba（255、255、255、0.4）；
--主背景：rgba（255，255，255，0.4）；
}
[数据主题=“黑暗”]{
--背景颜色：#111；
--字体颜色：#efefef；
--标题颜色：#fec150；
--职称背景：#222；
--主边框：1px实心rgba（255、255、255、0.2）；
--主背景：rgba（25,25,25,0.4）；
}
身体{
颜色：var（--字体颜色）；
背景色：var（--bg色）；
/*其他样式*/
...
}
主要{
边框：var（--主边框）；
背景：var（--主背景）；
/*其他样式*/
...
}
h1{
颜色：var（--标题颜色）；
/*其他样式*/
...
}
.主题开关包装器{
显示器：flex；
对齐项目：居中；
}
.主题开关包装器em{
左边距：10px；
字号：1rem；
}
.主题切换{
显示：内联块；
高度：34px；
位置：相对位置；
宽度：60px；
}
.主题开关输入{
显示：无；
}
.滑块{
背景色：#ccc；
底部：0；
光标：指针；
左：0；
位置：绝对位置；
右：0；
排名：0；
过渡：0.4s；
边界半径：34px；
}
.滑块：之前{
背景色：#fff；
底部：4px；
内容：“；
高度：26px；
左：4px；
位置：绝对位置；
过渡：0.4s；
宽度：26px；
边界半径：50%；
}
输入：选中+滑块{
背景色：#fec150；
}
输入：选中+。滑块：之前{
转化：translateX（26px）；
}
.svg滑块{
颜色：#222；
位置：绝对位置；
过渡：不透明度0.2s缓0s，变换0.35s缓0s；
指针事件：无；
}
.羽毛月亮{
不透明度：0；
左：9px；
底部：9px；
转换：translateX（4px）；
}
.羽毛太阳{
不透明度：1；
右：10px；
底部：9px；
转换：translateX（0px）；
}
输入：选中+。滑块。羽毛月亮{
不透明度：1；
变换：translateX（0）；
}
输入：选中+。滑块。羽化太阳{
不透明度：0；
转换：translateX（-4px）；
}

您可以在localStorage中将项目名称设置为

模式

。但是在第1行中，您得到的主题是

theme

。顺便说一句，你没有在给定的变量中赋值code@PrakashM我也同意你在《第一在线》中的观点，他把它作为

主题

以及

函数darkModeToggle（）

。但是在

函数onClickDark（）中

他以

模式获取该信息

这可能是这里的问题。请注意，在Google Chrome中，您可能会看到错误，如

未捕获的安全性错误：无法从“窗口”读取“localStorage”属性：拒绝访问此文档。

您可以在这里解决此错误。我的回答对您有帮助吗？嗨！的确存在“主题”和“模式”。我的错误@KevinM Mansour今天我会根据你的代码来做。谢谢你的帮助！：）

<label class="theme-switcher">
            <span class="theme-switcher-label"> icons with sun and moon </span>
            <span class="theme-switcher-handle"></span>
</label>