Creating day-night CSS only toggle switch

Yes, that's all the HTML we need, weird right? We will use a lot of pseudo-elements to add the little styling gimmicks.

The basic idea is that we use the label to control the checkbox, the checkbox in turn will be hidden. But it's checked state will cause the switch effect.

To create our switch we need to use quite a lot of pseudo-elements. But let’s start with the basics.

We need to hide our checkbox, the checkbox is only used to toggle our styling. The label will be the one visible and toggling the checkbox.

We use display: none to hide our checkbox

Once that is out of the way let’s use CSS grid to center everything in our body.

I'm using CSS variables for this tutorial, just for the colours, here is the variable declaration

Then, we should move to the label styling as you see in the end result this is about twice the size of our sun and moon element.

We also add a transition so it will animate with ease. In this case, the animation will be the background and border color.

Let’s add our first pseudo-element the sun icon. It is an absolute position element and has a fixed width and height.

Note: don’t use border-radius: 50% since we want to expand the width of this element.

We also add a custom animation called reverse. This animation takes 350ms to complete and the fill-mode is set to forwards which means it will stop at the last frame.

This animation is as follows. What happens, is that we start on our initial value, and then 60% of the time (350ms) we modify the left position and width. Then from 60-100%, we change the position to 4px.

This gives us a neat grow and move effect.

We also see the main background div it’s used for the full color and is absolutely positioned in our body.

The only thing that will change there is the background color.

You might have also noted the white cloud in the sun switch, we will animate this to transform into the stars so it’s based on three elements.

The main element is the span background inside the label. This in turn has a before and after pseudo-element.

The main span is relatively positioned on the right-hand side, it has a transition that takes 150ms so it’s faster than our main toggle.

The before and after are absolute positioned elements that resemble the top and bottom part of the cloud.

Now that we have our default sunny side of the toggle let’s go ahead and see how to make it switch to the nighttime mode.

There is a really cool feature where you can detect a checkbox checked state and then target the next element.

We will start with the background. Now if we click our label the background will change.

So knowing this works we can go ahead and use this principle for our label.

I’ve said we only need to change the background and border so the CSS is as follows

Let’s continue and change our sun into a moon, this has the same idea a change of background and border is enough, but we want to reverse the animation so we add another custom animation to this one.

The animation is the same as the reverse one, but from left to right.

Then for the moon, we need to add another after to show some dimples. This has an opacity of 0 and once it’s checked we will show it.

You also see we use a box-shadow to actually create this effect. What this does is create two circles positioned left from the actual element.

Then once we clicked the CSS will need to change the opacity

The last part is that we want to move our cloud and turn it into the three stars. We move the positions around and make them a bit smaller. This gives us our final result: https://codepen.io/rebelchris/pen/jOMGweo