Javascript 当我在黑暗模式下刷新页面时，网站的常规颜色会显示出来

我现在遇到的问题是，在切换到深色模式之前，当我重新进入网页时，我的网站的常规颜色会显示出来。我使用localstorage来记住，用户选择了暗模式，暗模式CSS存储在单独的CSS文件中

我一直在寻找一些关于CSS完全加载后如何显示网站的答案，但没有一个答案在我的案例中有效

我正在考虑使用html主体中的onload函数来检查应该应用哪个样式表，但我不知道如何正确地执行它

下面是我用来设置暗模式，然后将该信息存储在localStorage中的代码：

function toggleStyles() {
var style = document.getElementById("style");
var btn = document.getElementById("darkModeBtn");
if (btn.innerHTML==="Light Mode") {
style.setAttribute('href', "style.css");
btn.innerHTML = "Dark Mode";
localStorage.setItem("mode", "light");
mode = localStorage.getItem("mode");

} else {
style.setAttribute('href', "styleDarkMode.css");
btn.innerHTML = "Light Mode";
localStorage.setItem("mode", "dark");
mode = localStorage.getItem("mode");
}
}

let mode;
mode = localStorage.getItem("mode");

if (mode === "dark"){

document.getElementById("style").setAttribute('href',     
"styleDarkMode.css");
document.getElementById("darkModeBtn").innerHTML = "Light Mode";

} else {

document.getElementById("style").setAttribute('href', 
"style.css");
document.getElementById("darkModeBtn").innerHTML = "Dark Mode";
}

当我刷新或重新进入页面时，在一瞬间，页面以常规颜色显示。如何在黑暗模式下完全加载

---

此外，有时在应用所有必要的css样式之前，它首先加载（不到一秒钟）为普通html文件。关于如何解决第二个问题有什么想法吗？

问题是您正在使用javascript加载样式表。一个可能的解决方案是使用一个样式表（style.css），在其中为亮/暗主题设置不同的颜色。然后，使用类，可以将身体的类设置为“.darkbody”或“.lightbody”之类的值

---

这样，CSS在页面加载后就不会加载，而且它可能会闪烁得更少。但是：仍然存在闪烁的可能性，因为在加载页面后不会立即设置类。

不要使用JavaScript设置样式sheef引用，否则页面不会在未设置样式的情况下闪烁。或者，静态地设置一个默认/空的样式表（显示一个通用加载屏幕或其他东西并隐藏其余部分），然后使用JS加载实际的样式表。@joachimsuer第二个选项是静态加载页面，我觉得这是个好主意。如何隐藏页面，然后在页面完全加载后显示？我应该使用“onload”功能吗？如果我在页面内容完全加载之前先显示一个简单的加载页面，会有帮助吗？也就是说，闪烁会停止吗？理论上，我认为这是一个好主意，不是吗？我认为最好的办法是使用一个样式表，加载程序往往会让用户离开网站，因为每次加载页面时，他们都必须等待加载程序。或许本文可以提供帮助：