Customizing bootstrap 5 button colors and properties in it

Question

I've created my custom.scss in my project, and done this:

$primary: #e84c22;

$theme-colors: (
  primary: $primary,
);

@import "~bootstrap/scss/bootstrap.scss";

So far, the color is like this:

I am not satisfied with the text inside the btn-primary class. By default it's dark and regular font. I want to change it to white and bold text without adding text-light and fw-bold classes to the button element. I expected it to be like this:

How can I do that by modifying the custom.scss?

extra information:
Unlike btn-danger

It is white text by default. There must be a function to modify the text color according to the color brightness in bootstrap.

Answer 1

The proper and safest way is to create your color map and add it to the existing bootstrap. This will preserve all the bootstrap colors.

To do that you first need to include the functions and variables in your custom.scss file.

Step 1

Import the functions and variables first

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

Step 2

You need to define your map. Do not use $theme colors, as @carol says, it will wipe out other colors, Instead create your own map

$mycolors: (
  "primary": #e84c22,
);

Step 3

Once created, you merge with the existing theme-colors using map-merge()

$theme-colors: map-merge($theme-colors, $mycolors);

Step 4

Include your bootstrap at the end

@import "../node_modules/bootstrap/scss/bootstrap";

Final code

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$mycolors: (
  "primary": #e84c22,
);
$theme-colors: map-merge($theme-colors, $mycolors);

@import "../node_modules/bootstrap/scss/bootstrap";

Output

Why is the text color not changing?

If the button background color is not contrast enough for the text then the text color will not change.

You can use this site (https://venngage.com/tools/color-contrast-checker) to check the contract Notice the Fail indication for the Small Text for AA

I will move the Lighness slider one step back to get a good contrast ratio.

Now notice the Pass indication for the Small Text

If we apply the new color, the text automatically changes

$custom: (
    "orange": #C52B03
);

Viola!