Dark Mode Toggle Button in JavaScript

by:

Softwares


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>
Enter fullscreen mode

Exit fullscreen mode

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;

Enter fullscreen mode

Exit fullscreen mode

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");
);
Enter fullscreen mode

Exit fullscreen mode

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





Source link

Leave a Reply

Your email address will not be published.