DEV Community

Cover image for Dark Mode Toggle Button in JavaScript
Code with Ayan
Code with Ayan

Posted on • Updated on

Dark Mode Toggle Button in JavaScript

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.

Adding a dark/light mode feature on a website has been on rising. You could have already seen them on different websites. This feature enhances quality and user satisfaction. Various websites like YouTube, and Facebook have introduced such dark mode features.

Let’s head to create it.

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>
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

Top comments (2)

Collapse
 
ossamamehmood profile image
Ossama Mehmood 샘

The Toggle isn't working when I press it!

Collapse
 
emmancodex profile image
emmancodex

this stuff isnt working ....i even copied and pasted all codes just to see if im the one doing the mistake ...but nothing ...