Implement a light/dark theming system with CSS-in-JS and React Context

WHAT THIS TESTS: Whether you can manage global UI state without prop drilling by combining React Context with a CSS-in-JS theme injection pipeline. Interviewers want to see that you understand where state lives, how it reaches leaf components, and how the library bridges JavaScript values into styles. They also care about initialization hygiene such as reading system preferences and avoiding hydration mismatches.

A GOOD ANSWER COVERS: First, create a custom React Context that holds the current mode string and a toggle function. Second, build a provider that initializes the mode from localStorage if present, otherwise falls back to window.matchMedia for prefers-color-scheme, and persists changes back to localStorage. Third, derive a full theme object from the mode and wrap the app in both your custom provider and the styled-components ThemeProvider so the object is injected into the tree. Fourth, let presentational components consume tokens via props.theme inside template literals or through the useTheme hook, and let container components call useContext to read the mode or toggle. Fifth, memoize the theme object so you do not trigger unnecessary re-renders across the entire tree when unrelated state changes.

COMMON WRONG ANSWERS: Manually threading theme props through every component layer instead of using Context. Relying solely on CSS custom properties without explaining how React controls the active mode. Rebuilding the theme object on every render and causing performance issues. Hardcoding hex codes inside styled components rather than pulling from the theme. Ignoring server-side rendering concerns that lead to a flash of incorrect theme or hydration errors in Next.js.

LIKELY FOLLOW-UPS: How would you eliminate the flash of wrong theme on initial load in a Next.js application? How do you structure token objects to guarantee accessible contrast ratios across modes? What would your architecture look like if you needed to support high-contrast or seasonal brand themes beyond light and dark? Could you keep React in control of the mode while moving the actual style delivery to CSS variables for zero-runtime cost?

ONE CONCRETE EXAMPLE: Imagine a provider placed in the Next.js root App component. On mount it checks whether window.matchMedia for prefers-color-scheme dark matches and merges that with a localStorage value under app-theme to decide the initial mode. It then builds a theme object like colors with background set to a dark hex when mode is dark else a light hex, text set to off-white when dark else near-black, and primary set to a brand blue. The JSX returns your custom Context.Provider wrapping the styled-components ThemeProvider which receives that object. A NavBar component uses destructured mode and toggle from useThemeContext to show a toggle button. A styled.nav component reads background from props.theme.colors.background and color from props.theme.colors.text so it updates automatically when the mode changes.