Customizing bootstrap 5 button colors and properties in it

user_6274120 0
Viewed 9603

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:

button

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:

bold button

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

extra information:
Unlike btn-danger
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.

bootstrap-5 twitter-bootstrap sass css html
1 Answers

"There must be a function to modify the text color according to the color brightness in bootstrap."

Yes, it's using the WCAG 2.0 algorithm explained here. The red color you're using is just light enough to flip the text color to dark according to the WCAG algorithm.

Buttons are created by mixins (see: Buttons in the docs). In this case the 3rd parameter of the button-variant mixin $color is defined as:

$color: color-contrast($background, $color-contrast-dark, $color-contrast-light, $min-contrast-ratio)

So the button's color is either $color-contrast-dark or $color-contrast-light, depending on the WCAG 2.0 calculation using the $min-contrast-ratio.

Therefore, making the custom red color color slightly darker will flip the text color to white...

$primary: #d73b11;

@import "bootstrap";

Or, you can use the original custom color and force white bold text on btn-primary like this...

$primary: #e84c22;

@import "bootstrap";

.btn-primary {
    color: #fff;
    font-weight: bold;    
}

Demo

Or,

You can set a lower value on the $min-contrast-ratio variable (3, 4.5, and 7 are the acceptable values) as shown in this answer

Also note that the way you're re-defining the theme-color map is wiping out all the other theme colors. You only need to change the value of $primary to change the primary theme color.

user_1714560
Related