Имеется переключение со светлой на темную тему путем нажатия кнопки, к которой привязан js код. При переходе на другую страницу темная тема слетает
Цвет у блоков и текстов задан как переменная и при нажатии кнопки смены темы у них добавляется атрибут "dark" тем самым меняя цвет. Допишите мой код пожалуйста, чтобы при переходе на страницу тема не слетала. Я знаю, что это можно сделать через cookie , но не понимаю синтаксиса.
const handleChange = (isChecked) => {
if (isChecked) {
document.body.setAttribute('dark','');
} else {
document.body.removeAttribute('dark');
}
}
Ответы (1 шт):
Автор решения: Spec Ussa
→ Ссылка
// 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");
}
};