Designing a scalable design token system with CSS-in-JS and React context

Scenario

Context A design system must support multiple themes (light, dark, high-contrast) that can be switched at runtime without page reload. The Problem Theme values are currently hard-coded in component files, making it impossible to switch themes globally or support user preferences. Constraints Define design tokens (colors, spacing, typography) as structured JavaScript objects. Distribute the active theme through React context. Support runtime theme switching and persist the preference to localStorage. Integrate with a CSS-in-JS library. Expected Deliverable A React theming architecture using context-distributed design tokens, runtime theme switching, persistence, and CSS-in-JS integration.

Targeted skills