加载期间暗模式不工作
我正在尝试制作一个深色模式切换按钮，它可以在点击时在深色和浅色模式之间切换，用户偏好也可以使用localStorage存储。用户应手动按下该按钮以切换到其他模式。如果用户选择的是深色模式，则每个页面都将处于深色模式，刷新时不会转到浅色模式。到目前为止，一切看起来都很好，但真正的问题来自于加载时间。页面的加载时间接近1秒，在这段时间内，即使用户选择的是暗模式，页面也会显示为亮模式。我不希望这样的事情发生。我希望加载时间段在黑暗模式，如果用户的选择是黑暗的。这是我当前的代码：
<script>
const body = document.querySelector('body');
function toggleDark() {
if (body.classList.contains('dark')) {
body.classList.remove('dark');
localStorage.setItem("theme", "light");
} else {
body.classList.add('dark');
localStorage.setItem("theme", "dark");
}
}
if (localStorage.getItem("theme") === "dark") {
body.classList.add('dark');
}
</script>
<style>
body {background-color: #ffffff}
body.dark {background-color: #000000; color: #ffffff}
</style>
<button class="dark-mode" id="btn-id" onclick="toggleDark()"></button>回答 5
Stack Overflow用户
发布于 2020-10-02 16:13:48
另一种选择是在<head>元素中加载脚本，并在html元素上切换类
为此，您可以使用document.documentElement.classList，因为它是HTML元素
然后将您的CSS更改为
html.dark body {}等等。HTML上的类选择器
html body {background-color: #ffffff}
html.dark body {background-color: #000000; color: #ffffff}<script>
const body = document.querySelector('body');
function toggleDark() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
//localStorage.setItem("theme", "light");
} else {
document.documentElement.classList.add('dark');
//localStorage.setItem("theme", "dark");
}
}
//if (localStorage.getItem("theme") === "dark") {
document.documentElement.classList.add('dark');
//}
</script>
<button class="dark-mode" id="btn-id" onclick="toggleDark()">DARK</button>
由于限制，堆栈溢出时
localStorage不可用-请取消注释这些行以查看其工作情况
Stack Overflow用户
发布于 2020-10-02 15:23:12
存储到后端数据库。然后，在提供HTML内容时，为您的元素放置适当的类/样式。这将消除加载时间之间的闪烁：
<!DOCTYPE html>
<html>
<head>
<style>
/* Use Less/Sass for better management */
.theme.light {
background-color: #ffffff;
}
.theme.dark {
background-color: #000000; color: #ffffff;
}
</style>
</head>
<body class="theme <?= $user->themeName; ?>">
</body>
</html>Stack Overflow用户
发布于 2020-10-02 15:42:31
切换起来有点棘手，并且有一个默认的主题
注意，localStorage调用在这里是不起作用的
在下面的代码中替换
使用localStorage.getItem("theme") || "light"的const theme = "dark";
并取消对// localStorage.setItem("theme", body.classList.contains("dark") ? "light" : "dark");的注释
在服务器上
.dark { background-color: black; color: white; }<!DOCTYPE html>
<html>
<head>
<style>
.theme {
background-color: white;
color: black;
}
</style>
<script>
const theme = "dark"; // localStorage.getItem("theme") || "theme"
if (theme === "dark") {
const st = document.createElement("style");
st.id="darkStyle";
st.innerText = `body.theme { background-color: black; color: white; }`;
document.querySelector("head").appendChild(st);
}
window.addEventListener("load", function() {
document.getElementById("toggleTheme").addEventListener("click", function() {
const body = document.querySelector("body");
const darkStyle = document.getElementById("darkStyle");
if (darkStyle) {
darkStyle.remove(); // remove stylesheet now we know what the user wants
body.classList.remove("theme");
}
const theme = body.classList.contains("theme");
body.classList.toggle('theme',!theme);
body.classList.toggle('dark',theme);
// localStorage.setItem("theme", theme ? "light" : "dark"); // uncomment on your server
});
})
</script>
</head>
<body class="theme">
Here is the body
<button id="toggleTheme" type="button">Toggle theme</button>
</body>
</html>
https://stackoverflow.com/questions/64167519
复制相似问题
腾讯云开发者
