CSS custom properties that control the entire Pure Admin appearance. Override these in your theme to customize everything.
Core Colors
| Variable | Description |
|---|---|
--accent-color
| Primary accent color used for interactive elements, links, active states |
--accent-color-hover
| Accent hover state |
--accent-color-active
| Accent active/pressed state |
--base-text-color
| Default body text color |
--base-text-color-2
| Secondary/muted text color |
--base-bg-color
| Page background |
--base-bg-color-2
| Alternate background (cards, panels) |
--base-border-color
| Default border color |
Semantic State Colors
| Variable | Description |
|---|---|
--base-success-color
| Success/positive actions and states |
--base-warning-color
| Warning/caution states |
--base-danger-color
| Danger/error/destructive states |
--base-info-color
| Informational states |
--base-primary-color
| Primary brand color |
--base-secondary-color
| Secondary/neutral color |
Theme Color Slots (1-9)
Nine customizable color slots for branding. Each slot auto-generates contrasting text.
| Variable | Description |
|---|---|
--base-color-1
| Theme color 1 (used by pa-card--color-1, etc.) |
--base-color-2
| Theme color 2 |
--base-color-3
| Theme color 3 |
--base-color-4
| Theme color 4 |
--base-color-5
| Theme color 5 |
--base-color-6
| Theme color 6 |
--base-color-7
| Theme color 7 |
--base-color-8
| Theme color 8 |
--base-color-9
| Theme color 9 |
Layout & Structure
| Variable | Description |
|---|---|
--pc-header-bg
| Navbar background |
--pc-header-text
| Navbar text color |
--pc-sidebar-bg
| Sidebar background |
--pc-sidebar-text
| Sidebar text color |
--pc-sidebar-width
| Sidebar width (default: 26rem) |
--pc-sidebar-collapsed-width
| Sidebar icon-only width |
--pc-footer-bg
| Footer background |
--pc-footer-text
| Footer text color |
--pc-bg-light
| Subtle tinted background for panels |
Typography
| Variable | Description |
|---|---|
--base-font-family
| Default font stack |
--base-font-size
| Root font size (default: 10px for rem scaling) |
--base-line-height
| Default line height |
--heading-font-family
| Heading font (falls back to base) |
Spacing Scale
| Variable | Default | Description |
|---|---|---|
--spacing-xs
| 0.4rem | Extra small |
--spacing-sm
| 0.8rem | Small |
--spacing-base
| 1.6rem | Base (default) |
--spacing-lg
| 2.4rem | Large |
--spacing-xl
| 3.2rem | Extra large |
--spacing-2xl
| 4.8rem | 2X large |
Component Variables
| Variable | Description |
|---|---|
--pc-card-bg
| Card background |
--pc-card-border
| Card border color |
--pc-card-shadow
| Card box shadow |
--pc-card-radius
| Card border radius |
--pc-input-bg
| Input background |
--pc-input-border
| Input border color |
--pc-input-focus-border
| Input focus border color |
--pc-table-border
| Table border color |
--pc-table-stripe-bg
| Table striped row background |
--pc-table-hover-bg
| Table hover row background |
--pc-modal-bg
| Modal backdrop color |
--pc-tooltip-bg
| Tooltip background |
--pc-tooltip-text
| Tooltip text color |
Overriding Variables
Create a custom theme by overriding these variables in your CSS. Use:root for global overrides or scope to .pc-mode-light / .pc-mode-dark for mode-specific values.