Light And Dark Mode Toggle Code | Dark/Light Mode Html Css Javascript







Light And Dark Mode Toggle Code | Dark/Light Mode Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Light And Dark Mode Toggle Code. We use HTML, Css, and javascript for this Light And Dark Mode Toggle Code. I hope you enjoy our blog so let’s start with a basic HTML structure for the Light And Dark Mode Toggle Code.

HTML Code

 <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 Code. Now, you can see an output with Light And Dark Mode Toggle Code then we write javascript for the Light And Dark Mode Toggle Code.

output

Light And Dark Mode Toggle Code | Dark/Light Mode Html Css Javascript

CSS code

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

Css Updated output


Light And Dark Mode Toggle Code | Dark/Light Mode Html Css Javascript

Javascript code

 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 Code | Dark/Light Mode Html Css Javascript

Light And Dark Mode Toggle Code | Dark/Light Mode Html Css Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Light And Dark Mode Toggle Code. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

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

Written by – Code With Random/Anki 

Code by – Lea

Share on:

Leave a Comment