DEV Community

Cover image for Theme Toggler
Prashant Pandey
Prashant Pandey

Posted on

Theme Toggler

A theme change toggler.

So I was just doing some work yesturday and I think let's make a theme toggler button using a checkbox, and I found that it was pretty simple to create one.
Here I am sharing it to you.
We just need some small steps to create it,

Step1: Create a wire frame for checkbox in HTML

<input type='checkbox' id='check' />
<label for='check'></label>
Enter fullscreen mode Exit fullscreen mode

Step2: Create css for it just use some css selector properties to tackle the checked and unchecked checkbox.

  top: 50%;
  left: 50%;
  position: absolute;
  background-color: #000;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));;
  display: block;
  border-radius: 100px;
  position: relative;

  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  background-color: #fff;
  border-radius: 50%; 
  transition: all 0.5s;
  transform: translateX(0px);

input[type=checkbox]:checked + label::after{
    transition: all 0.5s;
    transform: translateX(50px);
    background-color: #000;

  postion: absolute;
  margin-top: 34px

Enter fullscreen mode Exit fullscreen mode

That's it , here is the result from this little code.

Top comments (1)

w3hls profile image

How do I email you please?