# Component Theme

> Edit or add component theme classes and styles for base and carbon variants. Use when changing component appearance, Tailwind classes, theme tokens, Divider/Button themes, or files matching *.theme.ts. Use when this capability is needed.

- Skill: `tomevault-io/component-theme` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/component-theme`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/component-theme/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/component-theme

---


# Component theme

## Files

For component `<Name>`:

- `theme/<Name>.base.theme.ts`
- `theme/<Name>.carbon.theme.ts`

Import `*Theme` from `../<Name>.vue`.

## Structure

```ts
const theme: ButtonTheme = {
  classes: {
    wrapper({ props, slots, data }) { return ['...'] },
  },
  styles({ props, colors, css, data }) { /* CSS variables */ },
}
export default theme
```

## Register

Export in both:

- `packages/ui/src/themes/base/components.ts`
- `packages/ui/src/themes/carbon/components.ts`

Key must match the theme name used in `useTheme('<Name>', ...)`.

## Sync variants

When changing layout, states, or tokens in one variant, apply the same logical change to the other unless the carbon design intentionally differs.

Reference: `packages/ui/src/components/button/theme/Button.base.theme.ts`

---
> Source: [indielayer/ui](https://github.com/indielayer/ui) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-19 -->