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.17.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

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
RTL

Change text direction

Support Chat

Toggle support chat

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