摘要
本文旨在解决WordPress网站在实现暗黑模式时，页面加载后主题模式未立即生效的问题。问题根源在于主题切换逻辑仅绑定在点击事件上，导致页面初次加载时未执行。本文提供了一种通过定义初始化函数并在页面加载时立即调用该函数的方法，确保用户在访问网站时，主题模式能根据用户系统设置或预设模式立即生效，无需用户手动触发。
确保页面加载时立即执行JavaScript主题切换
在构建具有暗黑模式或其他主题模式的网站时，一个常见的问题是，主题模式在页面加载时没有立即生效，而是需要用户点击按钮或其他元素才能激活。这通常是因为主题切换的JavaScript代码只绑定在点击事件上，而没有在页面加载时执行。为了解决这个问题，我们需要确保主题切换逻辑在页面加载完成后立即运行。
解决方案的核心在于：
定义一个初始化主题的函数： 将所有主题切换的逻辑封装在一个函数中。在页面加载时立即调用该函数： 使用JavaScript在页面加载完成后立即执行该函数。
具体实现步骤如下：
立即学习“Java免费学习笔记（深入）”；
定义初始化主题的函数
首先，将现有的点击事件处理函数中的主题切换逻辑提取出来，放入一个名为initTheme的函数中。该函数负责检测用户系统偏好，并根据偏好设置相应的CSS类。
function initTheme() { let bodyMode = document.querySelector("#pageMode"); 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"); }}
代码解释：
document.querySelector(“#pageMode”)：获取页面中ID为pageMode的元素，通常是元素。window.matchMedia(‘(prefers-color-scheme: dark)’).matches：检测用户系统是否偏好暗黑模式。$(bodyMode).addClass(“bodyDark”)：使用jQuery为元素添加bodyDark类，激活暗黑模式样式。$(bodyMode).removeClass(“bodyLight bodyHalfLit”)：移除其他主题模式的CSS类。
在页面加载时立即调用该函数
现在，我们需要确保initTheme函数在页面加载完成后立即执行。这可以通过多种方式实现，最简单的方法是在JavaScript代码的末尾直接调用该函数。
// ... (之前的代码)// 立即执行初始化函数initTheme();
此外，为了保持点击事件的正常工作，需要保留原有的事件监听器，并在事件处理函数中调用initTheme函数。
let SystemMode = document.querySelector(".pageSystemMode");SystemMode.addEventListener("click", function () { 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();
注意事项：
确保JavaScript代码在DOM加载完成后执行。可以将代码放在标签之前，或者使用DOMContentLoaded事件监听器。如果使用jQuery，确保jQuery库已经加载。根据实际情况调整CSS类的名称和主题切换逻辑。
总结：
通过定义一个初始化主题的函数，并在页面加载时立即调用该函数，可以确保暗黑模式或其他主题模式在页面加载后立即生效，提供更好的用户体验。同时，保留点击事件监听器，允许用户手动切换主题模式。
以上就是解决JavaScript暗黑模式页面加载时未激活的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526988.html
微信扫一扫 
支付宝扫一扫 
