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