代码之家 › 专栏 › 技术社区 › Ayman

如何在重新点击后将深色主题更改为浅色主题[重复]

dark-theme themes css html javascript

Ayman · 技术社区 · 10 月前

我做了一个按钮,当你点击它时,网页会变成深色主题,但当我重新点击它时它会保持黑色,我希望它像循环一样返回默认(白色)

const myBtn = document.getElementById("darktheme");
const body = document.body;
const welcome = document.getElementById("txtt")

myBtn.addEventListener("click", function(){
    body.style.backgroundColor = "rgb(17, 17, 17)";
    body.style.color = "white";
    welcome.style.color = "white";
    
})

有人能帮忙吗?

4 回复 | 直到 10 月前

Alexander Nenashev 10 月前

不要手动操作样式。只需切换一个类 body 并为此类编写适当的样式:

body.darktheme{
  color:white;
  background: #444;
}

<button onclick="document.body.classList.toggle('darktheme')">Toggle dark theme</button>

<h1>Hello World!</h1>

Mihai T 10 月前

只要利用 toggle classList,然后使用CSS添加样式。

const myBtn = document.getElementById("toggle-theme");
const body = document.body;
const welcome = document.getElementById("txtt")

myBtn.addEventListener("click", function(){
   body.classList.toggle('dark')
    
})

body { background-color: white; color: black;}
body #txtt { color: black; }
body.dark { background-color:black; color: white}
body.dark #txtt { color: white }

<button id="toggle-theme">toggle</button>
<div id="txtt">Welcome</div>

Sally loves Lightning 10 月前

根据您当前的代码,您可以使用一个变量来跟踪当前的主题状态。

初始状态假定为灯光主题。每次单击该按钮时,都会检查当前主题状态。如果是真的,则应用灯光主题;否则,应用黑暗主题。然后切换标志变量以切换下一次单击的主题。

const myBtn = document.getElementById("myBtn");
const body = document.body;
const welcome = document.getElementById("txtt");

let isDarkTheme = false; // flag variable to track the current theme state

myBtn.addEventListener("click", function() {
  if (isDarkTheme) {
    // switch to light theme
    body.style.backgroundColor = "white";
    body.style.color = "black";
    welcome.style.color = "black";
  } else {
    // switch to dark theme
    body.style.backgroundColor = "rgb(17, 17, 17)";
    body.style.color = "white";
    welcome.style.color = "white";
  }
  
  isDarkTheme = !isDarkTheme; // toggle the theme state
});

<button id="myBtn">Toggle dark theme</button>
<h1 id="txtt">Hello!<h1>

-1

Mostafa Sabeghi 10 月前

基于您的代码:

const myBtn = document.getElementById("darktheme");
const body = document.body;
const welcome = document.getElementById("txtt")

myBtn.addEventListener("click", function(){
    if(body.style.backgroundColor==="rgb(17, 17, 17)")
    {
      body.style.backgroundColor = "rgb(256, 256, 256)";
      body.style.color = "black";
      welcome.style.color = "black";
    }
    else
    {
      body.style.backgroundColor = "rgb(17, 17, 17)";
      body.style.color = "white";
      welcome.style.color = "black";
    }
})

<button id="darktheme">darktheme</button>
<input type="text" id="txtt"/>