Implementing Dark, Light, and Auto Mode in React Apps

Introduction

This article explain the implementation of toggle theme in React apps. As it one of the primary features to enchane the user experience of the apps. Furthermore, respecting the user’s system preference for dark and light and auto modes (system preferences) can not only improve the user experiencebut also the app accesibility. This post will look at how to toggle themes in React Apps. As web developers, we strive to design apps that are user-friendly and accessible to customers and enchance our clients online presence.

Steps to Implement Toggle Theme in React App.

1. Set Up the React Application

First, create a new React application using the Create React App or any other setup you choose.

npx create-react-app theme-switcher
cd theme-switcher
npm start

2. Define CSS Variables for Themes

Create a CSS file to define the variables for toggle/ light and dark themes.

/* src/themes.css */

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #ffffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

3. Create the Theme Context

We will use the Context API to manage the theme state across the application.

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

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const getInitialTheme = () => {
    const savedTheme = localStorage.getItem('theme');
    return savedTheme || 'light';
  };

  const [theme, setTheme] = useState(getInitialTheme);

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

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

export { ThemeProvider, ThemeContext };

4. Create a Component to Toggle Theme in React App

Create a component allowing users to toggle between light, dark, and auto modes.

/* src/ThemeToggle.js */
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggle = () => {
  const { theme, setTheme } = useContext(ThemeContext);

  const handleThemeChange = (event) => {
    setTheme(event.target.value);
  };

  return (
    <div>
      <select value={theme} onChange={handleThemeChange}>
        <option value="light">Light Mode</option>
        <option value="dark">Dark Mode</option>
        <option value="auto">Auto (System Preference)</option>
      </select>
    </div>
  );
};

export default ThemeToggle;

Conclusions

By following this guide, you have implemented a robust theme switcher in your React application, allowing users to toggle theme in React Apps between light and dark modes and an auto mode that respects their system preferences. This enhances user experience by providing customizable appearance settings, ensuring that your application is accessible and visually appealing to all users. The combination of CSS variables, Context API, and a theme toggle component makes this implementation efficient and easy to manage.