代码解释：
- initTheme() 函数： 该函数包含了原代码中用于判断用户系统主题模式并切换页面主题的逻辑。
- 点击事件监听器： 保留了原有的点击事件监听器，确保用户点击按钮时也能切换主题。
- initTheme() 的立即调用： 在代码的最后，我们直接调用了 initTheme() 函数。这意味着当页面加载完成后，JavaScript代码会立即执行该函数，从而初始化主题。
注意事项
- 确保jQuery已加载： 代码中使用了 jQuery 的 addClass() 和 removeClass() 方法。请确保在执行这段 JavaScript 代码之前，jQuery 库已经正确加载。
- 代码放置位置： 建议将这段 JavaScript 代码放在 </body> 标签之前，或者使用 DOMContentLoaded 事件监听器，以确保在 DOM 元素加载完成后再执行代码。
document.addEventListener('DOMContentLoaded', function() {
// 在这里放置你的 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 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();
});
// 立即执行初始化函数
initTheme();
});- CSS样式的优先级： 确保你的CSS样式具有足够的优先级，能够覆盖默认样式。 使用 !important 声明时需要谨慎，过度使用可能会导致样式管理混乱。
总结
通过定义一个初始化主题的函数，并在页面加载完成后立即调用该函数，可以有效地解决暗黑模式或其他主题模式在页面加载时失效的问题。 结合点击事件监听器，可以实现用户交互式的主题切换功能，提升用户体验。 确保JavaScript代码在DOM元素加载完成后执行，并注意CSS样式的优先级，是实现该方案的关键。
