ASP.NET应用暗黑模式页面加载白屏闪烁问题求助

问题根源 #

你当前的主题设置脚本绑定在window.load事件上，这个事件要等页面所有资源（图片、样式、脚本）加载完成后才触发——此时页面已经渲染出默认的浅色背景，所以会出现白屏闪烁。

解决方案：在页面渲染前完成主题设置 #

核心思路是把主题检测逻辑提前到<head>标签内（所有样式加载完成后、页面开始渲染前）执行，让浏览器一开始就渲染正确的主题样式，从根源上避免闪烁。

1. 调整脚本位置与逻辑

在<head>的末尾添加以下脚本（必须放在所有CSS引用之后）：

<script>
    // 读取本地存储的主题偏好，无偏好则跟随系统深色模式
    const savedTheme = localStorage.getItem("theme");
    const isDarkMode = savedTheme ? savedTheme === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
    
    // 直接给根元素添加主题类，确保页面渲染前生效
    document.documentElement.classList.toggle("dark-theme", isDarkMode);
</script>

原页面中的脚本只保留主题切换逻辑即可（改用DOMContentLoaded，比window.load触发更早）：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const btn = document.querySelector(".btn-toggle");
        btn.addEventListener("click", function () {
            const isDark = document.documentElement.classList.contains("dark-theme");
            document.documentElement.classList.toggle("dark-theme");
            localStorage.setItem("theme", isDark ? "light" : "dark");
        });
    });
</script>

2. 优化CSS选择器（可选但更稳妥）

把CSS中的body.dark-theme改为html.dark-theme body，让主题类作用在根元素上，能更全面地覆盖全局样式：

html.dark-theme body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #121212;
}

html.dark-theme .well {
    background-color: #181818;
    color: #c1c1c1;
    border: none;
}

html.dark-theme .btn-default {
    background-color: #222222;
    color: #c1c1c1;
    border: solid thin #353535;
}

3. 补充浅色主题默认样式（可选）

如果页面未显式定义浅色主题的背景色，浏览器会默认渲染白色，建议补充默认样式避免样式断层：

body {
    background-color: #ffffff;
    /* 其他默认基础样式 */
}

为什么你之前的方案无效？ #

你尝试的"阻止页面渲染再显示"方法失效，大概率是因为脚本执行时机过晚：如果脚本放在<body>内，页面已经开始渲染；即使隐藏了<body>，显示操作的时机还是晚于初始渲染，依然会出现闪烁。而提前在<head>中设置主题类，是让浏览器从一开始就加载正确的主题样式，完全跳过错误渲染阶段。

内容的提问来源于stack exchange，提问作者Mary Lynn