360 Secure SkillHub
360 安全技能中心

theming-system

该 Skill 面向多品牌、多模式设计系统，提供全局、语义、组件三层令牌架构，并覆盖明暗、高对比度、品牌与密度主题、深色模式要点及 CSS 自定义属性等实施方向；不含具体令牌文件或代码。

Owl-Listener
热度 25.51
最近更新 2026-10-19 04:18:30
分类：创作依赖：纯提示词应用场景：UI 原型 / 品牌素材

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add owl-listener/designer-skills/theming-system
Metadata
name
theming-system
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).

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