是否有一种方法可以通过使用本地存储来创建一个恒定的“黑暗模式”？

Question

我一直在制作一个小网站，默认的‘灯光模式’和一个黑暗模式按钮，以改变它为夜间用户的黑暗模式。我想使用JS中的localStorage来保持暗模式常量，所以当您按下它一次并转到站点上的另一个页面时，它就会保持黑暗模式。但我似乎没办法让它起作用。

当我将localStorage键‘模式’设置为‘黑暗’时，当我进入该站点的另一个页面时，它默认为光模式。

以下是js代码：

let mode;
mode = localStorage.getItem('mode');

if (mode = 'light'){
    lightMode();
}else{
    darkMode();
}

function darkMode() {
    document.getElementById("title").style.color = "white";
    document.body.style.backgroundColor = "#040040";
    //code...
    document.getElementById("darkmodebtn").style.color = "black";
    document.getElementById("darkmodebtn").style.backgroundColor = "white";
    document.getElementById("darkmodebtn").onclick = lightMode;
    document.getElementById("darkmodebtn").innerHTML = "Light Mode";
    localStorage.setItem('mode', 'dark');
    mode = localStorage.getItem('mode');
}

function lightMode() {
    document.getElementById("title").style.color = "black";
    document.body.style.backgroundColor = "lightblue";
    //more code...
    document.getElementById("darkmodebtn").style.color = "white";
    document.getElementById("darkmodebtn").style.backgroundColor = "black";
    document.getElementById("darkmodebtn").onclick = darkMode;
    document.getElementById("darkmodebtn").innerHTML = "Dark Mode";
    localStorage.setItem('mode', 'light');
    mode = localStorage.getItem('mode');
}

下面是按钮的html：

<div id="darkmode">
    <button id="darkmodebtn" onclick="darkMode()">Dark Mode</button>
</div>

当我打开网站上的任意页面时，有一个错误是：

Uncaught TypeError: Cannot read property 'style' of null
    at lightMode (script.js:79)
    at script.js:57

它描述了lightMode函数第一行的错误，但我不知道这是否是问题的一部分。

Answer 1

问题在于这一行：

if (mode = 'light')

mode = 'light'是一个赋值，在模式变量中存储“light”。但就if语句而言，它也是一个计算为“light”的表达式，if将其解释为true。因此，你将永远处于光模式。

if (mode === 'light')是你想要的。

Answer 2

对于不同的模式，您可以使用两个独立的css文件。

if(lightmode===true) {
  document.getElementById("stylesheet").setAttrubute("href","light.css");}
else {
  ...//else block
}