已经在谷歌上搜索了几个小时。。。
我有两个文件normal.css和dark.css，我需要一个JS开关，用户可以通过切换来启用暗模式css，但我需要它在所有页面上，我想是本地存储吗？
感谢
localStorage或cookies都可以
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normal.css">
<script type="text/javascript">
const darkMode =
{
state: ~~localStorage.getItem("darkMode"), //convert into 0 or 1, takes less space
ctl: null,
css: null,
init: function ()
{
this.ctl = document.getElementById("darkMode");
if (this.ctl)
{
this.ctl.checked = this.state;
this.toggle(this.state);
}
else
window.addEventListener("DOMContentLoaded", darkMode.init.bind(this));
},
toggle: function (mode)
{
if (mode === undefined)
mode = ~~this.ctl.checked;
this.state = mode;
localStorage.setItem("darkMode", mode);
if (mode)
{
if (this.css)
return;
this.css = document.createElement("link");
this.css.rel = "stylesheet";
this.css.href = "dark.css"; //path to dark.css
document.head.appendChild(this.css);
}
else if (this.css)
{
this.css.parentNode.removeChild(this.css);
this.css = null;
}
} //toggle
} //darkmode
darkMode.init();
</script>
</head>
<body>
<input id="darkMode" type="checkbox" oninput="darkMode.toggle()">
</body>
</html>
然而，也可以使用另一种方法，将dark.css转换为仅在body具有darkmode类时激活。