JS实现深色/浅色模式切换无法保存至localStorage问题排查

你现有代码存在4个核心问题，导致主题设置无法跨页面持久化：

• 主题读取、应用逻辑只写在了第二个HTML页面的内联脚本里，第一个页面完全没有对应逻辑，跳转回第一页自然会加载默认的深色模式CSS
• 读取到localStorage存储的主题值后，你错误地给body添加主题class，根本没有修改实际控制样式的CSS链接href属性，和你切换CSS文件实现主题的逻辑完全不匹配
• 写入localStorage时，你直接传入了DOM元素对象theme作为存储值，没有存储dark/light这类可识别的字符串标识，存储的内容完全无效
• 切换逻辑里的CSS文件名和你实际使用的文件名不匹配：你实际用的是darkmode.css，判断逻辑里写的是kiblsstyle.css/kiblsstylelight.css，判断条件永远不会命中

前置准备 #

先统一文件命名：将浅色模式的CSS文件重命名为lightmode.css，深色模式CSS保持darkmode.css即可，两个HTML页面默认引入深色CSS的写法不用改，只要保证样式链接标签带id="theme-link"属性。

统一JS逻辑 #

把所有主题相关的逻辑全部写到公共外链文件darkmode.js中，两个HTML页面都只引用这一个JS文件，删掉第二页里写的内联主题脚本，保证所有页面逻辑一致。
darkmode.js完整代码如下：

document.addEventListener('DOMContentLoaded', () => {
  // 获取页面元素
  const toggleBtn = document.querySelector('.btn-toggle');
  const themeStyleLink = document.querySelector('#theme-link');
  // 读取本地存储的主题，无存储值时默认使用深色模式
  const savedTheme = localStorage.getItem('theme') || 'dark';

  // 主题应用方法
  const setTheme = (themeType) => {
    themeStyleLink.href = themeType === 'light' ? 'lightmode.css' : 'darkmode.css';
  };

  // 页面初始化时直接应用已保存的主题
  setTheme(savedTheme);

  // 绑定切换按钮点击事件
  toggleBtn.addEventListener('click', () => {
    // 根据当前加载的CSS判断当前主题，切换为对应相反主题
    const currentTheme = themeStyleLink.getAttribute('href') === 'darkmode.css' ? 'dark' : 'light';
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    // 仅存储主题类型字符串到本地存储
    localStorage.setItem('theme', newTheme);
  });
});

页面调整说明 #

• 两个HTML页面只需要保留<script type="text/javascript" src="darkmode.js"></script>这一行JS引用即可，不需要额外写内联主题逻辑
• 确保两个页面的样式引入标签都保留<link rel="stylesheet" type="text/css" href="darkmode.css" id="theme-link">写法，不要丢失id="theme-link"属性
• JS逻辑放在DOMContentLoaded回调里执行，能避免页面DOM未加载完成时获取元素报错，兼容性更好

优化提示：后续可以把双CSS文件的方案改成单CSS+CSS变量+根节点class控制主题的方案，不需要维护两份独立样式文件，代码维护成本更低。当前按上述修改后，你现有的切换CSS文件的方案已经可以正常实现刷新、跨页面保持主题设置的效果。

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