Theming Recipes
Complete theme system recipes using CSS custom properties. Each recipe is a production-ready pattern you can adapt to your own projects. These recipes implement the layered architecture described in Three-Tier Color Strategy — palette tokens, semantic theme tokens, and component-scoped overrides — using the cascade and var() fallbacks.
Light/Dark Theme with Custom Properties
Define your entire color palette as custom properties, then swap them all with a single class toggle. No JavaScript logic for individual colors — the cascade handles everything.
Brand Theme Override
Start with a default theme, then override it by wrapping components in a brand-color container. The children automatically pick up the new values through the cascade.
Component API Pattern
Expose a set of custom properties as a component's public styling API. Consumers override just the properties they need — the component handles the rest internally.
Surface/Content Layer Pattern
Define three logical layers — surface (backgrounds), content (text), and accent (interactive highlights). Components reference layers instead of raw colors, making full-page theme swaps trivial. This is the Three-Tier Color Strategy in action — the layers below correspond to Tier 2 (semantic theme tokens).