React Context for Theme State

Start by calling createContext() with a default value that matches your context shape: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). The default value is used only when a component reads the context without a parent Provider, which helps with testing isolated components.

The ThemeProvider component is a wrapper that holds all theme logic. It reads the system preference on mount, manages the theme state, provides a toggleTheme function, and wraps children in ThemeContext.Provider value={{ theme, toggleTheme }}. Place it near the top of your component tree.