Customize bootstrap 5 text color contrast in button

Question

I am customizing bootstrap 5 using bootstrap.build. So far, I had no problem.

But, when I switch to react project, things gone wrong. The text inside the button become black. same goes to the outline button when on hover.

All I did was customizing the .scss file such as this:

$orange: #e84c22;
$primary: $orange;

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

What is wrong?

My aim here is to change these button with the exact #e84c22 color to display white text only using btn btn-outline-primary and btn btn-primary class.

I've tried changing $yiq-contrasted-threshold to 200 but it doesn't change anything.

So, what is the difference between Bootstrap in react and in bootstrap.build? what's happening behind it?

here's example project in codesanbox.io. please review it and tell me what did I do wrong.

Answer 1

It appears from the checking the source that bootstrap.build/app is using Bootstrap 4, not Bootstrap 5. The color contrast logic has changed from Bootstrap 4 to Bootstrap 5, and the color contrast threshold is very different.

Bootstrap 4 used the YIQ color space...

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

Bootstrap 5 uses the WCAG 2.0 algorithm

// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:   4.5 !default;

Comparing the 2 versions, and the color logic:

Using the 4.x color contrast logic to change $primary to #e84c22 - results in light text color

Using the 5.x color contrast logic to change $primary to #e84c22 - results in dark text color

---

So, your Bootstrap 5 React SASS customizations are working as expected, and bootstrap.build is still using older 4.x.

To get the light text color in Bootstrap 5 (with React), you could change the default value of the $min-contrast-ratio variable...

For example, changing $min-contrast-ratio from 4.5 to 3 makes the text color light in contrast to #e84c22:

$min-contrast-ratio: 3;
$orange: #e84c22;
$primary: $orange;

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

https://codeply.com/p/Z1tOoBclnH

As explained in the Bootstrap 5 SASS "the acceptable values for WCAG 2.0 are 3, 4.5 and 7". Alternatively, you can use the 5.x solutions described in my related answer. If you're looking to further customize Bootstrap, themestr.app (note: I'm the creator) has been updated with Bootstrap 5.x.