javascript - 当我在深色模式下刷新页面时，会显示网站的常规颜色

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";
}

当我刷新或重新进入页面时，页面有一瞬间变为常规颜色。我该怎么做才能在黑暗模式下完全加载它？

此外，有时它会首先加载(不到一秒)作为纯 html 文件，然后再应用所有必要的 css 样式。关于如何解决第二个问题有什么想法吗？

Answer 1

问题是您正在使用 JavaScript 加载样式表。一种可能的解决方案是使用一个样式表 (style.css)，在其中为浅色/深色主题设置不同的颜色。然后，使用类，您可以将 body 的类设置为“.darkbody”或“.lightbody”之类的内容。

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