Theming System
If you're building a design system that needs to serve multiple brands or support light and dark modes without duplicating components, this gives you the token architecture to pull it off. It's built around three layers: global tokens for your raw palette, semantic tokens where theme overrides happen, and component tokens for scoped values. The guidance on dark mode is practical, like using lighter surfaces for elevation instead of shadows and desaturating colors against dark backgrounds. It covers CSS custom properties, Figma variable modes, and runtime switching. The key insight is treating themes as overrides at the semantic layer rather than forking your entire component library.
- skills.sh installs
- 2.4K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill theming-system --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Categories
- Code Review & Quality, Marketing & SEO, Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Competitive Analysis2.3K
- Feedback Patterns2.3K
- Design Brief2.3K
- Prototype Strategy2.3K
- User Persona2.3K
- Jobs To Be Done2.3K
- Gesture Patterns2.3K
- Handoff Spec2.3K
- Experience Map2.3K
- Naming Convention2.3K
- Empathy Map2.3K
- Documentation Template2.3K
- Pattern Library2.3K
- Affinity Diagram2.3K
- Interview Script2.3K
- Card Sort Analysis2.3K
- Design Rationale2.3K
- Accessibility Test Plan2.3K
- A B Test Design2.3K
- Metrics Definition2.3K
- Diary Study Plan2.3K
- Stakeholder Alignment2.3K
- Test Scenario2.3K
- Design Review Process2.3K
Recommended
More Code Review & Quality
milvus-meme-stickerzc277584121/marketing-skillsCreate tiny no-text Milvus-style sticker memes for technical marketing, WeChat-style article moments, community posts, and developer-group reactions. Use when t2.3Kskills.sh installs
audit-xlsanthropics/financial-servicesAudit a spreadsheet for formula accuracy, errors, and common mistakes. Scopes to a selected range, a single sheet, or the entire model (including financial-mode2.3Kskills.sh installs
tam-sam-som-calculatordeanpeters/product-manager-skillsCalculate TAM, SAM, and SOM with explicit assumptions, methods, and caveats. Use when sizing a market for a product idea, business case, or executive review.2.3Kskills.sh installs
frontend-designjwynia/agent-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools fo2.3Kskills.sh installs
acquire-codebase-knowledgegithub/awesome-copilotUse this skill when the user explicitly asks to map, document, or onboard into an existing codebase. Trigger for prompts like "map this codebase", "document thi2.3Kskills.sh installs
difityoshiko-pg/difitAsk the user for a code review through difit after code changes.2.3Kskills.sh installs