使用LocalStorage实现网站暗黑主题持久化失败，求排查解决

你的代码存在几个关键问题，导致暗黑主题无法在页面跳转后保持生效：

核心问题点 #

• 初始化逻辑错误：页面加载时直接执行localStorage.setItem('theme', 'dark')，会覆盖之前存储的主题设置，而且没有读取已有主题并应用到页面。
• 类切换逻辑混乱：点击事件中连续调用两次classList.toggle，导致图标状态和判断条件不匹配。
• 本地存储键名不一致：设置主题用的是theme键，但移除时操作的是dark键，完全不对应。
• 未定义变量：isDark变量没有声明就使用，会触发报错中断代码。
• 语法错误：事件监听函数结尾缺少闭合括号，导致代码无法正常执行。

修复后的代码实现 #

第一步：用CSS类管理主题（替代直接操作style） #

先在CSS里定义两个主题类，维护起来更方便：

/* 亮色主题 */
body.light-theme {
  background-image: url("image/lightestBackground.jpg");
  color: #222222;
  transition: 2s;
}

/* 暗色主题 */
body.dark-theme {
  background-image: url("image/background.jpg");
  color: beige;
  transition: 2s;
}

第二步：修正JavaScript逻辑 #

const toggle = document.getElementById('toggleDark');
const body = document.querySelector('body');
// 初始化时读取本地存储的主题，默认亮色
const savedTheme = localStorage.getItem('theme') || 'light';

// 应用保存的主题
if (savedTheme === 'dark') {
  body.classList.add('dark-theme');
  toggle.classList.remove('bi-moon');
  toggle.classList.add('bi-brightness-high-fill');
} else {
  body.classList.add('light-theme');
  toggle.classList.add('bi-moon');
  toggle.classList.remove('bi-brightness-high-fill');
}

// 绑定切换事件
toggle.addEventListener('click', function() {
  // 切换图标类并保存状态
  const isDark = this.classList.toggle('bi-brightness-high-fill');
  this.classList.toggle('bi-moon');

  if (isDark) {
    // 切换到暗色主题
    body.classList.remove('light-theme');
    body.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
  } else {
    // 切换到亮色主题
    body.classList.remove('dark-theme');
    body.classList.add('light-theme');
    localStorage.setItem('theme', 'light');
  }
});

第三步：HTML保持不变 #

<i class="bi bi-moon" id="toggleDark" alt="Moon" aria-label="Change color theme"></i>

关键优化说明 #

1. 初始化优先读取本地存储：页面加载时先获取之前保存的主题，再对应设置页面样式和图标状态。
2. 用CSS类管理样式：避免直接操作DOM style属性，代码更简洁，后期修改主题样式只需调整CSS。
3. 统一本地存储键名：始终使用theme键存储主题值（'dark'或'light'），避免键名混乱。
4. 修正类切换逻辑：只调用一次toggle并保存状态，确保图标和主题状态一致。
5. 修复语法错误：补全事件函数的闭合括号，确保代码正常执行。

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