Theming with Design Tokens
summary
Centralize hundreds of scattered hex values into CSS variables and a single tokens file so a 5‑step demo login page converts from hard‑coded colors to themeable tokens without changing component code, demonstrated with hot reload showing no visual regressions. Implement a prefers-color-scheme dark theme, add a UI switcher that flips a data-theme attribute via a simple theme provider/useTheme hook, then add a third “glow” theme with gradients; approach works with CSS modules, JS token objects (Webflow -> emotion wrapper), and scales to many themes.
AI-written summary · about
chapters (8)
- 0:00Introduction to theming
- 5:29What are design tokens
- 7:59Starting the demo walkthrough
- 13:12Centralizing design tokens
- 17:07Adding a dark theme
- 20:46User-controlled theme switching
- 24:11Building custom themes
- 26:45Summary and recap
related talks
28mScalable CSS Architecture with Design Tokens
23mDesign Tokens on Asana's Design Systems Team
22mCreating a Design System using Design Tokens With Amplify
36mToken Driven UI Development
38mStyleguide-Driven Development
01h 00mDesign Token Architecture
27mThemeability is the path to dark mode
35mThe Evolution of Design Tokens