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.
Using SCSS
After completing vite and sass setup, please open _user-variables.scss file located at src/assets/scss. You will find commented code in the same so please just uncomment it and save the file while vite server is running. If you are new to vite, please go through Vite section here. Follow the steps and you will be able to build your site at very ease.
$primary: red; // To change dark mode primary color go to user.scss file and follow the instruction
// 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,
"mode": $mode
),
$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: 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>");
By using this method, You have to change color codes only at one place and all your website color shades will be set properly.
Vite must be running in your system to compile this, so after saving _user-variables.scss file, Vite will compile the same and you will see the new color scheme.
Note: Sometimes brand primary colors are not readable in dark mode, so we have provided option to set different primary colors for dark mode. As we provide in our demo site. To change dark mode primary color go to _user.scss file and follow the instruction.