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

Question

我现在遇到的问题是，在切换到暗模式之前重新进入网页时，网站的常规颜色会显示出来。 我使用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文件。 关于如何解决第二个问题的任何想法？

Answer 1

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

这样，页面加载后就不会加载CSS，并且它闪烁的次数可能更少。 但是：仍有可能会闪烁，因为在加载页面后未立即设置该类。