Как мне переключить мою тему на основе данных из локального хранилища

Question

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

Вот мой код для реализации темы:

green.addEventListener('click', () => {
  if (localStorage.getItem('theme') != 'green') {
    localStorage.setItem('theme', 'green');
  }
  main.classList.add(localStorage.getItem('theme'));
});
yellow.addEventListener('click', () => {
  if (localStorage.getItem('theme') !== 'yellow') {
    localStorage.setItem('theme', 'yellow');
  }
  main.className = localStorage.getItem('theme');
});
purple.addEventListener('click', () => {
  if (localStorage.getItem('theme') !== '') {
    localStorage.setItem('theme', '');
  }
  main.className = localStorage.getItem('theme');
});

У меня естьпроверил localStorage и значения темы сохранены

Answer 1

В вашем Начальном классе вместо установки его пустым установите для локального хранилища тему по умолчанию и считайте значение темы из локального хранилища в исходном классе.Так что при перезагрузке страницы вы также будете читать тему из локального хранилища, и она будет уже установлена ​​с пользовательской темой.