How To Use Dark/Light Mode With CSS And JavaScript?

Kripesh Sarkar

2 years ago

I have used Dark / Light mode before using SCSS as well as Style-Component, but the same functionality can be accomplished using CSS and some JavaScript.

In this article, I will provide a step-by-step guide on how to accomplish this for your own application.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dark Mode - SetUp</title>
        
        <style>
            [data-theme="dark"] {
              background-color: #111 !important;
              color: #eee;
            }

            [data-theme="dark"] .bg-black {
              background-color: #fff !important;
            }

            [data-theme="dark"] .bg-dark {
              background-color: #eee !important;
            }

            [data-theme="dark"] .bg-light {
              background-color: #222 !important;
            }

            [data-theme="dark"] .bg-white {
              background-color: #000 !important;
            }
        </style>
    </head>
    
    <body>
        
        <div class="form-check form-switch">
            <input type="checkbox" class="form-check-input" id="darkSwitch">
            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.0.1/darkmode-js.min.js"></script>
    </body>
</html>

That’s it! Happy coding. Thanks!