How to create toggle Dark and Light mode for website

What is dark theme?

The Dark theme is a low-light UI that features mostly dark surfaces.

Dark theme shows dark surfaces on most UI. It is designed as a complementary mode for the default (or light) theme.

Why you should use dark / light mode in your website.

Setting your website to dark mode means it will display white text on a dark background. Dark mode aims to reduce exposure to blue light and help with eye strain that comes with longer screen time.

How to add Toggle Dark/light Mode into a website.

Step 1 :-  Add  CSS

        :root{
        --body-color:#FFFFFF;
        --text-color:#18191A;
        --toggle:lightgray;
        }
        .dark{
        --body-color:#18191A;
        --text-color:#CCC;
        }
        body{
            background-color:var(--body-color);
        }
        h1,h2,h3,h4,h5,h6,p,span,label{color:var(--text-color)}
    
        /*----- CSS for toggle button ----*/
        #toggle-theme {
            padding:1px 2px;
            position: relative;
            width: 44px;
            height: 22px;
            border-radius: 25px;
            background: var(--toggle);
        }
        #toggle-theme::after {
            content: '';
            background:white;
            height: 20px;
            width: 22px;
            position: absolute;
            border-radius: 50%;
            left: 4px;
            top: 50%;
            transform: translateY(-50%);
            transition: 0.5s;
        }

        .dark #toggle-theme::after {
            content: '';
            background:white;
            left: 22px;
        }
    

Step 2 :- Add Toggle Button on  your HTML document.

        <div id="toggle-theme"></div>
    

Step 3 :- Add Java Script 

        $("#toggle-theme").click(function () {
            $("html, body").toggleClass("dark");
        });
    

Preview: