How to Implement Dark Mode Toggle Using JavaScript

Implementing a dark mode toggle on your website not only enhances user experience but also aligns with modern design trends. In this article, we'll guide you through the process of creating a simple dark mode toggle using JavaScript.

Step 1: Setting Up Your HTML Structure

To begin with, you'll need a basic HTML structure. Create a simple webpage with a button for toggling dark mode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Toggle</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="darkModeToggle">Toggle Dark Mode</button>
    <h1>Welcome to Dark Mode Example</h1>
    <p>This is an example paragraph that will change appearance based on dark mode settings.</p>
    <script src="script.js"></script>
</body>
</html>

Step 2: Adding CSS for Dark Mode

Now, let's create a CSS file to define the styling for light and dark modes. Save this as styles.css:

body {
    background-color: #ffffff;
    color: #000000;
    transition: background-color 0.3s, color 0.3s;
}
.dark-mode {
    background-color: #2c2c2c;
    color: #ffffff;
}

Step 3: Writing the JavaScript for Dark Mode Toggle

The final step is to add the JavaScript functionality that will toggle dark mode when the button is clicked. Create a file named script.js and add the following code:

document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('darkModeToggle');
toggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        
        // Optional: Change button text based on mode
        if (document.body.classList.contains('dark-mode')) {
            toggle.innerText = 'Switch to Light Mode';
        } else {
            toggle.innerText = 'Toggle Dark Mode';
        }
    });
});

Step 4: Testing Your Dark Mode Implementation

Now, open your HTML file in a web browser. Clicking the "Toggle Dark Mode" button should switch the background and text color according to the styles defined in your CSS. The button's text should also give users a clear indication of the current mode.

Step 5: Enhancing User Experience

For a more advanced implementation, consider saving the user's preference in local storage. This allows the site to remember the selected mode even when the user refreshes the page. Here's how you can achieve that:

document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('darkModeToggle');
// Check local storage for saved preference
    if (localStorage.getItem('dark-mode') === 'enabled') {
        document.body.classList.add('dark-mode');
        toggle.innerText = 'Switch to Light Mode';
    }
toggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        
        // Save preference to local storage
        if (document.body.classList.contains('dark-mode')) {
            localStorage.setItem('dark-mode', 'enabled');
            toggle.innerText = 'Switch to Light Mode';
        } else {
            localStorage.setItem('dark-mode', 'disabled');
            toggle.innerText = 'Toggle Dark Mode';
        }
    });
});

By implementing these steps, you can create a functional and user-friendly dark mode toggle for your website. This not only improves accessibility but also allows users to customize their viewing experience according to their preferences.

How to Implement Dark Mode Toggle Using JavaScript