Theming system

Skill Infrasity-Labs/dev-gtm-claude-skills/product-designers/theming-system

Open-source Claude skills for GEO, AI discoverability, and developer GTM workflows. Built for developer-focused companies that want their documentation to be found, parsed, and cited by AI systems.

Install

npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill theming-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Design a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.

SKILL.md

1.2 KB, as published. Nobody here has run it

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