Pure Admin's color system uses CSS variables for full theme customization
Semantic Colors
Core color variants used across all components
Primary
primary
Secondary
secondary
Success
success
Warning
warning
Danger
danger
Info
info
Theme Colors (1-9)
Nine theme color slots for custom branding - automatically adjust text contrast
Color 1
--base-color-#1
Color 2
--base-color-#2
Color 3
--base-color-#3
Color 4
--base-color-#4
Color 5
--base-color-#5
Color 6
--base-color-#6
Color 7
--base-color-#7
Color 8
--base-color-#8
Color 9
--base-color-#9
Text Color Utilities
Apply text colors using utility classes
Semantic Text Colors
- text-primary - Primary accent color
- text-secondary - Muted/secondary text
- text-success - Success green
- text-warning - Warning yellow/orange
- text-danger - Danger/error red
- text-info - Informational blue
- text-muted - Muted/subtle text
CSS Variables
| Variable | Description |
|---|---|
--accent-color
| Primary accent |
--base-text-color
| Default text |
--base-text-color-2
| Secondary text |
--base-bg-color
| Page background |
--base-success-color
| Success state |
--base-warning-color
| Warning state |
--base-danger-color
| Danger state |
--base-info-color
| Info state |
--pa-bg-light
| Subtle background |
Background Utilities
Apply background colors
bg-primary,bg-secondary,bg-success,bg-warning,bg-danger,bg-infobg-light- Subtle tinted backgroundbg-transparent- No background