Template 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 template 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;
// Prefix for :root CSS variables
$variable-prefix: bs- ; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix;
$link-color: $primary;
$link-hover-color: shift-color($primary, $link-shade-percentage);
$navbar-light-hover-color: var(--#{$prefix}primary);
$navbar-light-active-color: var(--#{$prefix}primary);
$navbar-dark-hover-color: var(--#{$prefix}primary) !important;
$navbar-dark-active-color: var(--#{$prefix}primary) !important;
$dropdown-link-hover-color: var(--#{$prefix}primary) !important;
$dropdown-link-hover-bg: rgba(var(--#{$prefix}primary-rgb), 0.1) !important;
$dropdown-link-active-bg: $dropdown-link-hover-bg;
$dropdown-link-active-color: var(--#{$prefix}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: var(--#{$prefix}primary);
$component-active-bg: var(--#{$prefix}primary);
$pagination-hover-color: var(--#{$prefix}white);
$pagination-hover-bg: var(--#{$prefix}primary);
$pagination-hover-border-color: var(--#{$prefix}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;
$list-group-hover-bg: rgba(var(--#{$prefix}primary-rgb), 0.1);
$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: var(--#{$prefix}link-color);
$btn-link-hover-color: var(--#{$prefix}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($primary, 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 template 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 template, You can change template 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 template CSS like below code:
<!-- Template CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<!-- Template Color CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/color.css" />
Provided color.css within Template 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.