Waricha

Posted on Aug 29

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

#webdev #html #css #javascript

Light or Dark? One-Click Theme Switching for Website Accessibility

Websites and applications now typically have two distinct themes: a light theme for better visibility during the day and a dark theme for less eye strain at night. To provide the best experience, your website should allow users to easily toggle between these themes based on their preferences. This article will guide you on creating a dark mode toggle for your website using HTML, CSS, and JavaScript, enabling users to switch between light and dark themes with a single click.

In this tutorial, we'll build a sun and moon toggle button to represent light and dark modes. When a user clicks the button, the website will smoothly transition between these two modes. We'll also save the user's theme preference in local storage for future visits.

See the demo or the complete source code on this GitHub repository. You can learn interactively with this step-by-step guide, or scroll down for a detailed tutorial.

Prerequisites

Before we begin, make sure you have:

Basic knowledge of HTML, CSS, and JavaScript
A text editor or IDE (e.g., Visual Studio Code, Sublime Text)
A web browser for testing

Setting Up the HTML Structure

First, we'll create the basic HTML structure and add the necessary elements to build our toggle button and page content.

1. Create a new HTML file. Open your text editor and create a new index.html file with the basic HTML structure, including DOCTYPE, HTML, head, and body tags. Add the title tag for the page and import the external style.css and script.js files.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light/Dark Mode Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

2. Add necessary elements to the body. Inside the body tag, we'll add the following elements:

A container div to wrap all our content
An h1 title for the page
A p paragraph for a brief description
A toggle-container div that will include our toggle switch
Sun and moon SVG icons



<body>
    <div class="container">
        <h1>Light/Dark Mode Toggle</h1>
        <p>Click the toggle below to switch between dark and light modes.</p>
        <div class="toggle-container" id="themeToggle">
            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div>
    </div>
    <script src="script.js"></script>
</body>

This is what our plain index.html file looks like:

Adding CSS Styling for Light and Dark Modes

In this section, we’ll style our HTML elements and create light and dark modes. We’ll also use transitions for smooth color changes and control the visibility of sun and moon icons based on the current mode.

3. Define CSS variables for light and dark colors. Open the style.css file in your text editor. We’ll define CSS variables for dark and light colors using the :root selector. This allows for easy theme customization later on. If you want to change the dark or light colors, you only need to update them in one place.



/* Root selector for defining global CSS variables */
:root {
  --clr-dark: #333;  /* Dark color for text in light mode, background in dark mode */
  --clr-light: #fff; /* Light color for background in light mode, text in dark mode */
}

4. Set up basic CSS styles. Add styles for the body, .container, and h1 elements to establish the layout and typography of your page. You can customize these elements the way you like.

body Center the content both vertically and horizontally using CSS variables for colors and a transition for smooth color changes.
.container Center the content within our container.
h1 Add some space below the heading.



/* Base styles for the body */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--clr-light);
    color: var(--clr-dark);
    transition: background-color 0.3s, color 0.3s;
}
/* Container for centering content */
.container {
    text-align: center;
}
/* Heading styles */
h1 {
    margin-bottom: 20px;
}

5. Add CSS styling for dark mode. Create a CSS class named .dark-mode that swaps the background and text colors when applied to an element.



/* Styles for dark mode */
.dark-mode {
    background-color: var(--clr-dark);
    color: var(--clr-light);
}

6. Style the toggle icons. Add styles to the sun and moon SVG icons and control their visibility based on the current mode.



/* Styles for the toggle container */
.toggle-container {
    cursor: pointer;
}
/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s;
}
/* Hide moon icon by default (light mode) */
.moon-icon {
    display: none;
}
/* Show moon icon and hide sun icon in dark mode */
.dark-mode .sun-icon {
    display: none;
}
.dark-mode .moon-icon {
    display: inline-block;
}

With these CSS styles, your page will have a default light theme. The cursor: pointer property makes it clear that the toggle is clickable.

Implementing JavaScript Functionality

Now that we have our HTML structure and CSS styling in place, it's time to add interactivity to our dark mode toggle with JavaScript and implement local storage to remember the user's preference.

7. Select DOM elements. Open the script.js file and select the DOM elements we want to modify, the themeToggle ID, which contains our toggle button.



const themeToggle = document.getElementById('themeToggle');
const body = document.body;

8. Add event listeners to the toggle button. This is the core functionality of the dark mode toggle. Add an event listener to the themeToggle element to detect when the user clicks on it. It will add the dark-mode class to the body element if it’s absent, or removes the class if present.



themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
});

At this point, the toggle switch is functional, and clicking on it will switch between light and dark modes. However, if you reload the page while in dark mode, the website will revert to its default light mode.

9. Save user theme preferences in local storage. To save the user's theme preference even after the browser is closed, we'll use the localStorage object. Inside the event listener callback function, it checks if the body element has the dark-mode class.

If it does, localStorage.setItem() saves the 'dark-mode' value to the 'theme' key.
If it doesn't, localStorage.setItem() saves an empty string to the 'theme' key.



themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Store user preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.setItem('theme', '');
    }
});

10. Check for a saved theme preference. When the page loads, we want to check if there's a saved theme preference in the local storage. Use localStorage.getItem() to retrieve the value associated with the 'theme' key. If a 'dark-mode' preference exists in the local storage, apply the dark mode theme immediately by adding the dark-mode class to the body element.

Note: Make sure to place the getItem() method before the event listener to ensure it runs on page load.



// Check if user preference exists in local storage

const currentTheme = localStorage.getItem('theme');

if (currentTheme) {

    body.classList.add(currentTheme);

}

The Dark Mode Toggle in Action

We've implemented all the necessary components for our dark mode toggle, so let's see it in action. Try clicking the toggle switch to see the smooth transition between light and dark themes. Refresh the page to verify your theme preference is remembered.

Check out the complete source code on this GitHub repository.

Tips for Dark Mode Implementation

Creating a dark mode toggle is just the beginning. To create a user-friendly dark mode experience, there are several best practices to keep in mind.

Tip #1: Choose the Right Colors for Dark Mode

Selecting colors for dark mode involves more than simply inverting your light theme. The goal is to create a contrast between text and background colors for readability. Use tools like color contrast checkers to verify that your chosen colors meet WCAG (Web Content Accessibility Guidelines) standards. Remember, a well-designed dark mode should be easy on the eyes and work well across devices.

Tip #2: Create a User-Friendly Toggle Button

Create a clear visual distinction between light and dark modes to help users identify each mode easily. Your toggle switch or button should clearly show the current mode. You can implement effective approaches such as a sun and moon icon toggle, which is used in this article and is an easily recognizable choice, a light and dark mode text button, or a sliding switch with light/dark mode labels. Whichever design you choose, make sure it's consistent with your user interface and provides clear feedback when the user interacts with it.

Tip #3: Implement Smooth Transitions

To create a more polished user experience, use CSS transitions or animations for a seamless shift between light and dark modes. Make sure that all elements, including images and icons, smoothly transition to the new color scheme. This can be done by adjusting opacity, brightness, or swapping out images for dark mode-specific versions.

Conclusion

Adding a dark mode toggle to your website greatly improves user experience. This is not just about aesthetics but also usability and accessibility. It allows users to view content comfortably based on their preferences and lighting conditions.

Throughout this article, we've walked through the process of creating a simple dark mode toggle, covering HTML structure, CSS styling for light and dark themes, JavaScript functionality, and storing user preference. The key is to keep it simple and user-friendly. Don't forget to test your dark mode thoroughly to ensure all elements remain readable and functional.

Now it's your turn to create your own dark mode toggle! Share your CodePen or GitHub link in the comments below.

DEV Community

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Prerequisites

Setting Up the HTML Structure

Adding CSS Styling for Light and Dark Modes

Implementing JavaScript Functionality

The Dark Mode Toggle in Action

Tips for Dark Mode Implementation

Tip #1: Choose the Right Colors for Dark Mode

Tip #2: Create a User-Friendly Toggle Button

Tip #3: Implement Smooth Transitions

Conclusion

Further Reading

Top comments (0)

Read next

How to run cypress run and cypress open at a time

Optimizing React Re-Renders: Best Practices for Performance

Experimental attribute in C# is a powerful tool : Let's explore

Store UI State in localStorage with Stimulus