Implementing Dark Mode in React with CSS Variables and Context API

In today’s development landscape, user experience is paramount, and providing options like Dark Mode has become a trending feature. This blog will guide you through implementing Dark Mode in a React application using CSS Variables and the Context API. By the end of this article, you’ll have a solid understanding of how to add this feature effectively while keeping your code clean and maintainable.

What is Dark Mode?

Dark Mode is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. This mode reduces eye strain in low-light conditions and can also save battery life on OLED screens. With the increasing popularity of this feature, many developers now consider it a standard in modern web design.

Why Use CSS Variables?

CSS Variables, also known as Custom Properties, provide a flexible way to manage styles in your application. They enable you to define values in one place and reuse them throughout your stylesheets. This is particularly beneficial when dealing with themes like Dark Mode, where you can switch styles by modifying just a few variable values.

Setting Up Your React Project

First, ensure you have a React application set up. You can use Create React App for a straightforward setup. If you haven’t done this yet, run the following command:

npx create-react-app dark-mode-example

After the setup is complete, navigate into the directory:

cd dark-mode-example

Creating the Context for Dark Mode

The Context API allows you to share data across your React component tree without passing props down manually at every level. Let’s create a context to manage the theme state.

Create a new file called ThemeContext.js in the src directory:

import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
    const [isDarkMode, setIsDarkMode] = useState(false);

    const toggleTheme = () => {
        setIsDarkMode(prevMode => !prevMode);
    };

    return (
        
            {children}
        
    );
};

export const useTheme = () => {
    return useContext(ThemeContext);
};

In this file, we’ve created a ThemeContext, a provider component that manages the dark mode state, and a custom hook useTheme to access the context in other components easily.

Implementing CSS Variables for Themes

Next, let’s define some CSS variables for both light and dark themes. Open your index.css file and define the following styles:

:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

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

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

Here, we have set some default CSS variables for the light mode and defined a dark-mode class that overrides these variables for dark mode. The transition effect will make theme changes smooth.

Wrapping Your Application in the ThemeProvider

Now, we will wrap our application in the ThemeProvider we created earlier. Modify your src/index.js file as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';
import './index.css';

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

Creating a Toggle Button for Dark Mode

With our context and CSS variables set up, let’s implement a toggle button that switches between light and dark themes. Open your src/App.js file and modify it:

import React, { useEffect } from 'react';
import { useTheme } from './ThemeContext';

function App() {
    const { isDarkMode, toggleTheme } = useTheme();

    useEffect(() => {
        document.body.classList.toggle('dark-mode', isDarkMode);
    }, [isDarkMode]);

    return (
        

            
Hello, Dark Mode!
            
Click the button below to toggle dark mode.
            
                Switch to {isDarkMode ? 'Light' : 'Dark'} Mode
            
        
    );
}

export default App;

Here, we used the useEffect hook to toggle the dark-mode class on the body element based on the isDarkMode state. The button’s text dynamically changes based on the current theme.

Testing the Dark Mode Feature

Run your application:

npm start

You should now see a button that allows you to switch between light and dark modes as you click. The color scheme and styles should update accordingly, showcasing the effectiveness of using CSS variables along with the Context API to manage theme state.

Final Thoughts

Implementing Dark Mode in a React application using CSS Variables and the Context API is a flexible and scalable approach. This methodology not only simplifies your codebase but also makes it easy to extend with more themes or styles in the future.

With an increasing number of users preferring applications with Dark Mode, providing this functionality can significantly improve user experience. As you develop further, consider user preferences and accessibility best practices to ensure everyone enjoys your application.

Further Improvements

If you’re looking to enhance the Dark Mode functionality, consider the following:

• Persistent Theme State: Use localStorage to save the user’s preferred theme and apply it on the next visit.
• Animation Effects: Introduce animations or transitions for a visually appealing theme switch.
• More Themes: Allow users to select from multiple themes, providing a more personalized experience.

By incorporating these additional features, you can create an even more robust application, enticing users to spend more time engaging with your content. Happy coding!