如何根据本地存储中的数据切换主题

Question

My theme settings always revert to the default theme on page refresh despite reading the theme settings from local storage

Here is my code for the theme implementation:

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');
});

I've checked the localStorage and the theme values are stored

Answer 1

In your Initial class instead of setting it to empty, set the local storage to the default theme and read the theme value from local storage in your initial class. So that on page reload also you will be reading the theme from the local storage and it will be set already with the custom theme.