WordPress中自定义DarkMode切换按钮问题求助（PHP+CSS）

你的当前代码已经通过给body添加dark-mode类实现模式切换，但全站未生效的核心原因是主题的头部、侧边栏、页脚等区域的元素有独立样式（或优先级更高的选择器），未被.dark-mode前缀的规则覆盖。以下是具体调整步骤：

一、补全全站元素的暗黑模式CSS规则 #

当前CSS仅覆盖了基础元素，需要针对主题的所有区域（头部、导航、侧边栏、页脚等）补充.dark-mode前缀的样式规则。示例如下：

/* 覆盖头部区域 */
.dark-mode .site-header {
    background-color: #1a1a1a;
    border-bottom-color: #333;
}

/* 覆盖导航菜单 */
.dark-mode .main-navigation a {
    color: #fff;
}
.dark-mode .main-navigation a:hover {
    color: #0074a2;
}

/* 覆盖侧边栏组件 */
.dark-mode .widget-area {
    background-color: #2d2d2d;
    color: #fff;
}
.dark-mode .widget-title {
    color: #fff;
}

/* 覆盖页脚区域 */
.dark-mode .site-footer {
    background-color: #1a1a1a;
    color: #ccc;
}

/* 覆盖表单输入框 */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode textarea {
    background-color: #2d2d2d;
    border-color: #444;
    color: #fff;
}

调试方法：用浏览器F12开发者工具查看未生效的元素，复制其原选择器并添加.dark-mode前缀，针对性编写样式。若原样式优先级过高，可临时添加!important（优先调整选择器层级，尽量少用）。

二、优化JS：添加本地存储持久化状态 #

当前切换后刷新页面会重置状态，添加本地存储可记住用户选择：

修改footer.php中的脚本为：

document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('dark-mode-toggle');
    
    // 页面加载时恢复之前的选择
    if (localStorage.getItem('darkMode') === 'enabled') {
        document.body.classList.add('dark-mode');
    }

    toggleBtn.addEventListener('click', function() {
        const isDarkMode = document.body.classList.toggle('dark-mode');
        // 保存状态到本地存储
        localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
    });
});

三、调整PHP按钮输出位置（可选） #

当前按钮通过wp_footer加载，若部分自定义模板不加载footer，可改用wp_body_open（WordPress 5.2+支持，确保按钮在所有页面渲染）：

修改functions.php中的代码：

function dark_mode_toggle() {
    ?>
    <button id="dark-mode-toggle">切换暗黑模式</button>
    <?php
}
// 替换原wp_footer钩子为wp_body_open
add_action( 'wp_body_open', 'dark_mode_toggle' );

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