页面加载时JS未执行：WordPress多主题模式自动激活问题

你的核心问题是页面加载时未自动应用用户选择的模式或系统默认模式，仅靠点击触发功能。以下是修改后的完整实现，包含模式记忆和自动初始化功能：

修改后的JavaScript代码 #

let bodyMode = document.querySelector("#pageMode");
let SystemMode = document.querySelector(".pageSystemMode");
let DarkMode = document.querySelector(".pageDarkMode");
let LightMode = document.querySelector(".pageLightMode");
let HalfLitMode = document.querySelector(".pageHalfLitMode");

// 封装模式应用函数，避免重复代码
function applyMode(mode) {
    $(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit");
    switch(mode) {
        case 'dark':
            $(bodyMode).addClass("bodyDark");
            break;
        case 'light':
            $(bodyMode).addClass("bodyLight");
            break;
        case 'half-lit':
            $(bodyMode).addClass("bodyHalfLit");
            break;
        case 'system':
            // 检测系统当前模式
            const isDarkSystem = window.matchMedia('(prefers-color-scheme: dark)').matches;
            if(isDarkSystem) {
                $(bodyMode).addClass("bodyDark");
            } else {
                // 恢复默认的#eee背景，不添加额外类
                $(bodyMode).removeClass("bodyDark");
            }
            break;
    }
}

// 保存用户偏好到本地存储
function saveUserPreference(mode) {
    localStorage.setItem('pageThemeMode', mode);
}

// 页面初始化时应用模式
function initMode() {
    const savedMode = localStorage.getItem('pageThemeMode');
    if(savedMode) {
        applyMode(savedMode);
    } else {
        // 无保存偏好时跟随系统
        applyMode('system');
    }
}

// 系统模式变化时自动更新（仅当当前是跟随系统模式时）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    const currentMode = localStorage.getItem('pageThemeMode');
    if(currentMode === 'system' || !currentMode) {
        applyMode('system');
    }
});

// 绑定按钮事件
SystemMode.addEventListener("click", function () {
    applyMode('system');
    saveUserPreference('system');
});

DarkMode.addEventListener("click", function () {
    applyMode('dark');
    saveUserPreference('dark');
});

HalfLitMode.addEventListener("click", function () {
    applyMode('half-lit');
    saveUserPreference('half-lit');
});

LightMode.addEventListener("click", function () {
    applyMode('light');
    saveUserPreference('light');
});

// 页面加载完成后初始化模式
document.addEventListener('DOMContentLoaded', initMode);

修改后的CSS代码（原代码无需大幅调整，保留核心样式） #

.main-selectMode {
  position: absolute;
  top: 20%;
  left: 2%;
}

a.main-btn {
  font-weight: 900;
  padding: 10px;
  direction: rtl;
  color: #fff;
  background: #2512b0;
  border: none;
  box-shadow: 0 0 4px #000, 0 0 4px #fff;
}

a.main-btn:hover,
.btn-secondary:hover,
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #fff;
  background: #2512b0;
  border: none;
  box-shadow: 0 0 4px #000, 0 0 4px #fff;
}

.main-btn::before {
  margin: 0 7px 0 10px;
}

.main-btn::after {
  margin: 0 10px 0 7px;
}

ul.pageMode li:hover a {
  background: #0058ff;
  color: #fff;
}

ul.pageMode li a {
  direction: rtl;
  padding: 10px;
  text-align: right;
}

ul.pageMode li a::before {
  margin: 0 7px 0 10px;
}

/* ***************  Mode ******************* */
#pageMode {
  background: #eee;
}

.bodyLight {
  background: #ccc !important;
}

.bodyDark {
  background: #0b0312 !important;
}

.bodyHalfLit {
  background: #777281 !important;
}

修改后的HTML代码（移除重复资源引入） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="pageMode">
    <div class="dropdown main-selectMode">
        <a class="fas fa-desktop main-btn btn btn-secondary dropdown-toggle" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            页面模式
        </a>
        <ul class="dropdown-menu pageMode">
            <li class="SystemMode"><a class="fas fa-desktop pageSystemMode dropdown-item">跟随系统</a></li>
            <li class="LightMode"><a class="fas fa-sun pageLightMode dropdown-item">浅色模式</a></li>
            <li class="LightMode"><a class="fas fa-cloud-sun pageHalfLitMode dropdown-item">半亮模式</a></li>
            <li class="DarkMode"><a class="fas fa-moon pageDarkMode dropdown-item">深色模式</a></li>
        </ul>
    </div>
</body>

关键修改说明 #

1. 封装复用函数：将模式切换的DOM操作封装为applyMode，避免重复代码，便于维护
2. 本地存储记忆：新增saveUserPreference保存用户选择，页面加载时优先读取存储的偏好
3. 自动初始化：通过DOMContentLoaded事件触发initMode，页面加载完成后自动应用模式
4. 系统模式监听：监听系统颜色模式变化，当用户选择“跟随系统”时自动更新页面样式
5. 修复冗余资源：移除HTML中重复引入的Bootstrap CSS链接，减少加载开销

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