Creating a Theme Switcher in React

In today’s web development landscape, user experience (UX) is paramount. A well-executed theme switcher can significantly enhance how users interact with your application. This article will guide you through the process of creating a dynamic theme switcher in React, enabling users to toggle between light and dark modes seamlessly.

Understanding the Basics

A theme switcher allows users to customize the visual presentation of your web application. The common themes include light mode, which uses a light background with darker text, and dark mode, designed to reduce glare and promote readability in low-light situations. By providing this functionality, you enhance accessibility and overall user satisfaction.

Setting Up the React Application

To begin, ensure you have Node.js and npm installed on your machine. If they are ready, you can create a new React application using

npx create-react-app theme-switcher

Next, navigate into your project directory:

cd theme-switcher

Now, you can install any additional dependencies to support styling. For this example, we’ll use styled-components, which is great for writing CSS in JS.

npm install styled-components

Creating Theme Context

To effectively manage themes, we’ll create a context that allows us to easily access and update the theme state across the application. Create a new folder called context in the src directory and add a file named ThemeContext.js.

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

const ThemeContext = createContext();

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

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

    return (
        
            {children}
        
    );
};

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

This code creates a ThemeContext that holds the current theme and a function to toggle it. The ThemeProvider component will wrap our application, providing the theme context to all components.

Setting Up the Theme Provider

Now, we need to include the ThemeProvider in our main application file, index.js.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './context/ThemeContext';

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

Defining Global Styles

Next, we’ll define our global styles based on the current theme. Create a file called GlobalStyles.js in the src folder:

// src/GlobalStyles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
    body {
        margin: 0;
        padding: 0;
        background-color: ${({ theme }) => (theme === 'light' ? '#ffffff' : '#1e1e1e')};
        color: ${({ theme }) => (theme === 'light' ? '#000000' : '#ffffff')};
        transition: background-color 0.5s, color 0.5s;
    }
`;

export default GlobalStyles;

In this file, we define the styles that will change based on the current theme. We also apply a transition effect to create a smooth visual experience when switching themes.

Updating the App Component

Next, open App.js and implement the theme toggle functionality:

// src/App.js
import React from 'react';
import { useTheme } from './context/ThemeContext';
import GlobalStyles from './GlobalStyles';
import styled from 'styled-components';

const ToggleButton = styled.button`
    margin: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
`;

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

    return (
        
            
            
Welcome to the Theme Switcher
            
                Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
            
        

// src/Card.js
import styled from 'styled-components';

const Card = styled.div`
    padding: 20px;
    margin: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: ${({ theme }) => (theme === 'light' ? '#f9f9f9' : '#2a2a2a')};
`;

export default Card;

// src/context/ThemeContext.js
export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState(() => {
        return localStorage.getItem('theme') || 'light';
    });

    const toggleTheme = () => {
        const newTheme = theme === 'light' ? 'dark' : 'light';
        setTheme(newTheme);
        localStorage.setItem('theme', newTheme);
    };
    //...