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)

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)