1

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

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>

4

1 回答 1

2

对于您的示例代码，似乎最好的方法是在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

于 2020-08-28T14:14:55.723 回答