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

摘要

本文旨在解决WordPress网站在实现暗黑模式时，页面加载后主题模式未立即生效的问题。问题根源在于主题切换逻辑仅绑定在点击事件上，导致页面初次加载时未执行。本文提供了一种通过定义初始化函数并在页面加载时立即调用该函数的方法，确保用户在访问网站时，主题模式能根据用户系统设置或预设模式立即生效，无需用户手动触发。

确保页面加载时立即执行JavaScript主题切换

在构建具有暗黑模式或其他主题模式的网站时，一个常见的问题是，主题模式在页面加载时没有立即生效，而是需要用户点击按钮或其他元素才能激活。这通常是因为主题切换的JavaScript代码只绑定在点击事件上，而没有在页面加载时执行。为了解决这个问题，我们需要确保主题切换逻辑在页面加载完成后立即运行。

解决方案的核心在于：

1. 定义一个初始化主题的函数： 将所有主题切换的逻辑封装在一个函数中。
2. 在页面加载时立即调用该函数： 使用JavaScript在页面加载完成后立即执行该函数。

具体实现步骤如下：

立即学习“Java免费学习笔记（深入）”；

1. 定义初始化主题的函数

   首先，将现有的点击事件处理函数中的主题切换逻辑提取出来，放入一个名为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");
       }
   }

   代码解释：

   

   Multiavatar

   Multiavatar是一个免费开源的多元文化头像生成器，可以生成高达120亿个虚拟头像

   下载
   • document.querySelector("#pageMode")：获取页面中ID为pageMode的元素，通常是元素。
   • window.matchMedia('(prefers-color-scheme: dark)').matches：检测用户系统是否偏好暗黑模式。
   • $(bodyMode).addClass("bodyDark")：使用jQuery为元素添加bodyDark类，激活暗黑模式样式。
   • $(bodyMode).removeClass("bodyLight bodyHalfLit")：移除其他主题模式的CSS类。

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

   现在，我们需要确保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类的名称和主题切换逻辑。

总结：

通过定义一个初始化主题的函数，并在页面加载时立即调用该函数，可以确保暗黑模式或其他主题模式在页面加载后立即生效，提供更好的用户体验。同时，保留点击事件监听器，允许用户手动切换主题模式。