I'm loading my Bootstrap 5 sass like this:

@import '_partials/bs_var_overrides';
@import 'node_modules/bootstrap/scss/bootstrap';

In bs_var_overrides I'm simply doing this:

$green: #00ff00;

Naturally this changes the bs var default of $primary: $green which is what I want.

However, in my btn-success buttons, it's also changing the text color from white to black and I'm trying to understand why(?)

CodePudding user response：

white to black due to shade-color function like:
@function shade-color($color, $percentage) {
     @return mix(black, $color, $percentage);
}

Helpful Links:
getbootstrap.com/docs/5.2/components/buttons/#variables
https://codepen.io/raeesh/pen/OJQmxrj
----------------------------
bs_var_overrides.scss File
$green: #00ff00;
$primary: $green;

Style.scss File
@import '_partials/bs_var_overrides';
@import 'node_modules/bootstrap/scss/bootstrap';

/* If you want btn-success color should be white */
.btn-success {
--bs-btn-color: var(--bs-white);
}