每个 PrimeReact 主题都导出其自己的调色板。
颜色以 CSS 变量的形式导出，并使用标准 var 语法，例如 var(--text-color)。 以下是主题中使用的一般变量列表。
| 变量 | 描述 |
|---|---|
| --text-color | 字体文本颜色。 |
| --text-color-secondary | 辅助级别的静音字体文本颜色。 |
| --primary-color | 主题的主色。 |
| --primary-color-text | 当背景为主色时，文本颜色。 |
| --font-family | 主题的字体系列。 |
| --inline-spacing | 相邻项目之间的间距。 |
| --border-radius | 元素的通用边框半径。 |
| --focus-ring | 聚焦元素的阴影。 |
| --mask-bg | 覆盖蒙版的背景。 |
| --highlight-bg | 突出显示元素的背景。 |
| --highlight-text-color | 突出显示元素的文本颜色。 |
<div style={{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
Highlighted Item
</div>
<div style={{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
Primary Color
</div>
表面调色板用于设计标题、内容、页脚、覆盖层和分隔线等图层。 表面调色板在 0 - 900 之间变化，并且还提供命名的表面。
| 变量 | 描述 |
|---|---|
| --surface-ground | 基本地面颜色。 |
| --surface-section | 地面表面上某部分的背景颜色。 |
| --surface-card | 用作卡片的表面的颜色。 |
| --surface-overlay | 覆盖表面的颜色。 |
| --surface-border | 分隔线的颜色。 |
| --surface-hover | 悬停状态下元素的颜色。 |
调色板由 13 种主要颜色组成，每种颜色都提供从 50 到 900 的色调/阴影。