Theme Color Scheme

Changing theme color scheme


We understand your need of changing theme color scheme at ease so we've got you covered. Whether you want to work with SCSS or CSS, both methods are described below. Please note we highly recommend to go with SCSS method.

#1 Using SCSS

After completing gulp and sass setup, please open _user-variables.scss file located at template/assets/scss. You will find commented code in the same so please just uncomment it and save the file while gulp is running. If you are new to gulp, please go through Gulp section here. Follow the steps and you will be able to build your site at very ease.


$primary:     red;

// theme colors map
$theme-colors: ();
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// theme soft colors map
$theme-soft-colors: (
  "white-soft":      rgba($white, $soft-alpha + 0.2),
  "primary-soft":    rgba($primary, $soft-alpha),
  "secondary-soft":  rgba($secondary, $soft-alpha),
  "success-soft":    rgba($success, $soft-alpha),
  "info-soft":       rgba($info, $soft-alpha),
  "warning-soft":    rgba($warning, $soft-alpha + 0.05),
  "danger-soft":     rgba($danger, $soft-alpha),
  "light-soft":      rgba($light, $soft-alpha),
  "dark-soft":       rgba($dark, $soft-alpha)
);


$link-color:                        $primary;
$link-hover-color:                  shift-color($link-color, $link-shade-percentage);

$navbar-light-hover-color:          $primary;
$navbar-light-active-color:         $primary;
$navbar-dark-hover-color:           $primary !important;
$navbar-dark-active-color:          $primary !important;

$dropdown-link-hover-color:         $primary !important;
$dropdown-link-active-color:        $primary;
$dropdown-dark-link-hover-bg:       $dropdown-link-hover-bg;
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;

$progress-bar-bg:                   $primary;

$component-active-bg:               $primary;

$pagination-hover-color:            $white;
$pagination-hover-bg:               $primary;
$pagination-hover-border-color:     $primary;
$pagination-active-color:           $component-active-color;
$pagination-active-bg:              $component-active-bg;
$pagination-active-border-color:    $pagination-active-bg;

$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

$input-focus-border-color:          $primary;
$form-check-input-focus-border:     $input-focus-border-color;
$form-switch-focus-color:           $input-focus-border-color;
$form-select-focus-border-color:    $input-focus-border-color;

$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;

$form-switch-focus-color:     $input-focus-border-color;
$form-switch-focus-bg-image:  url("data:image/svg+xml,");

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;

$form-range-thumb-bg:         $component-active-bg;
$form-range-thumb-active-bg:  tint-color($component-active-bg, 70%);

// Accordion
$accordion-button-active-bg:              tint-color($component-active-bg, 90%);
$accordion-button-active-color:           shade-color($primary, 10%);
$accordion-icon-color:                    $accordion-color;
$accordion-icon-active-color:             $accordion-button-active-color;
$accordion-button-active-icon:  url("data:image/svg+xml,");

By using this method, You have to change color code only at one place and all your website color shades will be set properly.

Gulp must be running in your system to compile this, so after saving _user-variables.scss file, Gulp will compile the same and you will see the new color scheme.

#2 Using CSS

If you don't want to take advantage of future updates of theme, You can change theme color by replacing your new HEX color code in style.css located in template/assets/css directory. Please note this is not recommended option.