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

Contrast issue

What you input is not contrast enough to change the text color. Notice the color fails the compliance for small text.

To fix the color I changed the slider back to one step

Let's use the new color

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

Resources

https://venngage.com/tools/color-contrast-checker