How can I add a custom color to theme colors in Bootstrap 5?

[danielmoessner]

I don't get it to work, so that bg-darker is available as class.

My Vars File looks like this:

// bootstrap override
$body-color: white;
$grid-gutter-width: 1rem;

// Create your own map
$custom-colors: (
  "darker": #252830,
);

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

My Bootstrap File looks like this:

// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Custom Stuff
@import "vars";

// Configuration
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/placeholders";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";

[MichelleDiamond]

I am needing the same information. I am struggling to add the custom colors that I created in bootstrap 4.

[toledano]

Same pb also in BS 5.3... Older version Ive added some branded colors in BS4

[patkon]

// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Custom Stuff
@import "vars";

// IMPORTANT: you’re missing this
@import "bootstrap/scss/maps";

// Configuration
@import "bootstrap/scss/utilities";

// Layout & components

https://getbootstrap.com/docs/5.2/migration/#new-_mapsscss
But that’s just a wild guess; I haven’t tested any of it.

[benwallis]

@charset 'utf-8';

@use "sass:color";
@use "sass:map";

// Functions come first
@import "bootstrap/scss/functions";

// Optional variable overrides here
@import 'custom-variables';  // $custom-colors defined in here like in the OP

// Variables come next
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// Optional Sass map overrides here
$theme-colors: map.merge($theme-colors, $custom-colors);

// Followed by Bootstrap default maps
@import "bootstrap/scss/maps";

// Rest of Bootstrap imports