## Color

Phoenix is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.

##### Colors

Phoenix comes with lots of colors and variants. We added `quaternary` and `body-highlight` colors besides `secondary` and `tertiary` colors and also theme colors shades.

Name | Swatch | CSS variables | Class
--- | --- | --- | ---
Body |  | `--phoenix-body-color` `--phoenix-body-color-rgb` | `text-body`
| `--phoenix-body-bg` `--phoenix-body-bg-rgb` | `bg-body`
secondary |  | `--phoenix-secondary-color` `--phoenix-secondary-color-rgb` | `text-body-secondary`
| `--phoenix-secondary-bg` `--phoenix-secondary-bg-rgb` | `bg-body-secondary`
tertiary |  | `--phoenix-tertiary-color` `--phoenix-tertiary-color-rgb` | `text-body-tertiary`
| `--phoenix-tertiary-bg` `--phoenix-tertiary-bg-rgb` | `bg-body-tertiary`
quaternary |  | `--phoenix-quaternary-color` `--phoenix-quaternary-color-rgb` | `text-body-quaternary`
| `--phoenix-quaternary-bg` `--phoenix-quaternary-bg-rgb` | `bg-body-quaternary`
body-highlight |  | `--phoenix-body-highlight-color` `--phoenix-body-highlight-color-rgb` | `text-body-highlight`
| `--phoenix-body-highlight-bg` `--phoenix-body-highlight-bg-rgb` | `bg-body-highlight`
emphasis |  | `--phoenix-emphasis-color` `--phoenix-emphasis-color-rgb` | `text-body-emphasis`
| `--phoenix-emphasis-bg` `--phoenix-emphasis-bg-rgb` | `bg-body-emphasis`
primary |  | `--phoenix-primary` `--phoenix-primary-rgb` | `text-primary` `bg-primary`
| `--phoenix-primary-bg-subtle` | `text-primary-subtle` `bg-primary-subtle`
| `--phoenix-primary-lighter` `--phoenix-primary-lighter-rgb` | `text-primary-lighter` `bg-primary-lighter`
| `--phoenix-primary-light` `--phoenix-primary-light-rgb` | `text-primary-light` `bg-primary-light`
| `--phoenix-primary-dark` `--phoenix-primary-dark-rgb` | `text-primary-dark` `bg-primary-dark`
| `--phoenix-primary-darker` `--phoenix-primary-darker-rgb` | `text-primary-darker` `bg-primary-darker`
| `--phoenix-primary-text-emphasis` | `text-primary-emphasis` `bg-primary-emphasis`
secondary |  | `--phoenix-secondary` `--phoenix-secondary-rgb` | `text-secondary` `bg-secondary`
| `--phoenix-secondary-bg-subtle` | `text-secondary-subtle` `bg-secondary-subtle`
| `--phoenix-secondary-lighter` `--phoenix-secondary-lighter-rgb` | `text-secondary-lighter` `bg-secondary-lighter`
| `--phoenix-secondary-light` `--phoenix-secondary-light-rgb` | `text-secondary-light` `bg-secondary-light`
| `--phoenix-secondary-dark` `--phoenix-secondary-dark-rgb` | `text-secondary-dark` `bg-secondary-dark`
| `--phoenix-secondary-darker` `--phoenix-secondary-darker-rgb` | `text-secondary-darker` `bg-secondary-darker`
| `--phoenix-secondary-text-emphasis` | `text-secondary-emphasis` `bg-secondary-emphasis`
success |  | `--phoenix-success` `--phoenix-success-rgb` | `text-success` `bg-success`
| `--phoenix-success-bg-subtle` | `text-success-subtle` `bg-success-subtle`
| `--phoenix-success-lighter` `--phoenix-success-lighter-rgb` | `text-success-lighter` `bg-success-lighter`
| `--phoenix-success-light` `--phoenix-success-light-rgb` | `text-success-light` `bg-success-light`
| `--phoenix-success-dark` `--phoenix-success-dark-rgb` | `text-success-dark` `bg-success-dark`
| `--phoenix-success-darker` `--phoenix-success-darker-rgb` | `text-success-darker` `bg-success-darker`
| `--phoenix-success-text-emphasis` | `text-success-emphasis` `bg-success-emphasis`
danger |  | `--phoenix-danger` `--phoenix-danger-rgb` | `text-danger` `bg-danger`
| `--phoenix-danger-bg-subtle` | `text-danger-subtle` `bg-danger-subtle`
| `--phoenix-danger-lighter` `--phoenix-danger-lighter-rgb` | `text-danger-lighter` `bg-danger-lighter`
| `--phoenix-danger-light` `--phoenix-danger-light-rgb` | `text-danger-light` `bg-danger-light`
| `--phoenix-danger-dark` `--phoenix-danger-dark-rgb` | `text-danger-dark` `bg-danger-dark`
| `--phoenix-danger-darker` `--phoenix-danger-darker-rgb` | `text-danger-darker` `bg-danger-darker`
| `--phoenix-danger-text-emphasis` | `text-danger-emphasis` `bg-danger-emphasis`
warning |  | `--phoenix-warning` `--phoenix-warning-rgb` | `text-warning` `bg-warning`
| `--phoenix-warning-bg-subtle` | `text-warning-subtle` `bg-warning-subtle`
| `--phoenix-warning-lighter` `--phoenix-warning-lighter-rgb` | `text-warning-lighter` `bg-warning-lighter`
| `--phoenix-warning-light` `--phoenix-warning-light-rgb` | `text-warning-light` `bg-warning-light`
| `--phoenix-warning-dark` `--phoenix-warning-dark-rgb` | `text-warning-dark` `bg-warning-dark`
| `--phoenix-warning-darker` `--phoenix-warning-darker-rgb` | `text-warning-darker` `bg-warning-darker`
| `--phoenix-warning-text-emphasis` | `text-warning-emphasis` `bg-warning-emphasis`
info |  | `--phoenix-info` `--phoenix-info-rgb` | `text-info` `bg-info`
| `--phoenix-info-bg-subtle` | `text-info-subtle` `bg-info-subtle`
| `--phoenix-info-lighter` `--phoenix-info-lighter-rgb` | `text-info-lighter` `bg-info-lighter`
| `--phoenix-info-light` `--phoenix-info-light-rgb` | `text-info-light` `bg-info-light`
| `--phoenix-info-dark` `--phoenix-info-dark-rgb` | `text-info-dark` `bg-info-dark`
| `--phoenix-info-darker` `--phoenix-info-darker-rgb` | `text-info-darker` `bg-info-darker`
| `--phoenix-info-text-emphasis` | `text-info-emphasis` `bg-info-emphasis`

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize