dark - light mode button

Question

I want to change the body's bg to white, when it is set to "sun" (light mode) and change back to moon (also change the background to black with it)

function dwmode(){
    var body = document.querySelector('body')
    document.getElementById('dWmode').innerHTML = '<i class="fas fa-sun"></i>';
        if(innerHTML == '<i class="fas fa-sun"></i>'){
            body.style.background = 'white'
    }
}

Any condition her is always true (or just `undefined` in the case of `innerHTML`). If you are looking for actual dark mode, maybe look into `@media (prefers-color-scheme:dark){}` in CSS. Otherwise, this is confusing. You could even use the CSS to change the `content` of a `:before` to 'sun' or 'moon'. — somethinghere, May 23 '21 at 17:05

score 0 · Answer 1 · answered May 23 '21 at 18:38

body = document.querySelector("body");
sun = document.getElementById("sun");
moon = document.getElementById("moon");

function dwmode() {
  if (sun.style.visibility == "visible") {
    body.style.backgroundColor = "white"
    sun.style.visibility = "hidden";
    moon.style.visibility = "visible";
  } else {
    body.style.backgroundColor = "gray"
    sun.style.visibility = "visible";
    moon.style.visibility = "hidden";
  }



}

body {
  background-color: gray;
}

.sunv {
  visibility: visible;
}

.moonv {
  visibility: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />



<i class="fas fa-sun sunv" id="sun" onclick="dwmode()"></i>
<i class="fas fa-moon moonv" id="moon" onclick="dwmode()"></i>

dark - light mode button

1 Answers1