Buttons in Bootstrap v5.2 dynamically adjust the text color based on the button color.
Currently, I am modifying the bootstrap variables override file to change the primary color for my custom theme
$green: #369d6d !default;
$primary: $green !default;
However, when using the btn-primary class for buttons, the text appears in black.
https://i.sstatic.net/eCYEU.png
The generated CSS code is as follows:
btn-primary {
--bs-btn-color: #000;
--bs-btn-bg: #369d6d;
--bs-btn-border-color: #369d6d;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #54ac83;
--bs-btn-hover-border-color: #4aa77c;
--bs-btn-focus-shadow-rgb: 46,133,93;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #5eb18a;
--bs-btn-active-border-color: #4aa77c;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #000;
--bs-btn-disabled-bg: #369d6d;
--bs-btn-disabled-border-color: #369d6d;
}
Bootstrap 5's button mix-in is dynamically determining text color using a color-contrast function referred in the documentation here.
Bootstrap now automatically generates button text colors based on the background, possibly for better accessibility contrast.
My query is how to best override this behavior. Currently, I am manually setting the text color for created buttons like this:
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited {
color: white !important;
}
Is there a more efficient method, perhaps using variables, to override this in accordance with Bootstrap guidelines?