Hello Dev's
Welcome to Sinine Tech Blog website. This article is about how to create and add dark/light mode in our website using if-else condition in Javascript.
What Does dark mode toggle do?
Switch among Dark and light mode is a capability which can change the background colour text colour of our site page.
How in all actually does toggle Works in Webpage?
When the background colour of webpage is white and text colour is black then you can change it to black background with white text colour that is all what that the dark/light mode switch capability do in webpage.
Now let's start and learn that how to create toggle between dark and light mode. I will create this toggle using if-else condition in javascript.
Full Code Scroll down for Explanation
CSS
<style>
#button{
display: flex;
justify-content: center;
align-items: center;
}
#button #btn{
font-size: 1.4em;
background-color: white;
border-radius: 6px;
}
.darkmode{
background-color: black;
color: white;
}
</style>
HTML
<div id="button">
<button id="btn">Light Mode</button>
</div>
Javascript
<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
let element = document.body;
element.classList.toggle('darkmode')
if(btn.innerHTML === "Light Mode"){
btn.innerHTML = "Dark Mode";
}else{
btn.innerHTML= "Light Mode";
}
})
</script>
Step 1: Create Index.html file
First of all Open Vs Code or any code editor and create Index.html file.
Step 2 : Create Css3 file
Create Css3 file and add some styling in it.
#button{
display: flex;
justify-content: center;
align-items: center;
}
#button #btn{
font-size: 1.4em;
background-color: white;
border-radius: 6px;
}
.darkmode{
background-color: black;
color: white;
}
Step 3: Create a div:
Create a div which contains a button with id = btn like this
<div id="button">
<button id="btn">Light Mode</button>
</div>
Step 4: Create Js file:
Now Create JavaScript file with .js extension and open.
Step 5: Get button
The third step is to button button by button id .btn and save it in variable
let btn = document.getElementById('btn');
Step 6: add Event Listener "click" on button
- Add Event Listener (click) on button
- Create a variable (element)
- Use .toggle method to toggl ebetween light and dark mode.
btn.addEventListener('click', ()=>{
let element = document.body;
element.classList.toggle('darkmode')
if(btn.innerHTML === "Light Mode"){
btn.innerHTML = "Dark Mode";
}else{
btn.innerHTML= "Light Mode";
}
})
How to Detect dark mode in Javascript?
You can detect the dark mode of document/webpage by this short method
window.matchMedia( '(prefers-color-scheme: dark)' ).matches
Thanks for visiting Sinine tech if you found this "Dark/light mode toggle in Javascript using if else condition" helpful share with your friends and keep visiting for this type of content.
