theming

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 ↓
main · 1831817Scanned 2026-09-15

Contributors

GitHub-linked commit authors for this SKILL.md at the saved revision. Co-authors and history before file renames are not included.

File history ↗
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.