How to implement dark mode Toggle in React (Updated 2024)

76

Adding a dark mode toggle to your React application can significantly enhance the user experience, allowing users to switch between light and dark themes according to their preferences. This feature has become increasingly popular, providing a visually comfortable browsing experience during different times of the day. Below is a step-by-step guide to implementing a dark mode toggle in your React application.

Guiding Steps for Integration of Dark Mode Toggle in React

Step 1: Setting Up Your React Environment

If you haven’t already, create a new React application:

npx create-react-app dark-mode-app
cd dark-mode-app

Step 2: Creating Context for Theme Management

Use React’s Context API to manage the theme globally. Create a ThemeContext.js file in your src directory:

// src/ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

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

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((curr) => (curr === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Step 3: Wrapping Your Application with the ThemeProvider

Modify your App.js to use the ThemeProvider and apply class names based on the current theme:

// src/App.js
import React from 'react';
import { ThemeProvider, useTheme } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      <Main />
    </ThemeProvider>
  );
};

const Main = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`app ${theme}`}>
      <h1>React Dark Mode Toggle</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default App;

Step 4: Styling the Dark and Light Themes

In your App.css or wherever you manage your styles, define the styles for light and dark themes:

/* src/App.css */
.app {
  text-align: center;
  padding: 20px;
}

.app.light {
  background-color: #fff;
  color: #000;
}

.app.dark {
  background-color: #333;
  color: #fff;
}

Step 5: Toggling the Theme

The toggleTheme function in ThemeContext.js changes the theme from light to dark and vice versa. Clicking the button in your Main component calls this function, updating the theme across your application.

Conclusion

Implementing a dark mode toggle in your React application is straightforward with the Context API and some basic state management. This setup not only enhances user experience but also introduces you to patterned ways of managing global state, like user preferences, across your application.

React Toggle dark mode – FAQs