Темный режим локального хранилища HTML с использованием JavaScript

Я пытался сделать свой сайт полностью темным режимом. Это почти готово, но у меня проблема. Когда я перезагружаю страницу, темный режим возвращается к световому режиму по умолчанию. Как я могу решить эту проблему? Я пробовал код, но он не работал. Я хочу использовать локальное хранилище, но не знаю, как добавить его в свой код. Может кто-то помочь мне с этим? Вот мой пример кода:

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>

Источник

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

Источник
Другие вопросы по тегам