Change Theme Light mode to Dark Mode: HTML CSS Java Script @rayen-code

Rayen

Change Theme Light mode to Dark Mode: HTML CSS Java Script



HTML Code

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Theme switch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div id="switch_btn">
            <img id="dark_img" src="https://img.icons8.com/ios-glyphs/30/moon-symbol.png" alt="dark_img">
        </div>

        <div id="dark_text">Light Theme</div>
    </div>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. In dolorem expedita molestias, rerum vel illo qui hic iure velit accusamus provident eaque sint deleniti ex nostrum itaque! Quam, eum. Rerum veniam voluptatem voluptatibus incidunt est.
    </p>
    

    <script src="main.js"></script>
</body>
</html>

CSS Code

/*-------------------- CSS --------------------*/
/* style  */
*{
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}

:root{
    --light: white;
    --dark: black;
}
.dark-mode{
    --dark: white;
    --light: black;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--light);
    color: var(--dark);
}

.container{
    width: 300px;
    height: 100px;
    background-color: #0099ff;
    border-radius: 100px;
    position: relative;
}

#switch_btn{
    width: 80px;
    height: 80px;
    background-color: var(--light);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dark_img{
    height: 60px;
}

#dark_text{
    position: absolute;
    top: 50%;
    right: 10px;
    font-size: 2rem;
    transform: translateY(-50%);
}

p{
    width: 500px;
    margin: 10px;
}

Java Script Code

//-------------------- Java Script --------------------//
// java script 
let container = document.querySelector(".container");
let switch_btn = document.getElementById("switch_btn");
let dark_img = document.getElementById("dark_img");
let dark_text = document.getElementById("dark_text");

container.addEventListener("click", ()=>{
    document.body.classList.toggle("dark-mode");

    if(document.body.classList.contains("dark-mode")){
        switch_btn.style.left = "calc(100% - 80px - 10px)";
        dark_img.style.filter = "invert(1)";
        dark_text.innerText = "Dark Theme";

        dark_text.style.left = "10px";
    }

    else{
        switch_btn.style.left = "";
        dark_img.style.filter = "";
        dark_text.innerText = "Light Theme";
        dark_text.style.left = "";
    }
});

0 Comments