Light And Dark Mode Toggle Using HTML, CSS & JavaScript

 

<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>

ADVERTISEMENT

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 & CSS Card Design Layout Style

Only Html Code Output

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

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

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