Each PrimeVue theme exports its own color palette.
Colors are exported as CSS variables and used with the standard var syntax such as var(--text-color).
<span :style="{color:var(--text-color)}"></span>
These are common variables used throughout the theme.
| Variable | Description |
|---|---|
| --text-color | Font text color. |
| --text-color-secondary | Muted font text color with a secondary level. |
| --primary-color | Primary color of the theme. |
| --primary-color-text | Text color when background is primary color. |
| --font-family | Font family of the theme. |
| --inline-spacing | Spacing between to adjacent items. |
| --border-radius | Common border radius of elements. |
| --focus-ring | Box shadow of a focused element. |
| --mask-bg | Background of an overlay mask. |
A palette consists of 9 colors where each color provides tints/shades from 50 to 900.
<div :style="{backgroundColor:var(--blue-500)}"></div>
In addition, a theme brings a special palette called surfaces that can be used as the base when designing the surface layers and separators.
A theme also exports named surfaces for common use cases.
| Variable | Description |
|---|---|
| --surface-ground | Base ground color. |
| --surface-section | Color of a section on a ground surface. |
| --surface-card | Color of a surface used as a card. |
| --surface-overlay | Color of overlay surfaces. |
| --surface-border | Color of a divider. |
| --surface-hover | Color of an element in hover state. |