Day night toggle switch in javascript

Learn how to create a toggle switch in javascript which shows the animation of sun and moon on toggling.

This toggle switch is an example of how we can use CSS just like Magic tricks to create illusions. Things work different than they look like but the outcome is very good.

I have already created toggle switch in react, you can check it out if you want to learn how to do it.

By building this you will learn

• HTML:- How to create a layout to toggle switch with Checkbox.
• CSS:- Create illusions to show the sun and moon animation.
• Javascript:- Add and remove class on checkbox check and uncheck.

I am sure by building this you will really be able to use CSS in different ways possible. So lets start building it.

Creating the layout of sun and moon toggle animation.

<div class="sun-moon">
      <input type="checkbox" />
      <span class="circle large"></span>
      <span class="circle small"></span>
</div>

We have created a wrapper and placed two circles and a checkbox inside it. This way we will be able create the toggle switch which will work on click of the checkbox.

---

Design the sun and moon toggle switch.

Styling is the most important part of this component because using CSS we will be creating the sun and moon and the toggle switch.

* {
    box-sizing: border-box;
  }

Create sun and moon with CSS.

We can make a sun by simply creating a circle.

But to create the moon we will need to use two circles.

That is why if you see in the layout we have created two circle one small and one large. To create the moon we have to place the small circle over the large circle to hide the some part of the large which makes it look like moon.

Make the small circle same as the background color and make the large circle different color then it will make the larger circle a moon.

As we need to manage the position of these two circle we place them absolute positioned inside a relative parent.

.sun-moon {
    position: relative;
    width: 100px;
    height: 56px;
    padding: 5px;
    border-radius: 45px;
    border: 3px solid #1a237e;
    background-color: #3f51b5;
    overflow: hidden;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);     
}

.circle {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
}

.small {
    width: 30px;
    height: 30px;
    background: #3f51b5;
    left: 20px;
    top: 3px;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.large {
    width: 40px;
    height: 40px;
    background: #fff;
    border: 3px solid #fff;
    top: 50%;
    transform: translateY(-50%);
    left: 7px;
    transition: all 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

Now to make the toggle switch work we should be able to click on the checkbox, but we cannot show it, so what we do is we place this checkbox over the toggle switch and make it transparent.

This way the checkbox will work but it will bot be visible.

.sun-moon input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

Then next thing is adding the transition to show the that sun is changing to moon and viceversa. For this we will add a class move to the parent which will do the transition.

On transition we will have to do three things.

1. Change the background color of the wrapper.
2. Transition moon to sun and viceversa.
3. Change the circle color.

Changing the background color is simple but to show the transition of moon to sun we will have to move our both the circles in sync to show the effect that they are changing their shape.

//Change the background color
.move {
    background-color: #fff;
    border-color: #f3909a;
}

//Move the bigger circle
.move .large {
    left: 50px;
    background: yellow;
    border-color: orange;
}

//Move the smaller circle
.move .small {
    left: 60px;
    top: 50px;
    background-color: #fff;
}

How both circles should move to create the transition effect is simple calculation and some assumptions. I have just moved the larger circle first and then moved the smaller circle to get effect.

---

Toggle switch on the checkbox click in javascript.

As we have kept our checkbox transparent it will be clicked when we click on the toggle switch but it will not visible.

Now we can listen to the change event listener and add and remove the .move class from the toggle switch depending upon the checkbox is checked or not.

const switchBox = document.querySelector(".sun-moon");

document.querySelector("input").addEventListener("change", (e) => {
    const { checked } = e.target;   
    if (checked) {
        switchBox.classList.add("move");
    } else {
        switchBox.classList.remove("move");
    }
});

I hope you have enjoyed building this and learn something new.