Theme Color Scheme

Making site color scheme according to your company identity is essential to all businesses. So here you will see how we have made this very important need of yours almost effortless.

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,
    "white":      $white,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "orange":     $orange,
    "purple":     $purple,
    "blue":       $blue
  ),
  $theme-colors
);

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

$soft-alpha:          .1;

$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-hover-bg:            rgba($primary, .1) !important;
$dropdown-link-active-bg:           $dropdown-link-hover-bg;
$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");

$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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

By using this method, You have to change color codes 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 want to change theme default color scheme just using CSS, You can choose one of the 2 methods (We recommend Method 2 – Using color.css)

Method 1: Using style.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.

Method 2: Using color.css

Please look out for color.css file in template/assets/css directory for new sample color as an example. You should link that CSS at the end in head section after theme CSS like below code:


<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />

<!-- Theme Color CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/color.css" />

Provided color.css within theme is for new color scheme as an example. Just make very few changes in variables of this file and you are good to go. A detailed explanation of how to change color can be found in color.css file.