Creating a Theme Switcher in React

In modern web development, user experience is paramount. As a developer, one way to enhance the experience is by incorporating a theme switcher in your applications. This allows users to toggle between different themes—typically a light and dark mode—that suits their visual preferences. In this blog, we will walk through creating a simple yet effective theme switcher in a React application.

What is a Theme Switcher?

A theme switcher is a user interface component that enables users to change the appearance of the application based on their preference. It usually toggles between predefined styles, such as light and dark themes. This not only adds a personal touch but can also help reduce eye strain and improve accessibility.

Setting Up Your React Application

If you don’t already have a React application set up, you can create one quickly using Create React App. Open your terminal and run:

npx create-react-app theme-switcher

Once your application is created, navigate to the project directory:

cd theme-switcher

Now, let’s install styled-components to facilitate styling in our React app:

npm install styled-components

Creating the Theme Context

To manage our themes centrally, we will utilize React Context. This allows us to share theme data across our components without prop drilling.

Create a new file named ThemeContext.js in the src folder:

touch src/ThemeContext.js

In ThemeContext.js, set up a context to provide theme information:

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


const ThemeContext = createContext();


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


export const ThemeProvider = ({ children }) => {

    const [theme, setTheme] = useState('light');


    const toggleTheme = () => {

        setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));

    };


    return (

        <ThemeContext.Provider value={{ theme, toggleTheme }}>

            {children}

        </ThemeContext.Provider>

    );

};

Integrating the Theme Provider

Next, we will wrap our application in the ThemeProvider so that the theme context can be accessed throughout our component tree. Open the src/index.js file and modify it as follows:

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import { ThemeProvider } from './ThemeContext';


ReactDOM.render(

    <ThemeProvider>

        <App />

    </ThemeProvider>

, document.getElementById('root'));

Creating the Theme Switcher Component

Now it’s time to create the component responsible for toggling the theme. Create a new file ThemeSwitcher.js in the src folder:

touch src/ThemeSwitcher.js

Next, implement the theme switcher feature:

import React from 'react';

import { useTheme } from './ThemeContext';


const ThemeSwitcher = () => {

    const { theme, toggleTheme } = useTheme();


    return (

        <button onClick={toggleTheme}>Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode</button>

    );

};


export default ThemeSwitcher;

Implementing Styles for Themes

We will now use styled-components to create a simple theme management style. In your src directory, create a file called themes.js:

touch src/themes.js

Populate themes.js with the theme definitions:

export const lightTheme = {

    background: '#ffffff',

    color: '#000000'

};


export const darkTheme = {

    background: '#000000',

    color: '#ffffff'

};

Applying Styles Using ThemeProvider

Now, we need to apply these themes using styled-components. In your App.js file, import the necessary modules.

import React from 'react';

import { ThemeProvider as StyledThemeProvider } from 'styled-components';

import { useTheme } from './ThemeContext';

import ThemeSwitcher from './ThemeSwitcher';

import { lightTheme, darkTheme } from './themes';


const App = () => {

    const { theme } = useTheme();

    return (

        <StyledThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>

            <div style={{

                background: theme === 'light' ? lightTheme.background : darkTheme.background,

                color: theme === 'light' ? lightTheme.color : darkTheme.color,

                minHeight: '100vh',

                padding: '20px'

            }}>

                <h1>Welcome to the Theme Switcher App</h1>

                <ThemeSwitcher />

            </div>

        </StyledThemeProvider>

    );

};


export default App;

Putting It All Together

Your directory structure should look like this:

• src/
• ThemeContext.js
• ThemeSwitcher.js
• themes.js
• App.js

Now, start your application with:

npm start

Your application should open in the default web browser, and you should see a button that allows switching between light and dark modes.

Conclusion

In this article, we have explored how to create a simple theme switcher in a React application using Context and styled-components. Not only does this feature add a layer of personalization for users, but it also contributes to a more accessible and flexible web experience. With just a bit of code, you can significantly enhance the user interface of your applications.

Feel free to expand on this example by adding additional themes, animations, or even integrating local storage to remember user preferences across sessions. Happy coding!