Architecting global and local theming with context

WHAT THIS TESTS The interviewer wants to see that you understand context as a cascading override mechanism and can support both a global theme and targeted local overrides without prop drilling or brittle global state.

A GOOD ANSWER COVERS Define a typed theme object of design tokens (colors, spacing, typography). Provide it through a root ThemeProvider that places the merged theme in context, so any descendant component reads tokens via a useTheme hook rather than receiving them as props. To support global overrides, the consumer wraps their app in a ThemeProvider with their token overrides, which you deep-merge onto your default theme so they only specify what differs. To support component-level or subtree overrides, allow nested ThemeProviders: a nested provider reads the parent theme from context, deep-merges its overrides, and supplies the result to its subtree, so the nearest provider wins. Individual components can also accept a local style or token prop that takes final precedence. Backing tokens with CSS custom properties is a strong refinement, because changing a variable re-themes without re-rendering the React tree and works across the cascade.

COMMON WRONG ANSWERS Passing the theme down through props at every level, which is exactly what context avoids. Replacing the whole theme on override instead of deep-merging, forcing consumers to redeclare everything. Using a single mutable global object, which breaks multiple themes on one page and server rendering.

LIKELY FOLLOW-UPS How do you handle performance when the theme object changes? How does this work with dark mode or multiple simultaneous themes? Why are CSS variables often better than pure context for tokens?

ONE CONCRETE EXAMPLE A root ThemeProvider sets the brand palette. A marketing section is wrapped in a nested ThemeProvider overriding only the primary color, which deep-merges with the global theme so spacing and typography are inherited. A single promotional Button still accepts a local override prop that wins over both, demonstrating global, subtree, and component precedence.