[ad_1]
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=" />
</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
[ad_2]
Source link
