然后去任意你想要添加切换按钮的地方添加切换按钮:<button id="toggle-mod"/>

WP和任意网站如何按钮切换黑暗模式和白昼模式

首先我们先给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;
});

具体样式可根据自己的需求调整。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注