Agent Skills › pierrecomputer/pierre › theming

theming

GitHub

管理运行时主题，支持颜色模式切换、主题解析、状态持久化及UI色彩映射。提供React和原生JS集成方案，适用于多控制器场景下的主题配置与应用。

skills/theming/SKILL.md pierrecomputer/pierre

触发场景

需要实现应用的主题切换功能需要管理亮色/暗色模式状态需要配置或解析主题集合

安装

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

更多选项

不安装直接使用

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