Запомнить тему сайте

Вопрос-ответ JavaScript
1

Здравствуйте. Как сделать так, чтобы браузер запомнил, какая тема сайта выбрана? И не менял при обновлении страницы обратно на светлую?

const select = document.querySelector('#theme-link')
const body = document.querySelector('body')
select.addEventListener('click', () => {
  if (body.getAttribute('data-theme') === 'dark') {
    body.setAttribute('data-theme', null)
  } else {
    body.setAttribute('data-theme', 'dark')
  }
})
2

Вариантов несколько:

  1. При изменении темы сохранять актуальное состояние на сервере и при следующем посещении рендерить html сразу с атрибутом.
  2. Положить значение в localStorage (sessionStorage, cookies) и при перезагрузке страницы вынимать из хранилища и добавлять атрибут в html. (Но в этом случае будет работать только в текущем браузере, на текущем устройстве)
1 лайк
3 
const DEFAULT_THEME = 'light'
const THEME_PERSISTENCE_KEY = 'theme'

function init() {
  setInitialTheme();

  const select = document.querySelector('#theme-link')
  select.addEventListener('click', () => {
    if (document.body.getAttribute('data-theme') === 'dark') {
      setTheme('dark')
    } else {
      setTheme('light')
    }
  })
}

function setInitialTheme() {
  const restoredTheme = localStorage.getItem(THEME_PERSISTENCE_KEY)
  if (restoredTheme) {
    setTheme(restoredTheme)
  } else {
    setTheme(DEFAULT_THEME)
  }
}

function setTheme(theme) {
  document.body.setAttribute('data-theme', theme)
  localStorage.setItem(THEME_PERSISTENCE_KEY, theme)
}

init()

Нюанс: я скопировал твой код, но в нем есть или логические ошибки или лишний код. Например код написан так что тема зависит не от того что выбрано в выпадающем списке а от того какая тема установлена в аттрибуте body.

С кодом возможны еще нюансы, например если скрипт включен в head без аттрибута deferred, то в момент запуска скрипта в ДОМ-е может не быть #theme-link и body.

В общем будут непонятки - спрашивай дальше.

4

Привет. Почему-то сейчас вообще не работает

5

Код который я написал - примерный. Я его не запускал. Его нужно понять и разобраться почему не работает. Дебажить умеешь? Посмотри на ошибку в консоли если есть, убедсись что код запускается (например вставь alert(1) в тело init).

6

Получилось так:

const toggle = document.getElementById("theme-link");
const theme = window.localStorage.getItem("theme");

if (theme === "dark") document.body.classList.add("dark");

toggle.addEventListener("click", () => {
  document.body.classList.toggle("dark");
  if (theme === "dark") {
    window.localStorage.setItem("theme", null);
  } else window.localStorage.setItem("theme", "dark");
});
1 лайк