DEV Community

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

Posted on • Edited on

5 2

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

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

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video