How to create Dark/Light Mode Toggle using CSS | Toggle using CSS code – codewithrandom

How to create Dark/Light Mode Toggle using CSS | Toggle using CSS code – codewithrandom

Hey Devs! How are you doing? 🚀

Today we’re going to make a Dark/Light Mode Toggle using only frontend technologies.

Here’s a small CodePen for you to check out 🙂


(How’s it going to look)


HTML Code

Let’s start with the easiest part up to now; the HTML.

 <div class = "mainBody">  
<div class = "toggleContainer">
<input id = "checkbox" type = "checkbox" value = "off">
</div>
</div>

First of all, we’re creating a main div container, so that we can handle easier our project IN GENERAL, not only our checkbox.

Inside it, we’re going to have another div; this one is going to contain the Checkbox Input.

Finally, we’re going to have the Checkbox input.

We’re going to have something like this.


(Output, only HTML)

CSS Code

Now let’s get to the styling.

First of all, we’re going to declare the animations using the keyframes selector.

 @keyframes checkboxAnim {  
0% {
transform: rotate(0deg);
margin-right: 1rem;
}
100% {
transform: rotate(180deg);
margin-right: -1rem;
}
}
@keyframes checkboxAnimBack {
0% {
transform: rotate(180deg);
margin-right: -1rem;
}
100% {
transform: rotate(0deg);
margin-right: 1rem;
}
}

Here, we’re declaring the keyframes we’re going to be using for the animations; the first one will be when we toggle from white to dark, and the next one from dark to white.

Next up, we’re going to declare the Body and the first Div (“mainBody”).

 * {  
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainBody {
height: 100vh;
width: 100%;
transition: .4s;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Now we’re going to declare the Second Div (“toggleContainer”) and the checkbox.

 .toggleContainer {  
width: fit-content;
height: fit-content;
min-width: 6rem;
min-height: 6rem;
transform: scale(2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#checkbox {
height: 3rem;
width: 3rem;
border-radius: 100px;
-webkit-appearance: none;
appearance: none;
background: #000322;
outline: none;
border-radius: 30px;
cursor: pointer;
transition: .3s;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

Up to now, we should have this:


(Basic CSS)


We’re now going to declare the Pseudo-Classes & Pseudo Elements for our project:

 #checkbox:hover {  
box-shadow: 0px 4px 26px 6px rgba(0, 0, 0, 0.25);
margin-bottom: .5rem;
}
#checkbox::before {
content: "";
position: relative;
width: 2.5rem;
height: 2.5rem;
background: #f6f6f6;
border-radius: 100px;
transition: .3s;
}
#checkbox::after {
content: "";
position: absolute;
background: #000322;
width: 1rem;
height: 2rem;
margin-right: 1rem;
transform: rotate(0deg);
border-top-left-radius: 6.25rem;
border-bottom-left-radius: 6.25rem;
border-right: 0;
transition: .4s border-radius;
animation: checkboxAnimBack .4s;
}

Up to now, we should have this:


(Pseudo Classes and Pseudo Elements Added)


Also, try hovering (putting your mouse over) the project! Do you see something?

Now, have you ever wondered how can you style a Checkbox when checked, by only using CSS? Let’s get to it!

 #checkbox:checked::before {  
background: #000322;
}
#checkbox:checked::after {
animation: checkboxAnim .4s;
content: "";
position: absolute;
transform: rotate(-180deg);
width: 1rem;
height: 2rem;
margin-right: -1rem;
}
#checkbox:checked, #checkbox:checked::after {
background: #f6f6f6;
}

So, try clicking it!

Do you see the animation? Great!

(Dark mode)


(Light mode)


Finally, we’re going to add just one class so that the background can change… using JavaScript!

 .darkBg {  
background: #000322;
}

As its name says, it’s going to be in charge of changing the background.


JavaScript Code

Now, we’re going to declare constants for our elements:

 const checkbox = document.querySelector("#checkbox");  
const mainBody = document.querySelector(".mainBody");

Now that we have our variables, we’re going to add an event listener that will toggle the color of the background.

 checkbox.addEventListener("click", () => mainBody.classList.toggle("darkBg"));  


Try clicking the checkbox!



(If you click the checkbox)


So that was it for today. Hope you enjoyed this small project! 

If you’ve any questions, you can contact me on Instagram (@codewithemil) or you can ask my superior (@codewith_random). 

¡Adiós, amigos! (Bye, friends!) 👋👋👋

By:

CodeWithEmil

Css scroll animation | scroll animation html css javascript code – codewithrandom


Testimonial Slider using css | Testimonial Slider code – codewithrandom


Text morph | text morph using css – codewithrandom


Frontend vs Backend | Difference between frontend and backend


Html radio button | radio button html styling – codewithrandom


50+ Front end projects | html css javascript project for frontend developers – codewithrandom

Leave a Reply