Как сохранить темную тему при обновлении страницы?

Для сохранения темной темы при обновлении страницы в JavaScript можно использовать различные подходы, такие как использование LocalStorage или Cookies.

Один из простых способов - это использование LocalStorage. LocalStorage - это встроенный API веб-браузера, который позволяет сохранять данные на компьютере пользователя между сеансами работы с сайтом.

Для сохранения темной темы в LocalStorage, вам будет необходимо выполнить следующие шаги:

1. Проверьте, поддерживается ли LocalStorage в текущем браузере. Вы можете использовать следующий код:

if (typeof(Storage) !== "undefined") {
  // LocalStorage поддерживается
  // Дальнейший код для сохранения и восстановления темы
} else {
  // LocalStorage не поддерживается
  // Возможно, вам потребуется использовать другой метод для сохранения темы
}

2. Сохраните состояние темы в LocalStorage при изменении настроек темы. Например, вы можете использовать обработчики событий для кнопки, переключающей тему:

const themeToggle = document.querySelector("#theme-toggle"); // предполагается, что есть кнопка переключения темы
const darkThemeClass = "dark-theme";

// Callback-функция, вызываемая при изменении состояния темы
function toggleTheme() {
  document.body.classList.toggle(darkThemeClass);
  
  // Сохраняем состояние темы в LocalStorage
  if (localStorage.getItem("theme") === "dark") {
    localStorage.removeItem("theme");
  } else {
    localStorage.setItem("theme", "dark");
  }
}

themeToggle.addEventListener("click", toggleTheme);

3. Восстановите состояние темы из LocalStorage при загрузке страницы:

// Проверяем состояние темы в LocalStorage
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add(darkThemeClass);
}

Теперь, когда вы переключаете тему и обновляете страницу, выбранная тема будет сохраняться и восстанавливаться при загрузке страницы, используя сохраненное значение в LocalStorage.

Этот подход можно дополнить и другими методами сохранения и восстановления значения темы, такими как использование Cookies или передача параметра темы в URL-адресе страницы. Все зависит от ваших требований и ограничений, и я описал здесь только один из вариантов решения.