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

Dark mode has become an essential feature in modern web applications. It enhances user experience, reduces eye strain, and improves accessibility. In this guide, we'll walk through implementing dark mode in a React application with best practices.

Why Implement Dark Mode?

1. Better User Experience - Allows users to switch to a more comfortable theme.

2. Energy Efficiency - Consumes less power on OLED and AMOLED screens.

3. Accessibility - Beneficial for users sensitive to bright light.

Steps to Implement Dark Mode in React

Step 1: Set Up a React App

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

npx create-react-app dark-demo-react-app
cd dark-demo-react-app
npm start

or create react app using vite

Step 2: Create a Theme Context

Using the Context API, we’ll create a global theme state. or we can use redux.

Create a ThemeContext.js file:

import { createContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

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

  useEffect(() => {
    document.body.className = theme;
    localStorage.setItem('theme', theme);
  }, [theme]);

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

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

export default ThemeContext;

Step 3: Apply Dark Mode Styles

Modify the index.css or App.css file to include styles for both themes.

body.light {
  background-color: #ffffff;
  color: #000000;
}

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

button {
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

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

.light button {
  background-color: #ddd;
  color: #000;
}

Step 4: Use the Theme Context in the App

Open the App.js file and integrate the theme context.

import React, { useContext } from 'react';
import ThemeContext, { ThemeProvider } from './ThemeContext';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    </button>
  );
};

function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>Dark Mode in React</h1>
        <ThemeToggleButton />
      </div>
    </ThemeProvider>
  );
}

export default App;

Step 5: Test and Deploy

Run your app with npm start and test switching themes. Deploy the app using platforms like Netlify or Vercel.

Conclusion

By implementing dark mode, you improve user experience and accessibility. This tutorial ensures proper state management using Context API and saves user preferences with localStorage.

Next Steps:

• Enhance with Tailwind CSS or Styled Components.

• Add animations for smooth theme transitions.

• Implement system preference detection