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，并且闪烁的次数可能会更少。但是：仍有可能会闪烁，因为加载页面后不会立即设置该类。

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

1 个答案: