JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<div id="container">
  <label for="dark-box">Use Dark mode</label>
  <input id="dark-box" name= "dark-box" type="checkbox"/>
</div>

CSS

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

JavaScript

document.getElementById("dark-box").addEventListener("change", function(event) {
console.log(event.target.checked)
		if(event.target.checked) {
    	document.getElementById("container").style.background = "black";
    } else {
    		document.getElementById("container").style.background = "white";
    }
})