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'
    }
}

Answer 1

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>