A Pure CSS solution to toggle the color of the HTML element background without Javascript or Jquery

Issue

I like to toggle the background color of the body by clicking a button with the help of CSS only. Is there any way to do it.

function changeColor(color) {
                document.body.style.background = color;
            }
            
            function color() {
                changeColor('yellow');
            }   

<button onclick = "color()">
            Click here
</button>

Solution

A Pure CSS solution would be to use a checkbox and create an another div with desired color. Then using :checked selector, you can check if checkbox is checked, and change display property of div according to it.

*{
  margin: 0;
  padding: 0;
}

body{
  background-color: white;
}

.bg{
  width: 100vw;
  height: 100vh;
  background-color: yellow;
  z-index: -1;
  position: absolute;
  top: 0;
  display: none;
}

.toggle:checked + .bg{
  display: block;
}

<input type="checkbox" class="toggle">
<div class="bg"></div>

Answered By - TechySharnav