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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize