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

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">
        <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>
            [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;
        <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>
        <script src=""></script>

That’s it! Happy coding. Thanks!
Exit mobile version