在JavaScript中切换WordPress样式表实现明暗模式失败求助

你的代码存在的核心问题 #

• 前端无法访问PHP的wp.styles对象：WordPress的$wp_styles是后端PHP的全局对象，前端JavaScript完全无法直接操作这个变量，你写的wp.styles.registered属于无效调用。
• 未定义stylesheets变量：JS代码中使用了stylesheets.first和stylesheets.second，但该变量从未声明或赋值，会直接抛出引用错误，导致代码终止执行。
• 样式切换逻辑错误：即便能操作后端的样式队列，这种方式也无法在页面渲染完成后动态切换已加载的样式表——PHP输出样式表的过程在页面加载前就已完成，前端只能通过DOM操作修改现有样式。

正确的实现方案 #

方案一：动态替换样式表链接（适合完全独立的明暗样式文件） #

1. 调整PHP代码（functions.php）

给默认加载的样式表添加ID，方便前端定位：

function theme_register_styles() { 
    // 注册并默认加载深色样式，添加id属性用于前端识别
    wp_enqueue_style( 
        'dark-stylesheet', 
        get_template_directory_uri() . '/css/style.min.css', 
        array(), 
        false, 
        'all',
        array( 'id' => 'theme-main-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_register_styles' );

2. 前端JS实现切换

// 获取样式表元素和切换按钮
const styleElement = document.getElementById('theme-main-style');
const toggleButton = document.getElementById('theme-toggle-btn');
// 定义明暗样式的URL（通过PHP动态输出避免硬编码）
const darkThemeUrl = '<?php echo esc_js(get_template_directory_uri() . "/css/style.min.css"); ?>';
const lightThemeUrl = '<?php echo esc_js(get_template_directory_uri() . "/css/style_light.min.css"); ?>';

// 切换主题逻辑
toggleButton.addEventListener('click', function() {
    if (styleElement.href.includes('style.min.css')) {
        styleElement.href = lightThemeUrl;
        localStorage.setItem('user-theme', 'light');
    } else {
        styleElement.href = darkThemeUrl;
        localStorage.setItem('user-theme', 'dark');
    }
});

// 页面加载时恢复用户之前的选择
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('user-theme');
    if (savedTheme === 'light') {
        styleElement.href = lightThemeUrl;
    }
});

方案二：通过Body类切换（推荐，样式表共存，用CSS优先级控制） #

这种方式更灵活，不需要动态替换样式文件，通过给body添加/移除类来切换样式优先级。

1. PHP代码（functions.php）

同时加载两个样式表：

function theme_register_styles() { 
    wp_enqueue_style( 'dark-stylesheet', get_template_directory_uri() . '/css/style.min.css' );
    wp_enqueue_style( 'light-stylesheet', get_template_directory_uri() . '/css/style_light.min.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_register_styles' );

2. 调整样式表内容

在浅色样式文件中，所有样式都嵌套在body.light选择器下，确保优先级：

/* style_light.min.css */
body.light {
    background-color: #ffffff;
    color: #1a1a1a;
}
body.light .site-header {
    background-color: #f5f5f5;
}
/* 其他浅色样式都按此格式嵌套 */

3. 前端JS控制类切换

const toggleButton = document.getElementById('theme-toggle-btn');

toggleButton.addEventListener('click', function() {
    document.body.classList.toggle('light');
    // 保存用户选择到本地存储
    const isLightMode = document.body.classList.contains('light');
    localStorage.setItem('user-theme', isLightMode ? 'light' : 'dark');
});

// 页面加载时恢复主题
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('user-theme');
    if (savedTheme === 'light') {
        document.body.classList.add('light');
    }
});

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