Javascript 保持暗模式切换CSS导航到其他页面

我有这个简单的代码将网页转换为暗/光模式。它可以在您所在的页面上正常工作，但是如果我导航到另一个页面或刷新页面，模式将重置为默认（灯光）。我如何让它记住保持我选择的相同模式？这是我的简单代码，我从一个CSS切换到另一个CSS

钮扣

<i class="fa fa-toggle-on fa-2x active" id="on" style="display:none;" onclick="darkswitchoff()"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" id="off" onclick="darkswitchoon()"></i>

剧本

<script>
$(document).ready(function(){
    $('.middle').click(function() {
        $('.inactive, .active').toggle();
  });
});
</script>

<script>
function darkswitchoff() {
    document.getElementById('mainstylesheet').href='/assets/css/main.css';
}

function darkswitchoon() {
    document.getElementById('mainstylesheet').href='/assets/css/main-dark.css';
}
</script>

$（文档）.ready（函数（）{
$（'.middle'）。单击（函数（）{
$（'.inactive，.active'）.toggle（）；
});
});
函数darkswitchoff（）{
document.getElementById（'mainstylesheet'）.href='/assets/css/main.css'；
}
函数darkswitchoon（）{
document.getElementById（'mainstylesheet'）.href='/assets/css/main dark.css'；
}

您应该将此设置保存在Cookie或本地存储中。如果设置了Cookie，或者您在localStorage中找到了该设置，则加载暗模式样式表。

您需要在整个应用程序中“存储”状态。一种方法是使用cookie，而不用经历使用其他库的麻烦

<script>
document.cookie = "isDark=true";
</script>

document.cookie=“isDark=true”；

您可以稍后读取该值并使用暗模式。请记住，cookies存储为字符串。如果您使用Cookie仅在用户启用暗模式时存储，您可以执行以下操作：

<script>
if(document.cookie){
//Code to Enable Dark Mode
}
</script>

if（document.cookie）{
//启用暗模式的代码
}

---

处理这个问题的更好方法是使用像Redux这样的库，并使用它强大的“存储”，它可以让你在应用程序的生命周期中存储不同类型的数据。

下面你有所有的代码，不幸的是，它在这里不起作用，所以我提供了一个指向工作版本的链接

const-toggleSwitch=document.querySelector(
'.theme开关输入[type=“checkbox”]'
);
const currentTheme=localStorage.getItem（“主题”）；
如果（当前主题）{
document.documentElement.setAttribute（“数据主题”，currentTheme）；
如果（当前主题==“暗”）{
toggleSwitch.checked=true；
}
}
功能切换主题（事件）{
if（event.target.checked）{
document.documentElement.setAttribute（“数据主题”、“暗”）；
setItem（“主题”、“暗”）；
}否则{
document.documentElement.setAttribute（“数据主题”、“灯光”）；
setItem（“主题”、“灯光”）；
}
}
toggleSwitch.addEventListener（“更改”，switchTheme，false）
@导入url（“https://fonts.googleapis.com/css?family=Lato:400，400斜体，700 | Sansita+1）；
：根{
--原色：#24242b；
--次要颜色：#433055；
--字体颜色：#3f3f；
--背景颜色：#F3；
--标题颜色：#2A223；
}
html[数据主题=暗]{
--原色：#f89898；
--次要颜色：#8894b3；
--字体颜色：#d8d8f6；
--背景颜色：#2424；
--标题颜色：#818cab；
}
身体{
字体系列：“Lato”，无衬线；
背景色：var（--bg色）；
颜色：var（--字体颜色）；
最大宽度：900px；
保证金：0自动；
过渡：背景200ms缓进；
填充：0 30px；
字体大小：calc（1rem+0.25vh）；
}
h1{
颜色：var（--标题颜色）；
字体系列：“拉托”，衬线；
字体大小：3rem；
边缘底部：1vh；
}
p{
字号：1.1rem；
线高：1.6雷姆；
}
a{
颜色：var（--原色）；
文字装饰：无；
边框底部：3倍纯色透明；
垫底：5px；
过渡：边界底部1s；
字体大小：粗体；
}
a:悬停，a:聚焦{
边框底部：3倍纯色；
}
部分{
保证金：0自动；
}
.post meta{
字号：1rem；
字体：斜体；
显示：块；
边缘底部：4vh；
颜色：var（--第二颜色）；
}
导航{
显示器：flex；
证明内容：柔性端；
填充：20px0；
}
.主题切换{
显示：内联块；
高度：34px；
位置：相对位置；
宽度：60px；
}
.主题开关输入{
显示：无；
}
.主题开关包装器{
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
边缘顶部：20px；
}
.主题开关包装器em{
左边距：10px；
字号：1rem；
}
.滑块{
背景色：#ccc；
底部：0；
光标：指针；
左：0；
位置：绝对位置；
右：0；
排名：0；
过渡：0.4s；
}
.滑块：之前{
背景色：#fff；
底部：4px；
内容：“；
高度：26px；
左：4px；
位置：绝对位置；
过渡：0.4s；
宽度：26px；
}
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}
输入：选中+滑块{
背景色：#66bb6a；
}
输入：选中+。滑块：之前{
转化：translateX（26px）；
}

使用
localStorage
。看，嗨。如果成功，请将其标记为已解决。您好。我想标记为已解决，但我无法使它仍然工作。我正在使用其他Cookie（我不知道具体是为了什么，因为我没有对所有内容进行编程）。所以我想我需要特别检查isDark==true，我想…Cookies存储为字符串。您需要将字符串解析为对象，然后选中parsedObject.isDark。