Toggle Dark Mode using HTML CSS and JavaScript

Hey, developers welcome to Day 30 of our 90Days 90Projects challenge. And in Day 30 we are going to create a Toggle Dark Mode using HTML CSS and JavaScript


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

toggle dark mode javascript, toggle dark mode using javascript, dark mode toggle, dark mode javascript, html dark mode css

HTML Code

<!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> Toggle Button</title>
    <!-- linking stylesheets for toggle page -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <label for="toggleBtn" class="toggleBtn">
        <i class="fa-solid fa-sun"></i>
        <i class="fa-solid fa-moon"></i>
        <div class="bgMove"></div>
    </label>

</body>
<!-- Adding Script -->
<script src="script.js"></script>

</html>



CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    transition: all 0.4s linear;
}

body.dark {
    background-color: rgb(27, 23, 23);
}

.toggleBtn {
    z-index: 2;
    padding: 1rem;
    text-align: center;
    border-radius: 5rem;
    display: flex;
    justify-content: space-between;
    box-shadow: 1.5px 1.5px 5px #373636;
    background: linear-gradient(145deg, #e1e1e1, #fff);
}

.bgMove {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    z-index: -1;
    border-radius: 50%;
    transition: all 0.4s linear;
    transform: translate(80%, -50%);
    background-color: rgb(27, 23, 23);
}

.fa-sun {
    color: white;
}

.bgMove.active {
    color: white;
    z-index: -2;
    transition: all 0.4s linear;
    transform: translate(340%, -50%);
    background-color: rgb(27, 23, 23);
}


.dark {
    color: rgb(16, 14, 14);
    transition: all 0.4s linear;
}

.active {
    color: white;
    transition: all 0.4s linear;
}

.active body {
    background-color: purple;
}

i {
    z-index: 4;
    width: 100px;
    margin: .5rem;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    transition: all 0.4s linear;
}

JavaScript

const btn = document.querySelector('.toggleBtn')
const moveBtn = document.querySelector('.bgMove')
const fa = document.querySelector('.fa-solid')
const faMoon = document.querySelector('.fa-moon')

btn.addEventListener('click', function () {
    moveBtn.classList.toggle('active')

    fa.classList.toggle('dark')

    faMoon.classList.toggle('active')
    if (moveBtn.classList == 'active') {
        faMoon.classList.add('moon-active')
    }
    else {
        faMoon.classList.remove('moon-active')
    }
    // Apply condition when toggle button is active and deactive
    if (moveBtn.classList.contains('active')) {
        document.body.classList.add('dark')
    }
    else {
        document.body.classList.remove('dark')
    }
})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad