How to Create a Dark Mode & Light Mode Toggle Using CSS and JavaScript

In this tutorial, we will learn how to implement a simple Dark Mode & Light Mode toggle using CSS and JavaScript. The theme selection will be stored in localStorage so that the user's preference is remembered even after refreshing the page.

Final Output Preview

Before we dive into the code, here is a preview of what we will build:

Dark Mode & Light Mode Toggle Using CSS and JavaScript

Step 1: Setting Up the Basic HTML Structure

First, let's create a simple HTML file that includes a heading and a button to toggle between dark mode and light mode.

<body data-theme="light">
        <h1>Dark Mode & Light Mode Using Css And JS</h1>
        <button class="themeToggler">🌙 Toggle Dark Mode</button>
    </body>

The <h1> tag displays the title.
The <button> will be used to toggle between themes.
The data-theme attribute in the <body> tag will help us switch themes dynamically.

Step 2: Adding CSS for Light and Dark Themes

Now, let's define CSS variables for both light and dark themes using the :root selector and apply them conditionally based on the data-theme attribute.

*,
        *::before,
        *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        :root {
            --bg: #ececec;
            --text: black;
            --primaryBg: #c0c0c0;
            --primaryText: #1b1b1b;
            --btnHover: #5d5d5d33;
        }

        body[data-theme="dark"] {
            --bg: #121212;
            --text: #ffffff;
            --primaryBg: #222;
            --primaryText: white;
            --btnHover: #ffffff33;
        }

        body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            transition: 500ms ease;
        }

        body h1 {
            font-size: clamp(2rem, 2.5vw, 3rem);
        }

        body button.themeToggler {
            padding: 12px 15px;
            border-radius: 8px;
            border: none;
            background-color: var(--primaryBg);
            color: var(--primaryText);
            font-size: clamp(1.2rem, 1.3vw, 1.5rem);
            font-weight: bold;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.188);
            transition: 300ms ease;
            cursor: pointer;
        }

        body button.themeToggler:hover {
            background-color: var(--btnHover);
            transform: scale(1.05);
        }

Explanation:

We use :root to define CSS variables that will change based on the theme.
The body[data-theme="dark"] section overrides these variables for dark mode.
The transition effect creates a smooth color change when toggling themes.

Step 3: Adding JavaScript to Toggle the Theme

Now, let's add JavaScript to handle theme switching when the button is clicked.

const themeToggler = document.querySelector('.themeToggler');
        const body = document.body;

        themeToggler.addEventListener('click', () => {
            let currentTheme = body.getAttribute('data-theme');
            let nextTheme = currentTheme == "light" ? "dark" : "light";
            //set theme in localstorage
            localStorage.setItem('theme',nextTheme);
            body.setAttribute('data-theme',nextTheme);
            updateButtonText(currentTheme == "light");
        });

        function updateButtonText(flg){
            themeToggler.innerText = flg ? "☀️ Toggle Light Mode" :"🌙 Toggle Dark Mode";
        }
        function initTheme(){
            body.setAttribute('data-theme',localStorage.getItem('theme'));
        }
        //initialize theme
        initTheme();

Explanation:

We select the .themeToggler button and body element.
When the button is clicked:
- The current theme is checked.
- The theme is toggled between light and dark.
- The new theme is stored in localStorage so it persists on reload.
- The body’s data-theme attribute is updated.
- The button text is updated to match the active theme.
The initTheme() function loads the saved theme from localStorage when the page is loaded.

Step 4: Final Output

With the above steps completed, we now have a Dark Mode & Light Mode toggle feature that:

Switches themes smoothly using CSS variables.
Saves the user's preference in localStorage.
Updates the button text dynamically.

Conclusion

This method is lightweight and efficient for implementing dark mode in any website. You can enhance it further by:

Using CSS animations for smoother transitions.
Applying the theme change to more elements.
Implementing system-preferred themes with prefers-color-scheme.

💡 Try it out and customize it for your website! 🚀

Let me know if you need modifications or enhancements! 😊

Full Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode & Light Mode Using Css And JS</title>
    <style>
        *,
        *::before,
        *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        :root {
            --bg: #ececec;
            --text: black;
            --primaryBg: #c0c0c0;
            --primaryText: #1b1b1b;
            --btnHover: #5d5d5d33;
        }

        body[data-theme="dark"] {
            --bg: #121212;
            --text: #ffffff;
            --primaryBg: #222;
            --primaryText: white;
            --btnHover: #ffffff33;
        }

        body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: var(--bg);
            color: var(--text);
            font-family: Arial, Helvetica, sans-serif;
            transition: 500ms ease;
        }

        body h1 {
            font-size: clamp(2rem, 2.5vw, 3rem);
        }

        body button.themeToggler {
            padding: 12px 15px;
            border-radius: 8px;
            border: none;
            background-color: var(--primaryBg);
            color: var(--primaryText);
            font-size: clamp(1.2rem, 1.3vw, 1.5rem);
            font-weight: bold;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.188);
            transition: 300ms ease;
            cursor: pointer;
        }

        body button.themeToggler:hover {
            background-color: var(--btnHover);
            transform: scale(1.05);
        }
    </style>
</head>

<body data-theme="light">
    <h1>Dark Mode & Light Mode Using Css And JS</h1>
    <button class="themeToggler">🌙 Toggle Dark Mode</button>

    <script>
        const themeToggler = document.querySelector('.themeToggler');
        const body = document.body;

        themeToggler.addEventListener('click', () => {
            let currentTheme = body.getAttribute('data-theme');
            let nextTheme = currentTheme == "light" ? "dark" : "light";
            //set theme in localstorage
            localStorage.setItem('theme',nextTheme);
            body.setAttribute('data-theme',nextTheme);
            updateButtonText(currentTheme == "light");
        });

        function updateButtonText(flg){
            themeToggler.innerText = flg ? "☀️ Toggle Light Mode" :"🌙 Toggle Dark Mode";
        }
        function initTheme(){
            body.setAttribute('data-theme',localStorage.getItem('theme'));
        }
        //initialize theme
        initTheme();
    </script>
</body>

</html>

Tags : #Dark Mode Toggle #Light Mode Toggle #CSS Dark Mode #JavaScript Dark Mode #Theme Switcher #Dark Mode Button #Light and Dark Theme #Toggle Theme JavaScript #Dark Mode Tutorial #Dark Mode in HTML