暗黑模式刷新页面时先加载浅色主题的延迟问题求助

问题根源 #

当前代码在window.onload事件中执行主题检测，该事件要等页面所有资源（图片、样式、脚本等）加载完成后才触发。此时页面已经渲染了默认的浅色主题，之后再切换暗黑主题就会出现1-2秒的视觉闪烁。Promise封装无法改变window.onload触发时机晚于页面初始渲染的问题。

解决方案 #

把主题检测逻辑移到<head>标签内，在DOM开始渲染前同步执行，确保页面绘制前就应用暗黑主题类。

1. 在<head>中添加主题检测脚本

直接在页面头部同步执行，无需等待页面加载完成：

(function checkTheme() {
    const userPreference = localStorage.getItem('theme');
    if (userPreference === "dark") {
        // 给html元素添加主题类，此时body还未解析，操作html同样能让CSS变量生效
        document.documentElement.classList.add("dark-theme");
    }
})();

2. 修改原window.onload中的逻辑

只保留复选框状态同步的逻辑，主题类已在head中提前应用：

window.onload = function() {
    var reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        openNextServiceTab(2);
    }

    // 仅同步复选框状态，主题类已提前设置
    const userPreference = localStorage.getItem('theme');
    if (userPreference === "dark") {
        document.getElementById("themeToggle").checked = true;
    }

    Promise.all([
        loadFilters(), 
        fillDropdown(), 
        initMap(),
    ]);
   
    if (window.location.pathname == '/login') {
        document.body.style.overflow = 'hidden';
    }
}

补充说明 #

• 操作document.documentElement（即<html>标签）而非body，是因为在<head>执行脚本时，<body>还未被浏览器解析，无法操作。而:root对应的就是<html>元素，给它添加.dark-theme类后，CSS变量的优先级和给body添加完全一致，不影响样式生效。
• 若原CSS中.dark-theme是针对body编写的，只需调整CSS选择器为html.dark-theme，或者保持原选择器不变（因为样式会从html继承到body），无需大幅修改样式代码。

内容的提问来源于stack exchange，提问作者Andries De Baere