How to add new colors to theme with all variants and features

[Thiti517]

I am trying to add new colors to theme.

I followed the step in the documentation.

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

but i still miss some variants and features for my custom colors that are present for primary, secondary, etc...

for example:

.bg-custom            /* exist */
.text-custom          /* exist */
.text-bb-custom       /* exist */
.bg-custom-subtle     /* do not exist */
.text-custom-emphasis /* do not exist */

How to make so that my custom colors have all the same variants and features as default color (primary, secondary, etc...) ?

[anvme]

Hello!

I’m using this approach.
You might want to check out the nearest Bootstrap 6 topic in the discussion above — there could already be something helpful there, especially regarding colors.

I haven’t checked this specific question in v6 yet, but in v5 I used the code below to create a custom color theme for specific projects

// ==========================================================================
//  Bootstrap 5.3 Sass build with theme variable overrides
//  Primary: #0d6efd (Blue)
// ==========================================================================

@import "bootstrap/scss/functions";

// ---------------------------------------------------------------------------
// Theme colors
// ---------------------------------------------------------------------------
$primary:       #0d6efd;
$success:       #198754;
$info:          #0dcaf0;
$warning:       #ffc107;
$danger:        #dc3545;

$component-active-color: #fff;

// ---------------------------------------------------------------------------
// Light mode body / layout (overrides Bootstrap defaults)
// ---------------------------------------------------------------------------
$body-bg:                         #fff;
$body-color:                      #212529;
$body-secondary-color:            rgba(#212529, 0.75);
$body-secondary-bg:               #e9ecef;
$body-tertiary-color:             rgba(#212529, 0.50);
$body-tertiary-bg:                #f8f9fa;
$border-color:                    #dee2e6;
$border-color-translucent:        rgba(0, 0, 0, 0.175);
$link-color:                      #0d6efd;
$link-hover-color:                #0a58ca;
$code-color:                      #d63384;

// ---------------------------------------------------------------------------
// Dark mode body / layout
// ---------------------------------------------------------------------------
$body-bg-dark:                    #212529;
$body-color-dark:                 #dee2e6;
$body-secondary-color-dark:       rgba(#dee2e6, 0.75);
$body-secondary-bg-dark:          #343a40;
$body-tertiary-color-dark:        rgba(#dee2e6, 0.50);
$body-tertiary-bg-dark:           #2b3035;
$body-emphasis-color-dark:        #fff;
$border-color-dark:               #495057;
$border-color-translucent-dark:   rgba(255, 255, 255, 0.15);
$link-color-dark:                 #6ea8fe;
$link-hover-color-dark:           #8bb9fe;
$code-color-dark:                 #e685b5;

// Dark mode primary derivatives (hand-tuned)
$primary-text-emphasis-dark:      #6ea8fe;
$primary-bg-subtle-dark:          #031633;
$primary-border-subtle-dark:      #084298;

// ---------------------------------------------------------------------------
// Bootstrap core imports
// ---------------------------------------------------------------------------
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap-imports";

// ---------------------------------------------------------------------------
// Dark mode — button overrides only (all else handled by Sass vars)
// ---------------------------------------------------------------------------
@include color-mode(dark) {
  .btn-primary {
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-color: #fff;
  }

  .btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-color: #fff;
  }
}

// ---------------------------------------------------------------------------
// Light mode — primary override (#0d6efd in light)
// ---------------------------------------------------------------------------
@include color-mode(light) {
  // Primary — Blue in light mode
  --bs-primary:                #0d6efd;
  --bs-primary-rgb:            13, 110, 253;
  --bs-primary-text-emphasis:  #052c65;
  --bs-primary-bg-subtle:      #cfe2ff;
  --bs-primary-border-subtle:  #9ec5fe;

  --bs-code-color:             #d63384;

  .btn-primary {
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-color: #fff;
  }

  .btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-color: #fff;
  }

  .dropdown-menu {
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-active-color: #fff;
  }

  pre { color: #dee2e6 !important; }
}

[Thiti517]

That allow to modify current theme colors but my goal is to add more theme colors so that i have:

- primary   # from bootstrap
- secondary # from bootstrap
- success   # from bootstrap
- danger    # from bootstrap
- warning   # from bootstrap
- info      # from bootstrap
- light     # from bootstrap
- dark      # from bootstrap
- custom    # my own color
- brand     # my own color

I found what i was searching for a few hours ago in the documentation.