我现在遇到的问题是，在切换到暗模式之前重新进入网页时，网站的常规颜色会显示出来。我使用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 - 当我在黑暗模式下刷新页面时，网站的常规颜色就会显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57969801/