How to Create Dark/Light Mode Toggle using HTML & CSS

Hey Devs! How are you doing? Today we’re going to make a Dark/Light Mode Toggle using only frontend technologies. We use Html, Css, and 2 lines of javascript code for Dark Mode Toggle Animation.

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

(How’s it going to look)

HTML Code

Let’s start with the most straightforward part: 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.

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.

Portfolio Website using HTML and CSS (Source Code)

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: 0.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: 0.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: 0.5rem;
}
#checkbox::before {
    content: "";
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background: #f6f6f6;
    border-radius: 100px;
    transition: 0.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: 0.4s border-radius;
    animation: checkboxAnimBack 0.4s;
}

Project Management Dashboard using Html, Css, JavaScript

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 0.4s;
    content: "";
    position: absolute;
    transform: rotate(-180deg);
    width: 1rem;
    height: 2rem;
    margin-right: -1rem;
}
#checkbox:checked,
#checkbox:checked::after {
    background: #f6f6f6;
}

10+ HTML CSS Projects For Beginners with Source Code

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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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)

Tic Tac Toe Game Using HTML,CSS and JavaScript

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