How can I implement a theme switcher in my Next.js app?

How can I implement a theme switcher in my Next.js app?

You can create a theme switcher in Next.js by using React's context API to manage the theme state.

Can you show me a code example?

Sure! First, create a context for the theme, then use a provider to wrap your app. Here's a simple example:

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

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));

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

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

Then, use the useTheme hook in your components to access the theme and toggle function.

How do I apply the theme to my components?

You can conditionally apply classes based on the current theme. For example:

const MyComponent = () => {
    const { theme } = useTheme();
    return <div className={theme === 'light' ? 'light-theme' : 'dark-theme'}>Hello World!</div>;
};

What about saving the user's theme preference?

You can use localStorage to save the user's theme preference. Update the toggleTheme function to save the selected theme.