ADVERTISEMENT

Create Theme Toggle Between Dark and Light Mode Using JavaScript

Telegram Group Join Now

ADVERTISEMENT

Create Theme Toggle Between Dark and Light Mode Using JavaScript

Create Theme Toggle Between Dark and Light Mode Using JavaScript
Create Theme Toggle Between Dark and Light Mode Using JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the codewithrandom blog. In this blog, We learn how to CreateTheme a Toggle Between Dark and Light Mode Using JavaScript. We use HTML, CSS, and JavaScript for this Theme Toggle from Light to Dark.

Hope you enjoy our blog so let’s start with a basic HTML structure for Theme Switch.

ADVERTISEMENT

Html Code for Theme Toggle

<body data-theme="light">
    <section>
        <div class="container">
            <h1>CODEWITHRANDOM</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
                maiores atque dolorum voluptatum laudantium id adipisci quisquam
                ea laborum sed ipsam quam aspernatur ratione architecto numquam,
                aperiam recusandae ducimus aliquid ut enim culpa quis minus!
                Autem id, recusandae incidunt maiores non saepe dolor ullam
                perspiciatis! Nulla nemo sequi vero et.
            </p>
            <button>Hello!</button>
        </div>
    </section>
    <div class="theme-switcher">
        <input type="checkbox" id="switcher" />
        <label for="switcher">switch</label>
    </div>
</body>

There is all Html Code for the Theme Toggle. Now you can see output without Css and JavaScript, then we write Css for Styling our theme toggle and Use JavaScript For the Main Functionality Of the Theme Toggle Between Dark and Light Mode.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

 
Theme Toggle Between Dark and Light Mode Using JavaScript
Theme Toggle Between Dark and Light Mode Using JavaScript

CSS Code for Theme Toggle

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Montserrat";
    color: var(--color-4);
}
body[data-theme="light"] {
    --color-1: rgb(196, 220, 241);
    --color-2: white;
    --color-3: white;
    --color-4: rgb(80, 82, 110);
}
body[data-theme="dark"] {
    --color-1: #1e1f26;
    --color-2: #292c33;
    --color-3: rgb(39, 40, 42);
    --color-4: rgb(186, 186, 202);
}
section {
    background-color: var(--color-1);
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 90%;
    margin: 0 auto;
    background-color: var(--color-2);
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
}
h1 {
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
}
p {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 25px;
}
button {
    background-color: var(--color-4);
    padding: 10px 30px;
    border: none;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--color-3);
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
}
.theme-switcher {
    position: absolute;
    right: 30px;
    top: 10px;
}
input {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}
label {
    cursor: pointer;
    display: block;
    text-indent: -9999px;
    height: 30px;
    width: 60px;
    border-radius: 50px;
    background-color: rgb(255, 255, 255);
    transition: 0.5s ease background-color;
}
label::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: rgb(46, 42, 68);
    transition: 0.5s ease;
}
input:checked + label::after {
    /* left: calc(100% - 2.5px); */
    left: calc(100% - 25px);
    background-color: aliceblue;
}
input:checked + label {
    background-color: rgb(25, 26, 37);
    border: 2px solid whitesmoke;
}

Now we complete our Css Code Section For Theme Toggle. Here is our updated output with Html and Css. in the next code slide we cover our whole javascript For Theme Toggle.

50+ Html ,Css & Javascript Projects With Source Code

ADVERTISEMENT

Theme Toggle Between Dark and Light Mode Using JavaScript
Theme Toggle Between Dark and Light Mode Using JavaScript

 

JavaScript Code for Theme Toggle

const input = document.querySelector(".theme-switcher input");
input.addEventListener("change", (e) => {
    if (e.target.checked) {
        document.body.setAttribute("data-theme", "dark");
    } else {
        document.body.setAttribute("data-theme", "light");
    }
});

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

This is all small Code JavaScript For Theme Toggle Between Dark and Light Mode. I hope you like this Theme Toggle, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

ADVERTISEMENT

 

ADVERTISEMENT

Theme Toggle Between Dark and Light Mode Using JavaScript
Theme Toggle Between Dark and Light Mode Using JavaScript

 

Theme Toggle Between Dark and Light Mode Using JavaScript
Theme Toggle Between Dark and Light Mode Using JavaScript

Live Preview Of Theme Toggle Between Dark and Light Mode

In this post, we learn how to create a Theme Toggle Between Dark and Light Mode Using JavaScript. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.
 
written by – codewithrandom/Anki 

ADVERTISEMENT

Telegram Group Join Now

Share on:

2 thoughts on “Create Theme Toggle Between Dark and Light Mode Using JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT