Dark and Light Theme Toggler + YT Channel

August 14, 2022

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">
    <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">
        <input type="checkbox" class="checkbox" id="inp">
        <label class="label" for="inp">
            <div class="ball"></div>
<script src="script.js"></script>
Enter fullscreen modeExit fullscreen mode

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);
Enter fullscreen modeExit fullscreen mode

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', () => {
Enter fullscreen modeExit fullscreen mode

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

Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *