Question

我试图对我的网站设置完全暗模式。差不多完成了，但是我有一个问题。当我重新加载页面时，暗模式会恢复为默认的亮模式。我该如何解决这个问题？我尝试了一些代码，但是没有用。我想使用本地存储，但是我不知道如何将其添加到我的代码中。有人可以帮我弄这个吗？这是我的示例代码：

function darkmode() {
    var element = document.body;
    element.classList.toggle("dark-mode");
}

<html>
<head>
<style>
.card {
  background-color: red;
  color: green;
}
.dark-mode .card {
  background-color: black;
  color: white;
}


</style>
</head>
<body>
<button onclick="darkmode()">DARK MODE</button>
<div class="card">
  <h2>Title</h2>
  <div class="fkimg" style="height: 100px; width: 20%;">IMAGE</div>
  <a>Some text</a>
</div>

</body>
</html>

Answer 1

对于您的示例代码，似乎最好的方法是在darkmode函数中添加一些内容：

function darkmode() {
  // all values retrieved from localStorage will be strings
  const wasDarkmode = localStorage.getItem('darkmode') === 'true';
  localStorage.setItem('darkmode', !wasDarkmode);
  const element = document.body;
  element.classList.toggle('dark-mode', !wasDarkmode);
}

function onload() {
  document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
}

<html>
<head>...</head>
<body onload="onload()">
  ...
</body>
</html>

MDN localStorage参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

使用JavaScript的HTML本地存储暗模式

1 个答案: