本文旨在解决 WordPress 网站中 JavaScript 编写的主题切换功能在页面加载时未激活的问题。通过修改 JavaScript 代码，在页面加载时立即执行主题初始化函数，确保主题样式在初始状态下正确应用，从而避免页面加载后需要手动点击才能激活主题的困扰。
在开发具有主题切换功能的网站时，经常会遇到一个问题：JavaScript 代码在页面加载完成后才能生效，导致初始加载时主题样式不正确。以下提供一种解决方案，确保主题在页面加载时立即生效。
问题分析
问题的原因在于，原本的代码逻辑依赖于用户的点击事件来触发主题样式的应用。在页面首次加载时，没有任何点击事件发生，因此主题样式没有被初始化。
解决方案：初始化函数与立即执行
解决问题的关键在于创建一个初始化函数，并在页面加载时立即执行该函数。这样，无论用户是否点击，主题样式都会在页面加载时被正确应用。
立即学习“Java免费学习笔记（深入）”；
1. 创建初始化函数
将原先点击事件中的主题切换逻辑封装到一个名为 initTheme() 的函数中。该函数负责根据用户系统偏好设置（深色模式或浅色模式）来应用相应的主题样式。
function initTheme(){
const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
let bodyMode = document.querySelector("#pageMode");
if (UserMode) {
$(bodyMode).addClass("bodyDark");
$(bodyMode).removeClass("bodyLight bodyHalfLit");
} else {
$(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit");
}
}2. 修改点击事件监听器
修改点击事件监听器，使其在点击时调用 initTheme() 函数。
let SystemMode = document.querySelector(".pageSystemMode");
SystemMode.addEventListener("click", function () {
initTheme();
});3. 立即执行初始化函数
在代码的末尾，立即执行 initTheme() 函数。这将确保在页面加载完成后，主题样式立即被初始化。
initTheme();
完整代码示例：
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 initTheme(){
const UserMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (UserMode) {
$(bodyMode).addClass("bodyDark");
$(bodyMode).removeClass("bodyLight bodyHalfLit");
} else {
$(bodyMode).removeClass("bodyLight bodyDark bodyHalfLit");
}
}
SystemMode.addEventListener("click", function () {
initTheme();
});
DarkMode.addEventListener("click", function () {
$(bodyMode).addClass("bodyDark");
$(bodyMode).removeClass("bodyHalfLit");
});
HalfLitMode.addEventListener("click", function () {
$(bodyMode).addClass("bodyHalfLit");
$(bodyMode).removeClass("bodyDark");
});
LightMode.addEventListener("click", function () {
$(bodyMode).addClass("bodyLight");
$(bodyMode).removeClass("bodyDark bodyHalfLit");
});
initTheme();注意事项
- 确保 jQuery 库已正确加载，因为代码中使用了 jQuery 的 addClass() 和 removeClass() 方法。
- #pageMode 元素必须存在于 HTML 中，并且 CSS 样式已正确定义，以确保主题样式能够正确应用。
- 如果主题切换逻辑涉及更复杂的操作，例如存储用户偏好设置到 Cookie 或 Local Storage 中，则需要在 initTheme() 函数中进行相应的处理。
- 如果网站使用了缓存机制，请确保 JavaScript 文件不会被缓存，否则修改后的代码可能不会立即生效。
总结
通过将主题切换逻辑封装到初始化函数中，并在页面加载时立即执行该函数，可以有效地解决 JavaScript 主题切换代码在页面加载时未生效的问题。这种方法简单易懂，并且可以适用于各种不同的主题切换场景。在实际开发中，可以根据具体需求对代码进行适当的调整和优化。
