用于检测深浅色主题的JS代码运行异常问题排查求助

故障原因排查 #

故障1（无痕模式无主题生效）原因 #

无 localStorage 存储记录的 else 分支中，仅绑定了系统主题变化的 change 事件监听，没有在页面首次加载时主动读取当前系统的主题偏好并执行初始化设置。change 事件仅会在系统主题切换时才触发回调，页面刚加载时不会主动执行，因此无任何主题类被添加到根节点上，导致样式不生效。

故障2（跨页面设置后返回不生效）原因 #

有两个常见触发点：

• 若你是跳转回当前页面（页面会重新加载），需要检查其他页面存储的 theme 值是否和你当前页面主题类名完全一致，是否存在拼写错误；
• 若你是在未刷新当前页面的情况下从其他标签页切回，当前页面没有监听 storage 事件来同步其他页面的主题修改，就不会触发主题更新。

修复后代码 #

function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    // 若需要保留html根节点其他类名，可替换为以下写法避免覆盖
    // document.documentElement.classList.remove('theme-simple-light', 'theme-simple-dark');
    // document.documentElement.classList.add(themeName);
    document.documentElement.className = themeName;
}

(function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        setTheme(savedTheme);
    } else {
        // 新增：首次加载主动读取系统主题完成初始化
        const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(isDarkMode ? 'theme-simple-dark' : 'theme-simple-light');
        // 保留系统主题变化的监听逻辑
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            setTheme(event.matches ? 'theme-simple-dark' : 'theme-simple-light');
        });
    }
    // 新增：监听其他页面的storage更新，实现同浏览器跨标签页主题同步
    window.addEventListener('storage', e => {
        if (e.key === 'theme') {
            setTheme(e.newValue);
        }
    });
}());

额外兼容优化 #

部分浏览器隐私模式下会禁用 localStorage，直接调用读写方法会抛出异常导致整体代码中断，可新增异常捕获兼容该场景：

// 安全读取存储的主题
function getSavedTheme() {
    try {
        return localStorage.getItem('theme');
    } catch (e) {
        return null;
    }
}
// 安全存储主题
function saveTheme(themeName) {
    try {
        localStorage.setItem('theme', themeName);
    } catch (e) {}
}

替换原代码中直接调用 localStorage 的逻辑即可。

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