我目前有一个切换按钮，用于切换<body>上的类.dark-mode，然后将首选项保存到本地存储中。
不过，默认情况下，它是在灯光主题中加载的。
我希望这样做，如果客户是prefers-color-scheme: dark，它会自动切换到暗模式，如果不是，它就会保持亮起。
<script>
/* Dark Mode Selection */
// On page load set the theme.
(function() {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent =
localStorage.getItem("theme") || "light";
})();
function themeToggle() {
let element = document.body;
element.classList.toggle("dark-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
}
</script>
我不确定如何在第一次加载时默认为他们喜欢的颜色。
即使没有JS:，只要阅读文档就能找到答案
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}
.day, .night {
display: inline-block;
padding: 1em;
width: 7em;
height: 2em;
vertical-align: middle;
}