Categories: Softwares

Dark Mode Toggle Button in JavaScript

[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

Taylor Swift

Taylor Swift is a pro-level blogger with years of experience in writing for multiple industries. She has extensive knowledge in Technology, healthcare, business, sports, fashion, and many other popular niches.