Styling

We recommend you customize your theme styles using the user style files. You can customize the theme’s styles with the following approaches:

Gulp based workflow

<div class="border rounded-1 bg-white px-3 py-2 mb-3"><code>user.scss</code></div>
<p class="mb-0">You can add your own SCSS and override the theme style in the <code>src/scss/user.scss</code> file.</p>
<div class="border-dashed-bottom my-3"></div>
<div class="border rounded-1 bg-white px-3 py-2 mt-4 mb-3"><code>_user-variables.scss</code></div>
<p class="mb-0">To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use <code>src/scss/_user-variables.scss</code>. Any variable from <code>node_modules/bootstrap/scss/variables</code> or <code>src/scss/theme/_variables.scss</code> can be overridden with your own value.</p>
<div class="border-dashed-bottom my-3"></div>
<div class="border rounded-1 bg-white px-3 py-2 mt-4 mb-3"><code>_bootstrap.scss</code></div>
<p class="mb-0">To remove bootstrap components, update <code>src/scss/_bootstrap.scss</code> file.</p>
user.scss

You can add your own SCSS and override the theme style in the src/scss/user.scss file.

_user-variables.scss

To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use src/scss/_user-variables.scss. Any variable from node_modules/bootstrap/scss/variables or src/scss/theme/_variables.scss can be overridden with your own value.

_bootstrap.scss

To remove bootstrap components, update src/scss/_bootstrap.scss file.

If you are not using Gulp based workflow

<div class="border rounded-1 bg-white px-3 py-2 mb-3"><code>user.css</code></div>
<p class="mb-0">You can add your own CSS and override the theme style in the <code>public/assets/css/user.css</code> file.</p>
user.css

You can add your own CSS and override the theme style in the public/assets/css/user.css file.

Changing theme colors

<div class="border rounded-1 bg-white px-3 py-2 mb-3"><code>user.css</code></div>
<p class="mb-0">Changing theme colors<code>public/assets/css/user.css</code> file.</p>
user.css

Changing theme colorspublic/assets/css/user.css file.

Changing theme colors
Gulp based workflow

If you are using gulp base work flow, you can update your theme colors with two different approaches.

1. Using scss variable:
_user-variables.scss

You can bring your necessary variable colors form src/scss/theme/_colors.scss and paste it into src/scss/_user-variables.scss then update variables as your necessity. We recommend to follow this approach.

Light mode is default theme style in phoenix. So, if you update any bootstrap’s SCSS variables, it will effect in Light mode. If you want to update any color, find the corresponding variable for thise color and place theme to _user-variables.scss file. For example:

//*-----------------------------------------------
//|   Theme Colors
//-----------------------------------------------*/

$primary: $blue !default; 
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-1100 !default;        

If you want to update any theme colors for dark mode, update $dark-theme-colorsvariable and to update the grays colors you have to update the $dark-grays variable.

/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
$dark-theme-colors: (
  'primary': $blue-300,
  'secondary': $secondary,
  'success': $green-300,
  'info': $cyan-300,
  'warning': $orange-300,
  'danger': $red-300,
  'light': rgba(map-get($dark-grays, '200'), 0.25),
  'dark': $light
) !default;

$dark-grays: (
  'black': $white,
  '100': $gray-1100,
  '200': $gray-1000,
  '300': $gray-900,
  '400': $gray-800,
  '500': $gray-700,
  '600': $gray-600,
  '700': $gray-500,
  '800': $gray-400,
  '900': $gray-300,
  '1000': $gray-200,
  '1100': $gray-100,
  'white': $black,
) !default;
All Colors

All Phoenix colors are available as Sass variables and Sass map in src/scss/theme/_colors.scss file. To avoid increased file sizes, we don’t create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a theme palette.

You'll find all the colors used in the theme in a sass map name $theme-used-colors in src/scss/theme/_colors.scss file. If you want to use any Phoenix color to generate text/bg utility class, Add the color variable in $theme-used-colors map. If you want to add/change color for dark mode, update the $dark-theme-used-colors map.

$theme-used-colors: (
  'primary-soft': $blue-soft,
  'primary-100': $blue-100,
  'primary-200': $blue-200,
  'primary-300': $blue-300,
  'primary-500': $blue-500,
  'primary-600': $blue-600,
  'warning-soft': $orange-soft,
  'warning-100': $orange-100,
  'warning-200': $orange-200,
  'warning-300': $orange-300,
  'warning-500': $orange-500,
  'info-100': $cyan-100,
  'danger-300': $red-300,
  'danger-100': $red-100,
  'danger-500': $red-500,
  'success-100': $green-100,
  'success-300': $green-300,
  'success-500': $green-500,
  'info-200': $cyan-200,
  'info-300': $cyan-300,
  'info-500': $cyan-500,
  'info-600': $cyan-600

  // Add color variable here to generate bg/text utility class

) !default;
2. Using CSS variable:
_user.scss

To update theme color with this approach, you have to update CSS variable for both modes. If you change any color you have to assign it's corresponding RGB color too. Please note sometimes you may need to update corresponding component's CSS variable. For example:

/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
$success: #00d27a;
$danger: #e63757;
:root, :root.light, :root .light {
  --phoenix-primary:  #{$success};
  --phoenix-primary-rgb: #{to-rgb($success)};
  ...
  ...
  ...
}
.dark{
  --phoenix-primary: #{$danger};
  --phoenix-primary-rgb: #{to-rgb($danger)};
  .card{
    --phoenix-card-bg: #{$success};
  }
}

If you are not using Gulp based workflow

You can add your own CSS and override the theme style in the public/assets/css/user.css file. You can update all theme colors including grays using css variables. If you change any color you have to assign it's corresponding rgb color. Sometimes you may need to update corresponding component's css variable too.

/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
:root, :root.light, :root .light {
  --phoenix-primary:  #00d27a;
  --phoenix-primary-rgb: 0, 210, 122;
  ...
  ...
  ...
  /* grays */
  --phoenix-gray-100:  #f9fafd;
  --phoenix-gray-100-rgb: 249, 250, 253;
}
.dark{
  --phoenix-primary:  #e63757;
  --phoenix-primary-rgb: 230, 55, 87;

  .card{
    --phoenix-card-bg: #00d27a;
  }
}

Thank you for creating with Phoenix|
2022 ©Themewagon

v1.6.0

Theme Customizer

Explore different styles according to your preferences

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