图标切换在刷新时消失

我正在尝试在暗模式项目中在月亮图标和太阳图标之间切换。最初的javascript代码只是一个从白天模式切换到黑暗模式的按钮。经过一些研究，我最终得到了以下代码；有点"；有效但粗略；它从白天模式切换到黑暗模式，图标从月亮切换到太阳，但当我将偏好设置为黑暗模式(或在黑暗模式下刷新页面(后回到页面时，图标消失了。

const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
icon.classList.toggle("fa-sun-o");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
icon.classList.toggle("fa-moon-o");
}
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme")
? "light"
: "dark";
icon.classList.toggle("fa-sun-o");
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme")
? "dark"
: "light";
icon.classList.toggle("fa-moon-o");
}
localStorage.setItem("theme", theme);
});

知道我在这里缺了什么吗？

我创建了一个代码笔来显示问题

正如其他人所说，您使用的toggle方法会产生不一致的行为。

我重构了一些代码：

const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const makeDark = () => {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
icon.classList.add("fa-moon-o");
icon.classList.remove("fa-sun-o");
}
const makeLight = () => {
document.body.classList.remove("dark-theme");
document.body.classList.add("light-theme");
icon.classList.remove("fa-moon-o");
icon.classList.add("fa-sun-o");
}
const setPageThemeTo = (newLightDarkState) => {
newLightDarkState == "dark" ? makeDark() : makeLight();
}
let currentTheme = localStorage.getItem("theme");
if (!currentTheme) {
currentTheme = prefersDarkScheme.matches ? 'dark' : 'light';
}
setPageThemeTo(currentTheme);
btn.addEventListener("click", function () {
currentTheme = currentTheme == "dark" ? "light" : "dark";
localStorage.setItem("theme", currentTheme);
setPageThemeTo(currentTheme);
});

你可能会把它再干一点！：(

每次切换时，都需要切换这两个类。

您的代码使用了toggle方法，就好像它将月亮换成太阳一样，但它实际上只是切换单个类是否存在。当我们需要进行更改时，我已经切换了这两个类，并注释掉了本地存储的内容，以避免SO代码段出现JS错误，但在其他方面没有更改代码。

const btn = document.querySelector(".btn-mode");
const icon = document.querySelector(".mode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// const currentTheme = localStorage.getItem("theme");
// if (currentTheme == "dark") {
//   document.body.classList.toggle("dark-theme");
//   icon.classList.toggle("fa-moon-o");
// }
btn.addEventListener("click", function() {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme") ?
"light" :
"dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme") ?
"dark" :
"light";
}
icon.classList.toggle("fa-moon-o");
icon.classList.toggle("fa-sun-o");
// localStorage.setItem("theme", theme);
});

body {
--text-color: #555;
--bkg-color: #fff;
}
body.dark-theme {
--text-color: #999;
--bkg-color: #222;
}
body {
background: var(--bkg-color, #fff);
color: var(--text-color, #555);
}
.btn-mode {
background: #000;
font-size: 20px;
padding: 10px 10px;
width: 50px;
cursor: pointer;
color: #fff;
display: block;
text-align: center;
}
.btn-mode:hover {
color: #da0000;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="light-theme">
<h1>Some title</h1>
<ul>
<li class="btn-mode">
<i class="mode fa fa-sun-o"></i>
</li>
</ul>
</body </html>

相关内容

最新更新

热门标签：