使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/owl-listener/designer-skills --skill theming-system开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Theming 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
