解决JavaScript暗黑模式页面加载时未激活的问题-js教程-PHP中文网

解决JavaScript暗黑模式页面加载时未激活的问题

DDD

发布： 2025-10-06 12:40:01

原创

505人浏览过

解决javascript暗黑模式页面加载时未激活的问题

摘要

本文旨在解决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的元素，通常是<body>元素。
- window.matchMedia('(prefers-color-scheme: dark)').matches：检测用户系统是否偏好暗黑模式。
- $(bodyMode).addClass("bodyDark")：使用jQuery为<body>元素添加bodyDark类，激活暗黑模式样式。
- $(bodyMode).removeClass("bodyLight bodyHalfLit")：移除其他主题模式的CSS类。

在页面加载时立即调用该函数

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

现在，我们需要确保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();

登录后复制

注意事项：