时间戳

首页 > 解决方案 > 打开暗模式时出现多个错误

javascript - 打开暗模式时出现多个错误

问题描述

我正在尝试创建一个暗模式切换按钮，一切顺利。暗模式在我的网站上运行，但是当我刷新页面或转到其他帖子时，我应该再次打开按钮。这是我在我的网站上使用的简化代码，https://codepen.io/pen/?template=poyYapw。另外，myFunction1在我的网站上不起作用，我不知道为什么。myFunction1正在开发 codepen、w3schools 等，但它不适用于我的网站。谁能给我一个javascript函数来解决这两个问题。

标签： javascripthtmljquerycsssass

解决方案

我建议使用 localStorage。

您可能不需要，但有一种方法可以检测暗模式：如何使用 JavaScript 检测暗模式？

如果您使用检测，请将​​检测到暗模式的布尔值保存到 localStorage。

检测在这里不起作用，但它应该在您的网站上。

var dark = localStorage.getItem("darkmode") || "false";
var detected = localStorage.getItem("dmodedetected") || "false";
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches & detected == "false") {
document.body.classList.add("darkmode");
}
detected = true;
localStorage.setItem("dmodedetected", "true");
function toggledmode() {
if (dark == "false") {
dark = "true";
document.body.classList.remove("darkmode");
}
else {
dark = "false";
document.body.classList.add("darkmode");
}
localStorage.setItem("darkmode", dark);
}
body {
background-color: white;
}
body.darkmode {
background-color: black;
}
<html>
<body>
<button onclick="toggledmode()">Toggle</button>
<script>
</script>
</body>
</html>

推荐阅读