我一直在尝试在网页上实现持久的暗模式，因为当用户浏览页面时，他们的选择会被记住。此外，我添加了一个切换暗/亮模式按钮，以获得更好的用户体验。因此，我想出了这段代码：注意：如果滚动太多，可以在 https://gist.github.com/samiuljoy/3f521a59a8cefdc5a80533655c0bd240找到以下代码的要点<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#002f30"><style>body { padding: 25px; color: black; font-size: 25px;}.btn { background: white; border: 1px solid #10101c; color: #10101c; border-radius:0.5rem;}a { text-decoration: none; color: #006262; border-bottom: 1px dotted #192841; font-style: italic;}body.dark { background-color: #10101c; color: #778899;}body.dark .btn { background: #10101c; color: #708090; border: 1px solid #002e43; border-radius:0.5rem;}body.dark a { text-decoration: none; color: #778899; border-bottom: 1px dotted #d5c4a1; font-style: italic;}</style></head><body><h1 style="margin-top: 0">page 1</h1><h2 style="margin-top: 0">Toggle Dark/Light Mode</h2><p>Click the button to toggle between dark and light mode for this page.</p><p>This is a link to a second page <a href="test2.html">click</a></p><button id="mode" class="btn" onclick="toggle()">Toggle dark mode</button><script>function toggle() {// This bit is for the toggling between dark and light mode let element = document.body; element.classList.toggle("dark"); // This part is for toggling the text inside the button var toggle = document.getElementById("mode"); if (toggle.innerHTML === "Toggle dark mode") { toggle.innerHTML = "Dark mode it is"; } 运行代码时，除了持久性部分外，一切正常。如果启用了暗模式，并且我导航到相同 html 代码的第二页，它会返回默认的亮模式。我做的代码对吗？PS我是Javascript的新手/初学者
1 回答
慕田峪9158850
TA贡献1794条经验 获得超8个赞
// Using a local variable since stack overflow doesn't allow localstorage operations for security purposes.
let storage = {darkMode: "disabled"}
function userPreferesDarkMode() {
//return localStorage.getItem("darkMode") === "enabled";
return storage.darkMode === "enabled";
}
function setThemePreference(value) {
// localStorage.setItem("darkMode", value || "disabled");
storage.darkMode = value || "disabled";
}
const enableDarkMode = () => {
// 1. Add the class to the body
document.body.classList.add("dark");
};
const disableDarkMode = () => {
// 1. Remove the class from the body
document.body.classList.remove("dark");
};
function setTheme() {
// If the user already visited and enabled darkMode
// start things off with it on
if (userPreferesDarkMode()) {
enableDarkMode();
} else {
disableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
}
function bootstrap() {
const darkModeToggleButton = document.querySelector("#mode");
darkModeToggleButton.addEventListener("click", () => {
if (userPreferesDarkMode()) {
setThemePreference("disabled");
disableDarkMode();
} else {
setThemePreference("enabled");
enableDarkMode();
}
const appDiv = document.getElementById("app");
appDiv.innerHTML = `<h1>Dark mode: ${userPreferesDarkMode()}</h1>`;
});
setTheme();
}
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
bootstrap()
});
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
<style>
body {
padding: 25px;
color: black;
font-size: 25px;
}
.btn {
background: white;
border: 1px solid #10101c;
color: #10101c;
border-radius:0.5rem;
}
a {
text-decoration: none;
color: #006262;
border-bottom: 1px dotted #192841;
font-style: italic;
}
body.dark {
background-color: #10101c;
color: #778899;
}
body.dark .btn {
background: #10101c;
color: #708090;
border: 1px solid #002e43;
border-radius:0.5rem;
}
body.dark a {
text-decoration: none;
color: #778899;
border-bottom: 1px dotted #d5c4a1;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">hello</div>
<button id="mode" class="btn">Toggle dark mode</button>
</body>
</html>
添加回答
举报
0/150
提交
取消