Имеется переключение со светлой на темную тему путем нажатия кнопки, к которой привязан js код. При переходе на другую страницу темная тема слетает

Рейтинг: 0Ответов: 1Опубликовано: 12.05.2023

Цвет у блоков и текстов задан как переменная и при нажатии кнопки смены темы у них добавляется атрибут "dark" тем самым меняя цвет. Допишите мой код пожалуйста, чтобы при переходе на страницу тема не слетала. Я знаю, что это можно сделать через cookie , но не понимаю синтаксиса.

        const handleChange = (isChecked) => {
            if (isChecked) {
                document.body.setAttribute('dark','');
            } else {
                document.body.removeAttribute('dark');
            
            }
        }
css javascript visual-studio-code
Источник: Stack Overflow на русском

Ответы

▲ 0

// 1. Проверка темной темы в localStorage
if (localStorage.getItem('darkMode') === 'dark') {
  btnDarkMode.classList.add("dark-mode-btn--active");
  document.body.classList.add("dark");
} else if (localStorage.getItem("darkMode") === "light") {
  btnDarkMode.classList.remove("dark-mode-btn--active");
  document.body.classList.remove("dark");
}
// 2. Включение ночного режима по кнопке
btnDarkMode.onclick = function () {
  btnDarkMode.classList.toggle("dark-mode-btn--active");
  const isDark = document.body.classList.toggle("dark");
  if (isDark) {
    localStorage.setItem("darkMode", "dark");
  } else {
    localStorage.setItem("darkMode", "light");
  }
};