如何跨多页面实现light/dark明暗模式的持久化设置

现有代码存在5个直接导致功能失效的问题：

• 语法错误：document.querySelector调用缺失左括号，按钮元素获取失败，点击事件完全无法绑定
• 类型判断错误：localStorage仅支持存储字符串类型，存入的布尔值true/false会被转为"true"/"false"，非空字符串在条件判断中恒为真，原有分支判断逻辑完全失效
• 变量未定义：checkLightMode函数中直接使用未声明的body变量，运行时会抛出引用错误
• 状态同步缺失：页面初始化读取配置时，仅给body添加了样式类，未同步切换太阳/月亮图标，会出现样式和图标不匹配的问题
• 逻辑顺序错误：点击按钮时先强制将存储值设为true再做判断，永远无法切换回暗色模式

HTML 部分 #

<body onload="checkLightMode()">
  <li>
    <button class="mode-toggle">
      <i class="fas fa-sun fa-2x"></i>
    </button>
  </li>
  <!-- 建议将JS脚本放在body末尾，保证DOM加载完成后再执行脚本 -->
</body>

JavaScript 部分 #

const button = document.querySelector('.mode-toggle')
const body = document.body

// 统一处理主题样式更新，避免逻辑重复
function updateTheme(isLightMode) {
  // 同步body类名
  body.classList.toggle('light-mode', isLightMode)
  // 同步切换图标：亮色模式显示月亮按钮，暗色模式显示太阳按钮
  const themeIcon = button.querySelector('i')
  themeIcon.classList.toggle('fa-sun', !isLightMode)
  themeIcon.classList.toggle('fa-moon', isLightMode)
}

// 页面加载时读取存储的主题配置
function checkLightMode() {
  // 字符串转布尔值，默认初始状态为暗色模式
  const savedLightMode = localStorage.getItem('light-mode') === 'true'
  updateTheme(savedLightMode)
}

// 绑定切换按钮点击事件
button.addEventListener('click', function () {
  const currentMode = localStorage.getItem('light-mode') === 'true'
  const newMode = !currentMode
  // 更新存储值
  localStorage.setItem('light-mode', newMode)
  // 更新页面样式
  updateTheme(newMode)
})

提示：所有需要共享主题状态的页面都需要引入这段相同的JS逻辑，才能保证页面跳转时明暗主题状态完全一致。

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