首先我们先给body标签添加class名字：<body class=”light-mode”>
然后去任意你想要添加切换按钮的地方添加切换按钮：<button id=”toggle-mode”>Toggle Mode</button> 注意class名称和下面的js和css文件要对应。
然后添加css样式：
/* Light mode styles */
.light-mode {
background-color: white;
color: black;
}
/* Dark mode styles */
.dark-mode {
background-color: black;
color: white;
}
然后通过Js来实现点击按钮的时候切换class样式即可：
const toggle = document.getElementById("toggle-mode");
let isDark = false;
toggle.addEventListener("click", () => {
if (isDark) {
document.body.classList.remove("dark-mode");
document.body.classList.add("light-mode");
toggle.innerHTML = "Dark Mode";
} else {
document.body.classList.remove("light-mode");
document.body.classList.add("dark-mode");
toggle.innerHTML = "Light Mode";
}
isDark = !isDark;
});
具体样式可根据自己的需求调整。
