Question 208957 in Html Question posted in
Some basic documentation can be found here.

Html – how to Change dark theme to light teme after reclick

i made a button that when u click it, the webpage turn to dark theme but when i reclick it, it stays black i want it to return back to the default (white) like a loop

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";
    
})

can anyone Help ?

Tags:

4

Answers


  1. 0

    Don’t manipulate styles manually. Just toggle a class for body and write appropriate styles for this class:

    body.darktheme{
  color:white;
  background: #444;
}
    <button onclick="document.body.classList.toggle('darktheme')">Toggle dark theme</button>

<h1>Hello World!</h1>
    Login or Signup to reply.
  2. 0

    Base on your code :

    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"/>
    Login or Signup to reply.
  3. 0

    Just make use of toggle classList and then use CSS to add your styles.

    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>
    Login or Signup to reply.
  4. 0

    Based on your current code, you can use a variable to keep track of the current theme state.

    The initial state is assumed to be the light theme. Each time the button is clicked, it checks the current theme state. If it’s true, the light theme is applied; otherwise, the dark theme is applied. The flag variable is then toggled to switch the theme for the next click.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search