Implementing Dark Mode in React: A Step-by-Step Guide

Dark mode has gained significant traction as a user-preferred feature in modern web applications. By reducing eye strain and saving battery life on devices with OLED screens, dark mode enhances user experience. In this blog post, we will explore an easy way to implement dark mode in a React application using React’s built-in capabilities and CSS. Let’s dive into creating this functionality step by step!

Why Implement Dark Mode?

Before we start coding, let’s understand why dark mode is not just a trendy feature but a significant enhancement:

• Improved Accessibility: Dark mode is easier on the eyes, especially in low-light environments.
• Battery Saving: On OLED displays, displaying black pixels consumes less power.
• Custom User Experience: It allows users to choose their preferred viewing experience, enhancing overall satisfaction.

Setting Up Your React Project

If you don’t have an existing React project, you can quickly set one up using Create React App. Open your terminal and run the following command:

npx create-react-app dark-mode-app

After the setup is complete, navigate to the project folder:

cd dark-mode-app

Creating a Dark Mode Toggle

We will create a simple toggle button to switch between light and dark modes. The toggle state will be managed using React’s state management system.

Step 1: Setting Up State Management

First, we need to set up the state for our dark mode preference. Open src/App.js and modify it as follows:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [darkMode, setDarkMode] = useState(false);

    const toggleDarkMode = () => {
        setDarkMode(prevMode => !prevMode);
    };

    useEffect(() => {
        if (darkMode) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    }, [darkMode]);

    return (
        

            
{darkMode ? 'Dark Mode' : 'Light Mode'}
            
                Toggle to {darkMode ? 'Light' : 'Dark'} Mode
            
        
    );
}

export default App;

In the code above, we defined a darkMode state that toggles between true and false. The useEffect hook updates the class of the body element accordingly.

Step 2: Adding CSS for Dark Mode

Next, you need to add the CSS styles for dark mode. Create a new file named App.css in the src directory and add the following styles:

body {
    background-color: #ffffff;
    color: #000000;
    transition: all 0.3s ease;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

button {
    padding: 10px;
    margin: 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-size: 16px;
}

button:hover {
    background-color: #e0e0e0;
}

.dark-mode button:hover {
    background-color: #3a3a3a;
}

The CSS styles provide a smooth transition between light and dark modes, changing the background color and text color appropriately.

Persisting User Preference

To enhance the user experience, it’s essential to retain the user’s theme preference, even after refreshing the page. You can achieve this using the localStorage feature. Update the useEffect hook in your App.js file to save and retrieve the user’s preference:

useEffect(() => {
    const savedMode = localStorage.getItem('darkMode');
    if (savedMode) {
        setDarkMode(savedMode === 'true');
    }
}, []);

useEffect(() => {
    localStorage.setItem('darkMode', darkMode);
    if (darkMode) {
        document.body.classList.add('dark-mode');
    } else {
        document.body.classList.remove('dark-mode');
    }
}, [darkMode]);

Responsive Design Considerations

When building an application, ensure that your dark mode implementation is responsive. The above implementation with buttons and text works well for general layout. However, consider your entire UI—such as modals, tooltips, or cards—ensuring they also adapt to dark mode styling.

Example of a Responsive Card Component

You can create a simple card component that changes based on the theme. Here’s an example:

import React from 'react';
import './Card.css'; // Assuming you create a separate CSS for Card

const Card = ({ title, description }) => {
    return (
        

            
{title}
            
{description}
        
    );
};

export default Card;

The accompanying CSS in Card.css would look like this:

.card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.dark-mode .card {
    background-color: #2c2c2c;
    color: white;
}

Conclusion

Implementing dark mode in React does not have to be complicated. By utilizing React’s state management and CSS, you can create a user-friendly toggle for dark mode. Remember that maintaining user preferences enhances the experience and demonstrates users’ consideration. As you continue to develop applications, consider integrating dark mode features to cater to a broader audience.

By following the steps outlined in this guide, you should now have a fully functional dark mode in your React application. Don’t forget to test your implementation across different devices to ensure a consistent user experience!

Happy coding!

Additional Resources

• React Hooks Documentation
• MDN Web Docs – Local Storage
• Template example of dark mode in custom design systems