Storefront Theming

Overview

Architect a theming system using design tokens and CSS custom properties that allows a storefront to be re-skinned for multiple brands without modifying component code. Covers the token taxonomy (color, typography, spacing, radius), runtime theme switching for dark mode, and white-label multi-tenant architecture where each tenant supplies their own token overrides.

When to Use This Skill

• When building a platform that will power multiple branded storefronts from a single codebase
• When implementing dark mode for a storefront
• When a rebrand requires changing colors across thousands of component instances without hunt-and-replace
• When handing off a design system to a team that needs to maintain brand consistency

Core Instructions

Step 1: Determine the merchant's platform and choose the right approach