<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    
  </head>

  <body>
    <button onclick="darklight()">Dark / light</button>

<script src="lib/script.js"></script>
  </body>
</html>
body{
  background: #fff;
  display: flex;
  justify-content: center;
  
}

.light-mode{
  background: white;
  color: black;
}
.dark-mode{
   background: black;
   color: white;
}
button{
background: black;
color: white;  
padding: 20px;
border: 1px black solid;
border-radius: 5px;
font-size: 20px;
}

function darklight(){
  let bg = document.body;
  let btn = document.querySelector("button")
  
  bg.classList.toggle("dark-mode")
  
 if(bg.classList.contains("dark-mode")){
   btn.classList.add("light-mode")
   btn.classList.remove("dark-mode")
 } else{
   btn.classList.add("dark-mode")
   btn.classList.remove("light-mode")
 };
};