How to change color of primary button in bootstrap using variable.scss?

Question

I use a variable.scss file to custom my button. My question is NOT USE CSS but SCSS ONLY.

I start with change primary color (#66cccc) and font (RobotoSlab):

$primary: #66cccc;
$font-family-base: RobotoSlab;

but i want white color of text (see screensot) but my font is black

bootstrap calculates black/white color according to the primary color (if it is rather dark or light)

Ogdon

Answer 1

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)

Presbyterial

The default value of yiq-contrasted-threshold is 150, and has a valid range between 0 and 255. – Worl

In bootstrap 5 these variables have been renamed: $yiq-contrasted-threshold is renamed to $min-contrast-ratio and $yiq-text-dark and $yiq-text-light are respectively renamed to $color-contrast-dark and $color-contrast-light. They also mean slightly different things: see getbootstrap.com/docs/5.0/migration/#sass – Shake

Answer 2

This usually happens when you try to customise bootstrap colors.

In bootstrap 5.3, there is a variable $color-contrast-ratio that determines if bootstrap will use light or dark colors. It defaults to 4.5. You probably need to lower it to 3.

From the doc:

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

Lenora