Implementing Dark Mode in React the Easy Way

Dark mode has become increasingly popular in modern web applications. Not only does it provide a visually appealing interface, but it also reduces eye strain, improves battery life on OLED screens, and enhances user experience, especially in low-light conditions. In this blog post, we’ll explore how to effortlessly implement dark mode in a React application.

What is Dark Mode?

Dark mode, also known as night mode or dark theme, is a color scheme that uses a dark background and light text. It’s designed to be easier on the eyes, particularly in low-light environments. Many users prefer to switch to dark mode for its aesthetic appeal and comfort during extended use of devices.

Why Implement Dark Mode?

• User Preference: Many users prefer dark interfaces, making it essential to cater to their preferences.
• Accessibility: Dark mode can improve readability for some users, especially those with light sensitivity.
• Battery Efficiency: For devices with OLED screens, dark mode can help save battery life.

Setting Up Your React Environment

Before we dive into dark mode implementation, ensure you have a React environment set up. You can create a new React application using Create React App.

npx create-react-app dark-mode-example

Navigate to the project directory:

cd dark-mode-example

Creating a Theme Context

To facilitate dark mode functionality, we’ll create a Theme context. This way, we can provide theme data across the component tree.

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

const ThemeContext = createContext();

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

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

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

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

In the above code, we created a ThemeContext that will hold our state for dark mode and a function to toggle this state. We’ll also create a custom hook, useTheme, for easier access to this context within our components.

Applying the Theme Provider

Wrap your application with the ThemeProvider in your main file, usually index.js:

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

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

Creating a Toggle Switch

Next, we’ll create a simple toggle switch component for users to switch between light and dark modes.

import React from 'react';
import { useTheme } from './ThemeProvider';

const ThemeToggle = () => {
  const { darkMode, toggleTheme } = useTheme();

  return (
    <div>
      <button onClick={toggleTheme}>
        Switch to {darkMode ? 'Light' : 'Dark'} Mode
      </button>
    </div>
  );
};

export default ThemeToggle;

Styling for Dark and Light Modes

Now that we have our toggle switch, let’s style our application based on the current theme. You can use CSS-in-JS libraries like styled-components, or simply use standard CSS classes. Here, I’ll show you a straightforward approach using CSS classes.

import React from 'react';
import './App.css';
import ThemeToggle from './ThemeToggle';
import { useTheme } from './ThemeProvider';

const App = () => {
  const { darkMode } = useTheme();

  return (
    <div className={darkMode ? 'App dark' : 'App'}>
      <h1>Dark Mode Example</h1>
      <ThemeToggle />
    </div>
  );
};

export default App;

Now create App.css:

.App {
  text-align: center;
  background-color: white;
  color: black;
  transition: all 0.5s ease;
}

.App.dark {
  background-color: black;
  color: white;
}

Adding Transitions for a Smooth Experience

To enhance the user experience, you might want to add transitions. This can be accomplished using simple CSS as shown above with the transition property in the App.css file.

Persisting User Preference

To ensure that user preferences are retained even after refreshing the page, you can leverage the localStorage API. Modify the Theme context to include this functionality:

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

const ThemeContext = createContext();

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

export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(() => {
    // Get the saved theme from localStorage or default to false.
    return JSON.parse(localStorage.getItem('darkMode')) || false;
  });

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

  useEffect(() => {
    // Save the current theme to localStorage
    localStorage.setItem('darkMode', JSON.stringify(darkMode));
  }, [darkMode]);

  return (
    
      {children}
    
  );
};

Conclusion

Implementing dark mode in a React application is a straightforward process that enhances user experience significantly. By utilizing React’s Context API for state management, alongside localStorage for preference persistence, you can create a delightful and user-friendly interface. With user preferences in mind, and easy toggling, your app will meet modern standards and satisfaction among your audience.

Feel free to expand upon this foundation by adding more styles, animations, or additional features like automatically detecting the user’s system theme. Happy coding!