Implementing Dark Mode in React: A Comprehensive Guide

With the rise in popularity of dark mode across countless applications and websites, adding this feature to your React app can significantly enhance the user experience. This blog will explore various methods to implement dark mode in React with an emphasis on simplicity and effectiveness. By the end of this article, you’ll not only understand the importance of dark mode but also how to seamlessly integrate it into your projects.

What is Dark Mode?

Dark mode, a color scheme that uses light-colored text and elements on a dark background, has become a preference for many users. The reasons for its popularity include:

• Reduced Eye Strain: Dark themes are easier on the eyes, especially in low-light environments.
• Extended Battery Life: On OLED and AMOLED screens, dark mode can save battery life as the pixels are turned off when displaying black.
• Enhanced Visibility: Some users find that dark mode provides better contrast and readability.

Setting Up Your React Environment

To get started, ensure you have a Remax project set up. You can create one using Create React App by executing:

npx create-react-app dark-mode-example

Navigate to your project directory:

cd dark-mode-example

Implementing Dark Mode Using React Context API

Using React’s Context API is one of the most powerful and scalable ways to implement dark mode. It allows you to manage the dark mode state globally in your application.

1. Create Context for Theme

First, let’s create a context for managing the theme state:

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

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

export const ThemeProvider = ({ children }) => {

    const [isDark, setIsDark] = useState(false);

    const toggleTheme = () => setIsDark(!isDark);

    return ({children});

};

2. Update App Component

Next, wrap your application with the ThemeProvider in your main index file:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import { ThemeProvider } from './ThemeContext';

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

3. Create a Theme Toggle Button

In your main App component, let’s add a button to toggle between light and dark mode:

import React from 'react';

import { useTheme } from './ThemeContext';

const App = () => {

    const { isDark, toggleTheme } = useTheme();

    return (


        
Hello, World!


        Toggle Dark Mode

    
);

};

export default App;

Styling Dark Mode

To improve the appearance of your app in dark mode, it’s crucial to style your components accordingly. Here’s how to apply CSS styles based on the theme:

const App = () => {

    const { isDark, toggleTheme } = useTheme();

    return (


        
Hello, World!


        Toggle Dark Mode

    
);

};


{`

    .dark-mode {

        background-color: #121212;

        color: white;

    }

    .light-mode {

        background-color: #FFFFFF;

        color: black;

    }

`}

:root {

    --background-light: white;

    --background-dark: #333;

    --text-light: black;

    --text-dark: white;

}


.dark-mode {

    background-color: var(--background-dark);

    color: var(--text-dark);

}


.light-mode {

    background-color: var(--background-light);

    color: var(--text-light);

}

const App = () => {

    const { isDark, toggleTheme } = useTheme();

    return (


        
Hello, World!


        Toggle Dark Mode

    
);

};

const ThemeProvider = ({ children }) => {

    const initialTheme = localStorage.getItem('theme') === 'dark';

    const [isDark, setIsDark] = useState(initialTheme);

    
    const toggleTheme = () => {

        const newTheme = !isDark;

        setIsDark(newTheme);

        localStorage.setItem('theme', newTheme ? 'dark' : 'light');

    };


    return ({children});

};