Agent Skills › pierrecomputer/pierre › theming

theming

GitHub

管理应用运行时主题，支持颜色模式切换、主题状态持久化及 UI 色彩映射。提供 React 和原生 JS 集成方案，涵盖主题集合创建、解析器配置及多控制器架构。

skills/theming/SKILL.md pierrecomputer/pierre

Trigger Scenarios

需要实现深色/浅色模式切换管理应用主题状态或颜色变量

Install

npx skills add pierrecomputer/pierre --skill theming -g -y

More Options

Use without installing

npx skills use pierrecomputer/pierre@theming

指定 Agent (Claude Code)

npx skills add pierrecomputer/pierre --skill theming -a claude-code -g -y

安装 repo 全部 skill

npx skills add pierrecomputer/pierre --all -g -y

预览 repo 内 skill

npx skills add pierrecomputer/pierre --list

SKILL.md

Frontmatter

{
    "name": "theming",
    "description": "Use when an app uses @pierre\/theming to list, resolve, select, switch, persist, or apply themes, including color modes, theme controllers, React state, UI colors, and bundled Pierre or Shiki collections."
}

`@pierre/theming`

Use @pierre/theming to manage runtime themes. The package separates theme metadata, theme resolution, selected state, and UI color mapping.

Install

pnpm add @pierre/theming

Install optional peer dependencies only for the selected entry. The React entry needs react. The themes entry needs @pierre/theme, @shikijs/themes, and shiki.

Select an API reference

Need	Reference
Create a collection, catalog, descriptor, or bundled theme set	Collections API
Register, load, seed, or cache theme objects	Resolver API
Track the color mode and selected light and dark themes	Controller API
Normalize workbench colors or derive colors	Colors API
Read controller state in React	React API

Select a controller recipe

Situation	Recipe
One app or page shares one color mode and one light/dark selection	Use one controller
Independent areas need separate selections or separate controller lifecycles	Use multiple controllers