Theming System
- 954 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
theming-system is a Claude Code design-system skill that defines a three-layer design-token architecture supporting light, dark, high-contrast, and white-label themes for developers maintaining multi-brand component libr
About
theming-system is an owl-listener designer-skills guide for flexible theming where one component library serves multiple visual themes through token mapping. Architecture uses Layer 1 global raw palette tokens, Layer 2 semantic purpose-driven aliases themes override, and Layer 3 component-scoped tokens. Theme types span color modes—light, dark, high contrast, dimmed—and brand themes including primary, sub-brands, white-label, and seasonal variants. Frontend developers reach for theming-system when forking CSS per brand would explode maintenance.
- Three-layer token stack: global palette, semantic aliases (theme override point), and scoped component tokens
- Color modes (light, dark, high contrast, dimmed) plus brand, white-label, seasonal, and density themes
- Dark-mode guidance beyond inversion: elevation via surface brightness, desaturated colors, illustration variants
- Implementation paths: CSS custom properties, per-theme token files, Figma variable modes, runtime switching
- Best-practice rule: test every component in every theme and document themeable vs fixed tokens
Theming System by the numbers
- 954 all-time installs (skills.sh)
- +42 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #428 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill theming-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 954 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you architect multi-brand design tokens?
Define a three-layer token architecture so one component library supports light, dark, high-contrast, and white-label brand themes without forked CSS.
Who is it for?
Design-system engineers supporting multiple brands, dark mode, and high-contrast modes from one component codebase.
Skip if: Single-theme apps with hard-coded CSS variables and no white-label or accessibility mode requirements.
When should I use this skill?
User designs design tokens, dark mode, high-contrast themes, white-label branding, or multi-brand token mapping.
What you get
Three-layer token map with global palette, semantic aliases, component tokens, and theme override rules for multiple color modes and brands.
- Token layer architecture
- Semantic alias map
- Brand and mode override rules
By the numbers
- Defines 3 token layers: global, semantic, and component
- Documents 4 color modes: light, dark, high contrast, and dimmed
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use theming-system for cross-brand token architecture; use component-spec when documenting individual component behavior and props.
FAQ
What are the three token layers in theming-system?
theming-system defines Layer 1 global raw palette tokens, Layer 2 semantic purpose-driven aliases that themes override, and Layer 3 component-scoped tokens bound to specific UI parts.
Which theme modes does theming-system support?
theming-system covers color modes including light, dark, high contrast, and dimmed plus brand themes such as primary, sub-brands, white-label, and seasonal variants.
Is Theming System safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.