In this Article, I'll tell you how to create a DARK and LIGHT THEME TOGGLER with Pure HTML, CSS and JavaScript.

First create three files: index.html, style.css and script.js

Now paste this HTML code in your index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark & Light Theme Toggler</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <input type="checkbox" class="checkbox" id="inp">
        <label class="label" for="inp">
            <div class="ball"></div>
        </label>
    </div>
</body>
<script src="script.js"></script>
</html>

Now its time for the styling and all, so lets write the CSS now paste this code in your style.css

* {
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    transition: background 0.2s linear;
}

body.dark {
    background-color: #292C35;
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.label {
    background-color: #111;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px;
    position: relative;
    height: 26px;
    width: 50px;
    transform: scale(1.5);
}

.label .ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transform: translateX(0px);
    transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
    transform: translateX(24px);
}

Now lets program the logic for the Toggler button, paste this javascript code in your script.js

const inp = document.getElementById('inp');

inp.addEventListener('change', () => {
    document.body.classList.toggle('dark')
})

And this is it, click on the ball to see the magic

This tutorial video is already on my channel - https://www.youtube.com/shorts/Lfetzzs6Bqo (Fantastic Frontend)
Subscribe the channel and like the video for more awesome content.
Also don't forget to follow me on dev.to

Made with 💗 by Arjun

Dark and Light Theme Toggler + YT Channel 🚀🔥

In this Article, I'll tell you how to create a DARK and LIGHT THEME TOGGLER with Pure HTML, CSS and JavaScript.