Fatal编程技术网
  • javascript/
  • Javascript 使用HTML5和CSS的暗模式切换

Javascript 使用HTML5和CSS的暗模式切换

javascript html css

Javascript 使用HTML5和CSS的暗模式切换,javascript,html,css,Javascript,Html,Css,我有这个简单的代码将网页转换为暗/光模式。它在您所在的页面上运行良好，但如果我单击任何链接或按钮将我从index.html重定向到test.html，例如，则设置将重置为默认设置。假设我想在浅色模式下浏览我的页面，然后点击test按钮它会返回到深色模式。 我如何让它记住保持我选择的相同模式？这是我得到的 Index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8">

我有这个简单的代码将网页转换为暗/光模式。它在您所在的页面上运行良好，但如果我单击任何链接或按钮将我从
index.html
重定向到
test.html
，例如，则设置将重置为默认设置。假设我想在浅色模式下浏览我的页面，然后点击
test按钮
它会返回到深色模式。 我如何让它记住保持我选择的相同模式？这是我得到的

Index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dark -Light Mode Switcher</title>
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<body id="body" class="dark-mode">
<h1>Dark/Light Mode Switcher</h1>

<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">If you update your Script.js like below, you will obtain what you want : 



body.className=localStorage.getItem("stateMode");
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
localStorage.setItem("stateMode",body.className);
}




暗光模式开关
暗/光模式开关

如果您像下面这样更新Script.js，您将获得所需的内容：


阅读以下内容：您可能想考虑使用类似或的东西来实现此目的。通过这种方式，您可以在域上导航时检查值集，以设置正确的主题。这非常好，完全可以根据需要工作。谢谢你的时间和帮助