How to make dark and light mode || dark and light mode

Hey folks, in this blog, we will learn how to add dark and light mode features to your website, it's really easy to add this feature to your website.

I am going to explain the whole process step-by-step, so follow along 😎.

Steps:

<body>
    <div class="container">
        <div class="box">
            <div class="toggle_btn">
                <div class="inner_circle"></div>
            </div>
            <p class="mode_status">Light Mode</p>
        </div>
    </div>
    <script src="./index.js"></script>
</body>

☝ we are going to use the above code for reference.

First, we have to make a .container class which will cover the whole body of the webpage and in order to center all the elements we will use display: flex;.
.box will act as a container for the toggle button and the text.
Now we will create a div with the name .toggle_btn and this will be our toggle button, with a child class .inner_circle and this will be our the moving circle inside the button.

We will create a p tag that will show us the status of the mode like Light Mode or Dark Mode.

Here is the CSS code 👇.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.change{
    background-color: rgba(0, 0, 0, 0.884)
}

.toggle_btn{
    width: 85px;
    height: 40px;
    background-color: lightgray;
    border-radius: 25px;
    position: relative;
    transition: 0.5s;
}

.inner_circle{
    width: 32px;
    height: 32px;
    background-color: rgb(156, 152, 152);
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 5px;
    transition: 0.5s;
}


.mode_status{
    font-size: 25px;
    font-weight: 800;
    margin-top: 30px;    
    margin-left: -20px;
}

.move{
    left: 50px;
    background-color: black;
}

.dark{
    color: #fff;
}

.color{
    background-color: #fff;
}

Now we have to add an event every time the user clicks on the button.

const container = document.querySelector(".container");
const btn = document.querySelector(".toggle_btn");
const innerCircle = document.querySelector(".inner_circle");
const toogleBtn = document.querySelector(".toggle_btn");
let text = document.querySelector(".mode_status");

btn.addEventListener("click", ()=>{
    innerCircle.classList.toggle("move");
    container.classList.toggle("change");
    text.classList.toggle('dark');
    toogleBtn.classList.toggle("color");
    if (text.classList.contains('dark')) {
        text.innerHTML = "Dark Mode";
    }else{
        text.innerHTML = "Light Mode";
    }
});

So when a user clicks on the button a toggle class is being added to the container, toogle_btn, and inner_circle and this class will change the background-color of the whole body, then another class is being added to the text which will change the text and display the other mode, we are doing this by using a if statement we are basically looking that if the text variable contains the dark class or not if it is then changing the inner HTML to Dark Mode else set it to be Light Mode.

Here is a working example of it.

https://codepen.io/sumeet1610/pen/NWjpBwz

Hope you find this blog interested, if you do then please like this blog and if you have any doubts feel free to comment, I will try my best to resolve your doubts.

Dark and Light Mode using CSS and JS

Steps: