skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

theming-system

Design scalable theming architectures using layered CSS variable tokens.

3|Updated Mar 28, 2026
Search Tags:#theming#tokens#design-system#dark-mode#css-variables#theme-switching#brand-variants
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill theming-system-hulusi-tunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming-system
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/design-systems--theming-system
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill theming-system-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing scalable design systems that support multiple brands and color modes without duplicating tokens or components.

Core Features & Use Cases

  • Layered tokens: Global > Semantic > Component tokens for flexible overrides.
  • Theme types: Color modes (light, dark, high contrast, dimmed), Brand themes, and density variants.
  • Implementation guidelines: CSS custom properties, per-theme token files, Figma variable integration, and runtime switching.
  • Best practices: Tokens-first approach, test across themes, respect OS preferences, and document tokenability.

Quick Start

Start by defining your global tokens, then create semantic tokens per theme and build component tokens for each library to enable runtime theme switching.

Frequently Asked Questions about theming-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure CSS variables for a multi-brand design system?▼

Implement multi-brand theming by defining global base tokens, creating semantic tokens per brand theme, and mapping component tokens. This prevents token duplication while enabling flexible brand variant overrides across your design system.

What is the best way to implement runtime dark mode switching?▼

Implement runtime dark mode switching using CSS custom properties mapped to semantic tokens. This enables dynamic theme swapping across light, dark, dimmed, and high-contrast modes without reloading the page.

How do layered design tokens work for high-contrast themes?▼

Layered design tokens cascade from global base tokens to semantic and component levels. For high-contrast themes, you override semantic tokens to ensure accessibility without altering component architecture.

Can I integrate Figma variables with my design system's CSS variables?▼

Yes, you can integrate Figma variables with your design system's CSS variables. The architecture supports Figma variable integration to synchronize global, semantic, and component tokens between design and code.

Does this theming architecture support density variants alongside color modes?▼

Yes, the theming architecture supports density variants alongside color modes and brand themes. It handles light, dark, dimmed, and high-contrast modes while applying density adjustments through the same layered token approach.

Related Skills

Explore More Design & Creative Skills→
soeiroosoeiroo

theming-system

Develop scalable theming architectures with layered tokens for multi-brand applications.

Community
Advanced
gil00pitagil00pita

css-variables

Define CSS custom properties in :root for centralized theming and runtime customization.

Community
Advanced
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
oborchersoborchers
28

design-tokens

Manage design token architecture with a three-tier model and CSS custom properties.

Community
Intermediate