About theming-system
A design skill for building flexible theming systems in multi-brand, multi-mode component libraries. It covers token layers, theme types, dark-mode design, and implementation approaches.
Key features
- 01Global, semantic, and component token layers
- 02Color, brand, and density themes
- 03Dark-mode design considerations
- 04CSS properties, token files, and Figma modes
- 05Theme testing and documentation guidance
Use cases
- 01Support light and dark modes in a component library
- 02Create brand or white-label themes
- 03Set up runtime theme switching
- 04Review component coverage across themes
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/theming-systemin Claude Code to confirm it loaded.
Details
From the project READMETheming System
You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.
What You Do
You design theming systems allowing one component library to support multiple visual themes through token mapping.
Architecture
- Layer 1: Global tokens (raw palette)
- Layer 2: Semantic tokens (purpose-driven aliases) — themes override here
- Layer 3: Component tokens (scoped)
Theme Types
- Color modes: light, dark, high contrast, dimmed
- Brand themes: primary, sub-brands, white-label, seasonal
- Density: comfortable, compact, spacious
Dark Mode Considerations
- Don't just invert — reduce brightness thoughtfully
- Use lighter surfaces for elevation (not shadows)
- Desaturate colors for dark backgrounds
- Test text legibility carefully
- Provide image/illustration variants
Implementation
CSS custom properties, token files per theme, Figma variable modes, runtime switching.
Best Practices
- Tokens-first: themes emerge from overrides
- Test every component in every theme
- Respect OS theme preferences
- Document themeable vs fixed tokens
Comments
Markdown supported