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
Default
--text-color-default text-default
--background-color-default bg-default
Soft
--text-color-soft text-soft
--background-color-soft bg-soft
Subtle
--text-color-subtle text-subtle
--background-color-subtle bg-subtle
Muted
--text-color-muted text-muted
--background-color-muted bg-muted
Emphasis
--text-color-emphasis text-emphasis
--background-color-emphasis bg-emphasis
Highlight
--text-color-highlight text-highlight
--background-color-highlight bg-highlight
primary
--color-primary-subtle text-primary-subtle
bg-primary-subtle
--color-primary-lighter text-primary-lighter
bg-primary-lighter
--color-primary-light text-primary-light
bg-primary-light
--color-primary text-primary
bg-primary
--color-primary-dark text-primary-dark
bg-primary-dark
--color-primary-darker text-primary-darker
bg-primary-darker
secondary
--color-secondary-subtle text-secondary-subtle
bg-secondary-subtle
--color-secondary-lighter text-secondary-lighter
bg-secondary-lighter
--color-secondary-light text-secondary-light
bg-secondary-light
--color-secondary text-secondary
bg-secondary
--color-secondary-dark text-secondary-dark
bg-secondary-dark
--color-secondary-darker text-secondary-darker
bg-secondary-darker
success
--color-success-subtle text-success-subtle
bg-success-subtle
--color-success-lighter text-success-lighter
bg-success-lighter
--color-success-light text-success-light
bg-success-light
--color-success text-success
bg-success
--color-success-dark text-success-dark
bg-success-dark
--color-success-darker text-success-darker
bg-success-darker
danger
--color-danger-subtle text-danger-subtle
bg-danger-subtle
--color-danger-lighter text-danger-lighter
bg-danger-lighter
--color-danger-light text-danger-light
bg-danger-light
--color-danger text-danger
bg-danger
--color-danger-dark text-danger-dark
bg-danger-dark
--color-danger-darker text-danger-darker
bg-danger-darker
warning
--color-warning-subtle text-warning-subtle
bg-warning-subtle
--color-warning-lighter text-warning-lighter
bg-warning-lighter
--color-warning-light text-warning-light
bg-warning-light
--color-warning text-warning
bg-warning
--color-warning-dark text-warning-dark
bg-warning-dark
--color-warning-darker text-warning-darker
bg-warning-darker
info
--color-info-subtle text-info-subtle
bg-info-subtle
--color-info-lighter text-info-lighter
bg-info-lighter
--color-info-light text-info-light
bg-info-light
--color-info text-info
bg-info
--color-info-dark text-info-dark
bg-info-dark
--color-info-darker text-info-darker
bg-info-darker

Thank you for creating with Phoenix Tailwind2026 ©ThemeWagon

v1.1.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