Creating a dynamic theme switcher in a React application is a great way to enhance user experience. Users can choose between light and dark modes based on their preferences or environment. In this tutorial, we'll implement a simple theme switcher using React's Context API and CSS.

Step 1: Setting Up the React App

To get started, let's set up a new React application. You can use Create React App to quickly bootstrap your project. Run the following command in your terminal:

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

Once your app is created, navigate to the project folder.

Step 2: Create Theme Context

Next, we need to create a context to manage our theme state. Create a new file called ThemeContext.js in the src folder.

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

// Create a context
const ThemeContext = createContext();

// Custom provider component
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>
    );
};

// Custom hook to use theme context
export const useTheme = () => {
    return useContext(ThemeContext);
};

This code creates a ThemeContext and a ThemeProvider component that will serve as the context provider. We also created a useTheme hook that allows us to easily access the theme context from other components.

Step 3: Wrap Your App with the Theme Provider

Next, we need to wrap our application with the ThemeProvider we just created. Open src/index.js and modify it as follows:

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <ThemeProvider>
        <App />
    </ThemeProvider>
);

Step 4: Toggle Button Component

Now let's create a button to switch between themes. Create a new component called ThemeToggle.js in the src folder:

// src/ThemeToggle.js
import React from 'react';
import { useTheme } from './ThemeContext';

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

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

export default ThemeToggle;

This simple component utilizes our useTheme hook to get the current theme and a function to toggle it. The button text dynamically changes based on the current theme.

Step 5: Applying Styles Based on Theme

To visually reflect the theme change, we need to apply CSS styles accordingly. Create a basic style setup in src/index.css:

/* src/index.css */

body {
    transition: background 0.5s, color 0.5s;
}

.light {
    background-color: white;
    color: black;
}

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

Step 6: Applying the Theme to the App Component

Now, we need to apply the selected theme to our application. Open the src/App.js file and update it:

// src/App.js
import React from 'react';
import ThemeToggle from './ThemeToggle';
import { useTheme } from './ThemeContext';

function App() {
    const { theme } = useTheme();

    return (
        <div className={theme}>
            <h1>Welcome to the Theme Switcher App!</h1>
            <ThemeToggle />
        </div>
    );
}

export default App;

Here we apply the corresponding class to the div based on the current theme, which is either light or dark.

Step 7: Running the Application

Now that we have everything set up, it’s time to run our application! Open your terminal and execute:

npm start

Navigate to http://localhost:3000 in your browser. You should see a button that allows you to toggle between light and dark modes seamlessly.

By following these steps, you've successfully created a dynamic theme switcher in React! Users can now enjoy a personalized experience by choosing the theme that suits them best. In the next section, you may consider adding persistent storage so that the selected theme is remembered even after refreshing the page, using local storage or cookies.