Each PrimeNG theme exports its own color palette.
Colors are exported as CSS variables and used with the standard var syntax such as var(--text-color). Following is the list of general variables used in a theme.
| Variable | Description |
|---|---|
| --text-color | Font text color. |
| --text-secondary-color | 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. |
| --highlight-bg | Background of a highlighted element. |
| --highlight-text-color | Text color of a highlighted element. |
<div [ngStyle]="{backgroundColor:'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem'}">Highlighted Item</div>
<div [ngStyle]="{backgroundColor:'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem'}">Primary Color</div>
Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.
| Variable | Description |
|---|---|
| --surface-ground | Base ground color. |
| --surface-section | Background 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. |
Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.