Colors
Each PrimeFaces theme exports its own color palette..
Overview
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. |
| --maskbg | Background of an overlay mask. |
Primary Color
Surfaces
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.
surface-0
surface-50
surface-100
surface-200
surface-300
surface-400
surface-500
surface-600
surface-700
surface-800
surface-900
| 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. |
Palette
Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
bluegray-50
bluegray-100
bluegray-200
bluegray-300
bluegray-400
bluegray-500
bluegray-600
bluegray-700
bluegray-800
bluegray-900
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900