Сохранение выбора темы

Часть раздела JavaScript в действии путешествия по HTML на Coddy. Урок 17 из 27.

Когда пользователи переключаются между светлой и тёмной темами, мы хотим, чтобы сайт запоминал их выбор.
Для этого мы используем localStorage в JavaScript. Он хранит данные в браузере, и эти данные сохраняются даже после обновления страницы или закрытия браузера.

Логика такова:

Когда пользователь переключает тему, сохраните текущую тему в localStorage.
Когда страница загружается, проверьте localStorage и автоматически примените сохранённую тему.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Этот код проверяет, сохранял ли пользователь ранее тёмную тему в localStorage, и применяет её при загрузке страницы.

При нажатии кнопки на странице включается или выключается тёмный режим, а затем обновляется localStorage, чтобы сохранить предпочтение для следующего посещения

const button = document.getElementById("themeToggle");

// Применить сохранённую тему при загрузке страницы
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Сохранить предпочтение
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Это гарантирует, что предпочтение пользователя сохраняется при посещениях вашего сайта.

Задание

Легко

Создайте переключатель темы, который запоминает предпочтения пользователя.

Шаги:

При загрузке страницы: Проверьте, выбирал ли пользователь ранее тёмную тему
1. Если в localStorage сохранено "dark", добавьте класс "dark-mode" к элементу body
При нажатии кнопки переключения: Переключайте светлую и тёмную темы
1. Переключайте класс "dark-mode" у элемента body
2. Сохраняйте текущую тему в localStorage

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>