Profile My skills Saved My plugins Edit profile Submit a skill

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.

tomevault-io Updated
Web & Frontend

File contents

Component theme

Files

For component <Name>:

  • theme/<Name>.base.theme.ts
  • theme/<Name>.carbon.theme.ts

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

Structure

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 — distributed by TomeVault.

tomevault-io/skills-registry/tree/main/indielayer--ui--ui commit 1df77a610f

Browse category

Frequently asked questions

npx skillmds@latest add tomevault-io/component-theme