You are currently viewing Light And Dark Mode Toggle Using HTML, CSS & JavaScript

Light And Dark Mode Toggle Using HTML, CSS & JavaScript

Light And Dark Mode Toggle Using HTML, CSS & JavaScript

Light And Dark Mode Toggle Using HTML, CSS & JavaScript
Light And Dark Mode Toggle Using HTML, CSS & JavaScript

 

Welcome to the CodeWithRandom blog. In this blog, we learn how to create a Light And Dark Mode Toggle Using JavaScript. We use Html, Css, and JavaScript for this Light And Dark Mode Toggle.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Light And Dark Mode Toggle.

HTML Code Light And Dark Mode Toggle

<div class="night-toggle" onClick="switchMode()">
<div id="moon" class="moon"></div>
</div>
<!-- optional -->
<div class="opt">
<div><h1>Night/Day Mode Toggle</h1></div>
<div class="break"></div>
<div><p>Click on the moon in the upper-right corner to change to night mode.</p>
<p>Click again on the sun to change back to day mode.</p></div>
</div>

There is all the HTML code for the Light And Dark Mode Toggle. Now, you can see output without Css and Javascript. then we write Css for styling and add Javascript for the Light And Dark Mode Toggle.

25+ HTML &#038; CSS Card Design Layout Style

Only Html Code Output

Light And Dark Mode Toggle Using HTML, CSS & JavaScript
Light And Dark Mode Toggle Using HTML, CSS & JavaScript

CSS Code Light And Dark Mode Toggle

body {
transition: 1.5s;
}
.night-toggle {
width: 33px;
height: 33px;
right: 20px;
top: 20px;
position: absolute;
}
.night-toggle:hover{
cursor: pointer;
}
.moon {
background-color: transparent;
box-shadow: -6px 1px 0 3px #275e8e;
border-left:3px solid #27476D;
border-radius:50%;
width: 20px;
height: 20px;
margin-left:8px;
margin-top:0px;
transition: 2s;
}
.sun {
background-color: #fdd462;
box-shadow: 2px 0px 0px 1px #D19C29;
border-radius:50%;
width: 26px;
height: 26px;
transition: 2s;
}
/* ----- optional ----- */
.break {
flex-basis: 100%;
height: 0;
}
.opt {
display: flex;
flex-wrap: wrap;
justify-content:center;
font-family: sans-serif;
margin-top:5%;
text-align:center;
}

50+ Html ,Css & Javascript Projects With Source Code

HTML + CSS Updated Output


Light And Dark Mode Toggle Using HTML, CSS & JavaScript
Light And Dark Mode Toggle Using HTML, CSS & JavaScript

JavaScript Code Light And Dark Mode Toggle

 function switchMode() {
let moon = document.getElementById ("moon");
if(moon.className=="moon"){
moon.className="sun";
document.body.style.backgroundColor = "#141D26";
document.body.style.color = "#fff";
}
else {
moon.className ="moon";
document.body.style.backgroundColor = "#fff";
document.body.style.color = "#000";
}
}

Final output Light And Dark Mode Toggle

Light And Dark Mode Toggle Using HTML, CSS & JavaScript
Light And Dark Mode Toggle Using HTML, CSS & JavaScript

 

Light And Dark Mode Toggle Using HTML, CSS & JavaScript
Light And Dark Mode Toggle Using HTML, CSS & JavaScript

Live Preview Of Light And Dark Mode Toggle

Now that we have completed our  Light And Dark Mode Toggle. Here is our updated output with Html, Css, and JavaScript. Hope you like the Light And Dark Mode Toggle Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

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

Thank you!

In this post, we learn how to create a  Light And Dark Mode Toggle Code using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki
Code by – Lea

This Post Has 2 Comments

  1. Padam Gadshila

    I really love this one 😍.
    The transition looks very awesome 🤩.
    Thankyou for sharing the codes

Leave a Reply