Theme Color Scheme
Creating a site color scheme that aligns with your company's identity is crucial for any business. We have made this process almost effortless. Whether you prefer working with SCSS or CSS, both methods are detailed below. We highly recommend using the SCSS method for greater flexibility and ease of maintenance.
#1 Using SCSS
After completing the Gulp and Sass setup, open the _user-variables.scss file located in template/assets/scss. You will find commented code in this file. Uncomment the code, save the file while Gulp is running, and your changes will be applied automatically. If you are new to Gulp, please refer to the Gulp section for more details.
$primary: #1d9bbe; // This color will apply to light mode and dark mode. To add different types of dark mode primary color, go to _user.scss file and follow the instruction.
$secondary: #eff2f6;
// theme colors map
$theme-colors: ();
$theme-colors: map-merge(
(
"primary": $primary,
"white": $white,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"pink": $pink,
"purple": $purple,
"light": $light,
"dark": $dark
),
$theme-colors
);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
//Theme gradient Colors - Starting and ending point
$grad-primary-start: #077796;
$grad-primary-end: #0e3166;
$grad-secondary-start: rgba(10, 192, 237, 0.15);
$grad-secondary-center: rgba(0, 51, 255, 0.15);
$grad-secondary-end: rgba(66, 145, 248, 0.15) ;
$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);
// Dark mode variable
$link-color-dark: $primary;
$link-hover-color-dark: 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: rgba(var(--#{$prefix}primary-rgb), 0.7);
$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>");
$accordion-button-active-icon-dark: 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 only need to change color codes in one place, and all your website's color shades will be updated accordingly.
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 prefer to change the theme's default color scheme using CSS, you can choose one of the following methods. We recommend Method 2– Using color.css.
Method 1: Using style.css
If you do not wish to take advantage of future theme updates, you can change the theme color by replacing the HEX color codes in the style.css file located in template/assets/css. Please note that this method is not recommended as it makes updating the theme more difficult.
Method 2: Using color.css
To change the theme color scheme with minimal disruption to future updates, use the color.css file located in template/assets/css. This file serves as an example of how to implement a new color scheme.
<!-- 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" />
The color.css file includes detailed instructions on how to change the colors. By making a few adjustments to the variables, you can easily apply a new color scheme to your site.