刷新時圖標切換消失
[英]Icon toggle disappears on refresh
問題描述
我正在嘗試在黑暗模式項目中的月亮圖標和太陽圖標之間切換。 最初的 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);
});
知道我在這里缺少什么嗎？
我創建了一個codepen來顯示這個問題
2 個解決方案
解決方案1
1 已采納 2022-02-13 03:59:55
正如其他人所說，您使用的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);
});
你可能會進一步干燥它：:)
解決方案2
0 2022-02-13 03:43:42
每次要進行切換時都需要切換這兩個類。
您的代碼正在使用切換方法，就好像它將月亮換成太陽一樣，但它實際上只是切換個人 class 是否存在。 當我們需要進行更改時，我已經切換了這兩個類，並注釋掉了本地存儲內容以避免 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>
切換后菜單消失
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.