Light And Dark Mode Toggle

Light and Dark Mode Toggle Using JavaScript

Light and Dark Mode Toggle Using JavaScript

Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how to create a Light and Dark Mode Toggle Using JavaScript. We have a toggle bar that toggles the light and dark modes.

Light and Dark Mode Toggle Using JavaScript
Light and Dark Mode Toggle Using 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>

The div tag with class “night-toggle” and a onclick function to switchMode will be used to construct the container for our light and dark mode toggle in order to build the structure for it.(). Using the h1 tag, we will now add the header for our Night/Day to give our project a more understated appearance. The content will now have a section break added using the div class element with a class break, and using the paragraph tag, the content will be added inside the paragraph section.

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.

Create Resume/CV Website Using HTML and CSS (Source Code)

Only Html Code Output

Light and Dark Mode Toggle Using JavaScript
Light and Dark Mode Toggle Using JavaScript

CSS Code For Styling Toggle Button:-

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

Step1:Using the body tag selector, we will add a transition of 1.5 seconds to add styling to our dark and light mode project. Next, we will use the class selector (.night-toggle) to define the width and height to 33 pixels. Additionally, we will add 20 px of space for our toggle button to the top and right properties, respectively, and we will change the position property to “absolute” to make the space for the button larger.

Ecommerce Website Using HTML, CSS, and JavaScript (Source Code)

Additionally, we have given our toggle button a hover property. Using the hover property, the cursor will transform into a pointer as the user moves their mouse over the button.

body {
transition: 1.5s;
}
.night-toggle {
width: 33px;
height: 33px;
right: 20px;
top: 20px;
position: absolute;
}
.night-toggle:hover{
  cursor: pointer;
}

Step2:Now, we’ll use the class selector (.moon) to make a class for the night mode, and we’ll set the background property to black to do so. We’ll create a border with a radius of 50% using the border radius property and a border left setting of 3 pixels. We will add a breadth and height of 20 px using the width and height properties, as well as a transition with a 2 second duration.

Gym Website Using HTML and CSS (Source Code)

Similar to that, we will use the class selector to build a class for the light mode. (.sun). The backdrop will be set to white, and a border radius of 50% will be added using the border radius property. We will add a 20px width and height using the width and height attributes, along with a 2s transition.

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

Step3:Now, using the class selector (.break), we will establish the flex basis as 100% of our break container; whether or not we add styling is entirely up to us. Basically, you can apply this styling if you want to. We advise you to experiment with customising the dark and light mode calculators to make them easier to comprehend.

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

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Html + Css Code Output:-

Light and Dark Mode Toggle Using JavaScript

 

Light Mode Dark Mode 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";
}
}

The switchMode() function will now be created inside of our javascript and called as soon as the user presses the button. Using the let keyword, we will make a variable called moon inside of our function that will hold our HTML elements along with the document. With getElementById, we will choose the moon. If the moon.className equals “mooo,” the background colour will be changed to black; otherwise, it will be white.

Create Product Card Using HTML and CSS (Source Code)

Final Output Of Light and Dark Mode Toggle Using 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

Video Output:

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)

ADVERTISEMENT

Thank you!

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

What is the use of dark and light mode?

For those with normal or corrected vision, light mode is easier to comprehend and more rapid. Additionally, dark mode enhances visibility in lit spaces, such as a meeting area with a large screen.

ADVERTISEMENT

Which mode is better for eyes dark or light?

In comparison to light mode, dark mode is apparently better for your eyes because it reduces glare and blue light on your digital screens.



This Post Has One Comment

  1. Padam Gadshila

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

Leave a Reply