Design a Theme Switcher – Frontend System Design

We’ll walk through the frontend system design for theming and dark mode in a large web app with a shared design system. You’ll see how design tokens are layered so a theme only changes one tier, why CSS custom properties are the runtime switch, how light, dark, and system preferences resolve into one active theme, and how to put the right theme on the very first frame instead of flashing white at a user who asked for dark.

The interviewer usually phrases it as “design changing the theme of a page”. A toggle that flips a class takes five minutes. The real question is everything around it: 300 components that must not hardcode colors, server rendering that doesn’t know the OS setting, charts drawn on canvas, 20 customer brands, and a WCAG audit at the end.

Problem Statement

Design theming for a large web application and its component library.

Requirements:

• Users can choose light, dark, or follow the system setting
• The page renders in the correct theme on first paint,... premium content.