This content originally appeared on DEV Community and was authored by Code with Ayan
Hey beautiful people, Today in this post we’ll learn How to Create a Dark Mode Toggle Button in JavaScript** with amazing design. To create it we are going to use pure CSS, HTML & Javascript. Hope you enjoy this post.
In this tutorial. I’ll show you an easy way to [Dark Mode Toggle Button] with the help of Html CSS and Javascript!
Demo
Click to watch demo!
Dark Mode Toggle Button in JavaScript (source code)
*HTML Code
*
First, add HTML. Make sure it includes .html extension. For example PasswordGenerator.html .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<div class="all">
<div class="container">
<input type="checkbox" id="toggle">
</div>
<p>
Lorem30
</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
Let's add some CSS.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
padding: 30px;
}
.all{
width: 400px;
margin: 40px auto;
}
.container{
width: 100%;
height: 40px;
margin-bottom: 20px;
position: relative;
}
#toggle{
-webkit-appearance: none;
appearance: none;
height: 32px;
width: 65px;
background-color: #15181f;
position: absolute;
right: 0;
border-radius: 20px;
outline: none;
cursor: pointer;
}
#toggle:after{
content: "";
position: absolute;
height: 24px;
width: 24px;
background-color: #ffffff;
top: 5px;
left: 7px;
border-radius: 50%;
}
p{
font-family: "Open Sans",sans-serif;
line-height: 35px;
padding: 10px;
text-align: justify;
}
.dark-theme{
background-color: #15181f;
color: #e5e5e5;
}
.dark-theme #toggle{
background-color: #ffffff;
}
.dark-theme #toggle:after{
background-color: transparent;
box-shadow: 10px 10px #15181f;
top: -4px;
left: 30px;
}
JavaScript Code
JavaScript would be doing the main work, it will change the theme when the toggle button will be clicked. We have linked the CSS codes of the dark mode added above in the switch.
document.getElementById("toggle").addEventListener("click", function()
{
document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});
Congratulations! You have now successfully created our Dark Mode Toggle Button in JavaScript.
I hope that you have enjoyed this tutorial! Please feel free to leave your comments & suggestions on how we can improve. So, next time we could bring more improved content for you.
My Instagram page: codewithayan, you could contact me here
This content originally appeared on DEV Community and was authored by Code with Ayan
Code with Ayan | Sciencx (2022-06-19T00:08:55+00:00) Dark Mode Toggle Button in JavaScript. Retrieved from https://www.scien.cx/2022/06/19/dark-mode-toggle-button-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.