theming Skill

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.

Install
npx skills add 'https://github.com/pierrecomputer/pierre/tree/main/skills/theming'
Download bundle ↓
View on GitHub

@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

NeedReference
Create a collection, catalog, descriptor, or bundled theme setCollections API
Register, load, seed, or cache theme objectsResolver API
Track the color mode and selected light and dark themesController API
Normalize workbench colors or derive colorsColors API
Read controller state in ReactReact API

Select a controller recipe

SituationRecipe
One app or page shares one color mode and one light/dark selectionUse one controller
Independent areas need separate selections or separate controller lifecyclesUse multiple controllers

Use one controller by default. Use multiple controllers only when the theme state must differ between areas.

Select a framework recipe

HostRecipe
Vanilla JavaScript or another frameworkUse vanilla JavaScript
ReactUse React
Discovery context

Discovered by repository scan. No exact path reference found in the snapshot’s root AGENTS.md.