Learning on Web Dev Open is free for all.

Design Craft > Systems, tokens and handoffTheming without a second stylesheet
Phase 02Systems, tokens and handoff121 of 434

Theming without a second stylesheet

One set of components, several sets of values, and a theme switch that changes nothing but custom properties.

Build28 minAI off

Build this in your own editor

This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.

You should now be able to

  • Switch themes by reassigning tokens at one scope
  • Support a system preference and an explicit override
  • Avoid the flash of the wrong theme on first paint
Ask the community

Loading…