Customize bootstrap 5 text color contrast in button
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.
Customizing bootstrap 5 button colors and properties in it
"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.
How to change color of primary button in bootstrap using variable.scss?
You are right that bootstrap defines text color based on the background color and makes text either light or dark. But it can be configured.
If to dig deeper, you'll see that Bootstrap uses function color-yiq
(source) to determine whether text should be dark or light. So basically you need two things to get white text for buttons:
- adjust value of
$yiq-contrasted-threshold
- make sure
$yiq-text-light
equals to white color (by default it's true, so probably you don't need to worry about it)
How do i change the secondary button text color with bootstrap?
Override bootstrap variables
First you have to import bootstrap, then you can define custom styling for every bootstrap component.
for example:
@import 'node_modules/bootstrap/scss/bootstrap';
.btn-secondary {
color: white;
}
How to change btn color in Bootstrap
The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant
mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary
styling (e.g. :focus
, disabled
, usage in dropdowns etc).
A better way might be to:
- Create your own customized version of Bootstrap using Bootstrap's online customization tool
- Manually create your own color class, e.g.
.btn-whatever
- Use a LESS compiler and use the
.button-variant
mixin to create your own color class, e.g..btn-whatever
Related Topics
Css: How to Attach an Arrow to a Div and Make It Overlap the Border
Css: Set Color for Selected Row in a Table
CSS Multiple Class/Id Selectors
V-If Inside V-For - Display List of Items in Two Columns
How to Make Diagonal Circle Border Gradient
Single Versus Double Quotation Marks in HTML & CSS
Primefaces Components CSS Customization
React Native Font Outline/Textshadow
How Text-Replace Property Work in CSS
CSS Selection Color Behaving Strangely on Chrome