主题切换按钮初始渲染状态未同步localStorage问题求助

问题核心：页面刷新时，主题能从localStorage正确加载，但切换按钮（checkbox）的状态未同步更新，导致按钮显示状态与当前主题不一致。

解决方案 #

关键在于设置主题的同时，同步更新checkbox的checked属性，确保按钮状态与主题匹配。

修改后的JavaScript代码

// 设置指定主题/配色方案
function setTheme(themeName) {
  localStorage.setItem('theme', themeName);
  document.documentElement.className = themeName;
  // 同步切换按钮状态
  const slider = document.getElementById('slider');
  slider.checked = themeName === 'theme-dark';
}

// 切换亮色/暗色主题
function toggleTheme() {
 if (localStorage.getItem('theme') === 'theme-dark'){
     setTheme('theme-light');
 } else {
     setTheme('theme-dark');
 }
}

// 页面初始化时自动设置主题
(function () {
 if (localStorage.getItem('theme') === 'theme-dark') {
     setTheme('theme-dark');
 } else {
     setTheme('theme-light');
 }
})();

代码说明 #

• 在setTheme函数中新增同步逻辑：根据当前设置的主题，直接控制checkbox的checked属性——暗色主题时设为true，亮色主题时设为false。
• 无论页面初始化加载主题，还是手动切换主题，按钮状态都会与当前主题自动保持一致，彻底解决刷新后状态不同步的问题。

内容的提问来源于stack exchange，提问作者Corneliu Grozavu