Building a theming system with React
summary
Reveals a concrete theming engine that stores themes as plain JS maps, exposes them via a React context provider and a connect HOC, and compiles theme objects to CSS using Aphrodite today with plans for TypeStyle. Supports both component-based and atomic theme categories, per-component or per-modal runtime theme swapping, server-delivered per-user theme JSON, aggressive caching, and a pluggable postprocessor pipeline. Runs in a large app (~20k lines of JS, ~300–400 components) with no observed rendering slowdown.
AI-written summary · about
chapters (10)
- 0:00Introduction and motivation
- 1:41Modern web and component architecture
- 8:22Styling approaches in React
- 12:17Requirements for theming system
- 15:07Theme manager design
- 20:41Connecting components to themes
- 27:13Performance and caching
- 31:59Pluggable post-processors
- 33:05Live demo and example
- 35:54Q&A and performance impact
related talks
30mDynamic Styling Systems with React
24mIndividual paint for your React components
05mStyling in React
19mHarnessing React to Build Consistently Designed Applications
22mStyling Components for React UI Kits
29mStyling React For Reuse
51mReact as a decoupled theme engine for Drupal
37mStyled Components, SSR, and Theming