How to Implement Dark Mode with CSS

May 1, 2024

Implementing a dark mode for your website can improve user experience, especially in low-light environments, and can also save battery life on mobile devices with OLED screens. In this blog post, we’ll walk through the process of adding a dark mode toggle to your website using CSS and a bit of JavaScript.

Step 1: Set Up Your HTML Structure

First, create a basic HTML structure with a toggle button to switch between light and dark modes:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Feature</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="darkModeToggle">Toggle Dark Mode</button>
    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>This is a sample paragraph to demonstrate dark mode styling.</p>
    </div>
</body>
</html>

Step 2: Apply Basic CSS

Add basic styles for your light theme and set up the initial layout:

css
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: #fff;
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.content {
    max-width: 600px;
    margin: auto;
}

button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
}

Step 3: Implement Dark Mode Styling

Use CSS custom properties to make switching themes easier:

css
:root {
    --text-color: #333;
    --bg-color: #fff;
}

[data-theme="dark"] {
    --text-color: #ccc;
    --bg-color: #333;
}

body {
    color: var(--text-color);
    background-color: var(--bg-color);
}

Step 4: Add JavaScript to Toggle Themes

Include JavaScript to handle the theme switching:

html
<script>
    const toggleButton = document.getElementById('darkModeToggle');
    toggleButton.addEventListener('click', function() {
        const currentTheme = document.body.getAttribute('data-theme');
        if (currentTheme === 'dark') {
            document.body.setAttribute('data-theme', 'light');
        } else {
            document.body.setAttribute('data-theme', 'dark');
        }
    });
</script>

This script toggles the data-theme attribute on the <body> tag, which switches the CSS variables between light and dark themes.

Step 5: Test and Refine

After implementing the dark mode toggle, test your website to ensure that the theme switch works smoothly and that all elements are properly styled for both themes. Pay attention to elements like links, buttons, and form inputs to ensure they are also adapted to both light and dark modes.

Conclusion

Adding a dark mode to your website is not just a trend but also a practical feature that caters to user preferences and conditions. By using CSS variables and a simple JavaScript toggle, you can easily implement an effective and user-friendly dark mode switcher. This feature enhances the accessibility and usability of your website, providing a better experience for users who prefer darker color schemes or require them due to environmental conditions or personal comfort.