# Theming System

Design theming architecture, brand variants, dark mode, and high-contrast, mapped...

- Repository: https://github.com/Owl-Listener/designer-skills (3196 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Owl-Listener/designer-skills --skill theming-system -g -a claude-code -y`
Codex: `npx skills add Owl-Listener/designer-skills --skill theming-system -g -a codex -y`
Cursor: `npx skills add Owl-Listener/designer-skills --skill theming-system -g -a cursor -y`
Gemini CLI: `npx skills add Owl-Listener/designer-skills --skill theming-system -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Owl-Listener/designer-skills`

## Description

Design theming architecture, brand variants, dark mode, and high-contrast, mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft use `dark-mode-design` (ui-design).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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