You need a theme provider, so you create a file, add 'use client' at the top, and wrap your app in it.

Then a nagging thought arrives: "I just wrapped my entire layout in a client component. Did I turn the whole app into client-side React?"

Most developers either panic and avoid providers, or give up and put 'use client' at the top of every file "just to be safe". Both are the wrong response, and the actual rule is simpler than you expect.

The Setup

// components/ThemeProvider.tsx ' use client ' ;

import { createContext , useState } from ' react ' ;

export const ThemeContext = createContext ( ' light ' );

export function ThemeProvider ({ children }: { children : React .…