AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Theming System

skill-owl-listener-designer-skills-theming-system · by Owl-Listener

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

↗ Repository
— No reviews yet
0 installs
14 views
0.0% view→install

Install

$ agentstack add skill-owl-listener-designer-skills-theming-system

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Theming System? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills