How can I implement theme switching in my React app?

How can I implement theme switching in my React app?

You can implement theme switching in React by using context and state management. Would you like a code example?

Yes, please provide a code example!

Sure! You can create a ThemeContext and use a toggle function to switch between themes. Here's a simple example:

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

const ThemeContext = createContext();

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>
    );
};

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

You can then use useTheme in your components to access the current theme and toggle function.

How do I apply the theme to my components?

You can apply the theme by using conditional styling based on the current theme value. For example:

const MyComponent = () => {
    const { theme } = useTheme();
    return (
        <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
            This is a {theme} themed component!
        </div>
    );
};