暗模式两个按钮-只有一个工作

Question

我是新来的，希望你能帮助我:)基本上，我已经创建了一个脚本来检测浏览器的暗模式并相应地显示网页。

此外，它应该可以在一个按钮的帮助下在明暗模式之间切换。整个事情都很好，但我想把这个按钮集成在我网站的两个地方。但只有一个是有效的。

可能是因为"构造"属性。然而，我不知道我必须改变什么。

你们有什么想法吗?附件是一个显示问题的文件:https://jsfiddle.net/ubL63k0g/

JS:

const btn = document.querySelector(".btn-toggle-darkmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
}
btn.addEventListener("click", function() {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme") ?
"light" :
"dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme") ?
"light" :
"dark";
}
localStorage.setItem("theme", theme);
});

非常感谢大家!

Answer 1

这是因为您使用document.querySelector(".btn-toggle-darkmode");，这将获得一个元素，所以它只侦听一个。你必须使用document.querySelectorAll(".btn-toggle-darkmode");

const btns = document.querySelectorAll(".btn-toggle-darkmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
console.log(currentTheme)
document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
document.body.classList.toggle("light-theme");
}
btns.forEach(function(btn){
btn.addEventListener("click", function() {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
var theme = document.body.classList.contains("light-theme") ?
"light" :
"dark";
} else {
document.body.classList.toggle("dark-theme");
var theme = document.body.classList.contains("dark-theme") ?
"light" :
"dark";
}
localStorage.setItem("theme", theme);
});
})