We recommend you customize your theme styles using the user style files. You can customize the theme’s styles with the following approaches:

Gulp based workflow

user.scss

You can add your own SCSS and override the theme style in the src/scss/user.scss file

_user-variables.scss

To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use scss/_user-variables.scss. Any variable from scss/bootstrap/_variables.scss or scss/custom/_variables.scss can be overridden with your own value.

If you are not using Gulp based workflow

user.css

You can add your own SCSS and override the theme style in the public/assets/css/user.css file

Changing theme colors

Using SCSS variable:

You can bring your necessary variable colors form src/scss/theme/_colors.scss and paste it into src/scss/_user-variables.scss then update variables as your necessity. We recommend to follow this approach.

If you want to update any color, find the corresponding variable for these color and place theme to _user-variables.scss file.

See bootstrap documentation for more details

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $teal !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-1100 !default;

$body-color: $gray-700 !default;
$body-bg: $white !default;

$body-secondary-color: $primary !default;
$body-secondary-bg: $gray-300 !default;

$body-tertiary-color: $gray-600 !default;
$body-tertiary-bg: $gray-100 !default;

$body-quaternary-bg: $white !default;

$body-emphasis-color: $black !default;
$body-emphasis-bg: $white !default;

Using CSS variable:

To update theme color with this approach, you have to update CSS variable. If you change any color you have to assign it's corresponding RGB color too. Please note sometimes you may need to update corresponding component's CSS variable.

See bootstrap documentation for more details

:root,
[data-bs-theme="light"] {
  --baikal-primary:  #36b3a8;
  --baikal-primary-rgb: 54, 179, 168;
  --baikal-body-color: #6a6a6a;
  --baikal-body-color-rgb: 106, 106, 106;
  ...
  ...
  ...

  .btn-primary {
    --baikal-btn-color: #fff;
  }
}