移动端暗黑模式失效求助：多设备代码部署异常排查

核心问题分析 #

你遇到的移动端暗黑模式失效，大概率是以下两个核心原因：

1. 重复DOM ID冲突：桌面端和移动端头部都用了id="darkModeToggle"，document.getElementById()只会返回DOM中第一个匹配的元素，导致移动端的开关从未绑定事件。
2. DOMContentLoaded事件绑定时机问题：如果移动端头部的JS在页面DOMContentLoaded事件触发后才加载，绑定的事件监听不会生效。

具体修复步骤 #

1. 修正HTML：避免重复ID，改用类选择器 #

把两个头部的开关元素ID替换为类，消除DOM重复ID冲突：

<!-- 桌面端头部 -->
<div class="dark-mode-toggle">
    <label class="switch">
        <input type="checkbox" class="dark-mode-toggle-input">
        <span class="slider round"></span>
    </label>
    <p class="toggle-label">DarkMode</p>
</div>

<!-- 移动端头部 -->
<div class="dark-mode-toggle">
    <label class="switch">
        <input type="checkbox" class="dark-mode-toggle-input">
        <span class="slider round"></span>
    </label>
    <p class="toggle-label">DarkMode</p>
</div>

2. 重构JS：统一处理所有开关，兼容延迟加载 #

修改JS逻辑，不管开关在哪个头部都能绑定事件，同时支持动态加载的DOM元素：

// 立即应用暗黑模式偏好，无需等待DOM加载
const darkModePreference = localStorage.getItem('darkMode') === 'true';
if (darkModePreference) {
    document.documentElement.classList.add('dark-mode');
}

// 初始化所有暗黑模式开关的函数
function initDarkModeToggles() {
    const toggles = document.querySelectorAll('.dark-mode-toggle-input');
    toggles.forEach(toggle => {
        // 同步开关状态与本地存储
        toggle.checked = darkModePreference;
        // 绑定切换事件
        toggle.addEventListener('change', function() {
            const isDarkMode = this.checked;
            if (isDarkMode) {
                document.documentElement.classList.add('dark-mode');
                localStorage.setItem('darkMode', 'true');
            } else {
                document.documentElement.classList.remove('dark-mode');
                localStorage.setItem('darkMode', 'false');
            }
            // 同步所有开关状态，避免两端状态不一致
            toggles.forEach(t => t.checked = isDarkMode);
        });
    });
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initDarkModeToggles);
// 监听DOM变化，兼容移动端头部动态加载的情况
const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) initDarkModeToggles();
    });
});
observer.observe(document.body, { childList: true, subtree: true });

3. 确保CSS全局生效 #

把暗黑模式的CSS放在全局样式文件中，不要仅嵌入桌面端或移动端头部，确保移动端页面元素也能被.dark-mode类覆盖：

/* 全局开关样式（保留原样式） */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    margin-right: 15px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
/* ... 保留原开关样式代码 ... */

/* 暗黑模式全局样式，补充移动端头部适配 */
.dark-mode .whb-color-dark:not(.whb-with-bg) {
    background-color: #222;
}
/* 新增移动端头部的暗黑模式样式示例 */
.dark-mode .mobile-header-container {
    background-color: #222;
    color: #fff;
}

额外排查点 #

• 用浏览器开发者工具检查移动端开关元素是否被CSS隐藏（比如display: none）。
• 确认移动端浏览器的localStorage可正常读写，部分隐私模式会限制本地存储功能。

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