How to Create Dark Mode Toggle in React Easily

Use React's useState hook to track dark mode state and toggle it with a button. Apply conditional CSS classes or styles based on this state to switch between light and dark themes.

Syntax

To create a dark mode toggle in React, you use the useState hook to hold the current theme state (dark or light). A button triggers a function that switches this state. Then, you apply CSS classes conditionally based on the state to change the appearance.

• useState(false): starts with light mode (false means light).
• toggleTheme: function to switch between true (dark) and false (light).
• className={isDark ? 'dark' : 'light'}: applies CSS classes based on state.

jsx

import React, { useState } from 'react';

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

  const toggleTheme = () => {
    setIsDark(prev => !prev);
  };

  return (
    <div className={isDark ? 'dark' : 'light'}>
      <button onClick={toggleTheme}>Toggle Dark Mode</button>
    </div>
  );
}

Example

This example shows a complete React component that toggles dark mode. It changes background and text colors when you click the button.

jsx

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

export default function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => {
    setIsDark(prev => !prev);
  };

  return (
    <div className={isDark ? 'dark' : 'light'}>
      <h1>{isDark ? 'Dark Mode' : 'Light Mode'}</h1>
      <button onClick={toggleTheme} aria-label="Toggle dark mode">
        Switch to {isDark ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
}

/* styles.css */
/* Light mode styles */
.light {
  background-color: #ffffff;
  color: #000000;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode styles */
.dark {
  background-color: #121212;
  color: #ffffff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

Output

A full-page area with white background and black text labeled 'Light Mode' and a button 'Switch to Dark Mode'. Clicking the button changes background to dark gray, text to white, label to 'Dark Mode', and button text to 'Switch to Light Mode'.

Common Pitfalls

Common mistakes include:

• Not using useState to track theme, causing no re-render on toggle.
• Forgetting to apply CSS classes conditionally, so the UI never changes.
• Not adding smooth transitions, making the switch jarring.
• Ignoring accessibility by not labeling the toggle button.

jsx

/* Wrong: No state, no toggle effect */
function WrongToggle() {
  let isDark = false;
  const toggleTheme = () => {
    isDark = !isDark; // Changing variable does not update UI
  };
  return (
    <div className={isDark ? 'dark' : 'light'}>
      <button onClick={toggleTheme}>Toggle</button>
    </div>
  );
}

/* Right: Using useState for reactive updates */
import React, { useState } from 'react';
function RightToggle() {
  const [isDark, setIsDark] = useState(false);
  const toggleTheme = () => setIsDark(prev => !prev);
  return (
    <div className={isDark ? 'dark' : 'light'}>
      <button onClick={toggleTheme} aria-label="Toggle dark mode">Toggle</button>
    </div>
  );
}

Quick Reference

• useState: Holds current theme state.
• toggleTheme: Function to switch theme.
• Conditional className: Applies dark or light CSS.
• CSS transitions: Smooth color changes.
• Accessibility: Use aria-label on toggle button.

Key Takeaways

Use React's useState hook to track and toggle dark mode state.

Apply CSS classes conditionally to switch between light and dark themes.

Add smooth CSS transitions for a better user experience.

Label toggle buttons with aria-label for accessibility.

Avoid changing variables directly without state to ensure UI updates.