CODEWITHSUNDEEP
csstwitter-bootstrapsassbootstrap-5
Hevski
Hevski

Reputation: 1871

Boostrap v5.2 SCSS compilation is 'automatically determine a contrasting color' of buttons based on their background. How best to override this

For buttons Bootstrap v5.2 dynamically generates the colour of the text based on the button colour.

At the moment I’m setting bootstrap variables override file to override the primary color of for my custom theme

$green: #369d6d !default;
$primary: $green !default;

When I’m using buttons btn-primary class I'm seeing a black text

enter image description here

The CSS that is generated is:

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;
}

The bootstrap 5 button mix-in (bootstrap/scss/mixins/_buttons.scss) is dynamically setting the text color using a color-contrast function the documentation about color-contrast is here: https://getbootstrap.com/docs/5.2/helpers/color-background/

So bootstrap is now 'automatically determine a contrasting color for a particular background-color.'. So bootstrap is now automatically creating the button text color based on the buttons background. I guess this is for accessibility contrast reasons.

My question here is what is the best method to override this behavour. At the moment I'm overriding the text color using for the created buttons like so:

 .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    color: white !important;
}

Is there a better method using variables? Or something else to override this the bootstrap way.

Upvotes: 0

Views: 1276

Answers (2)

Reed
Reed

Reputation: 1642

I fixed this issue by modifying the $min-contrast-ratio variable as per this answer: SASS/SCSS: Bootstrap 5 Color functions not working well?

Upvotes: 0

Schwarz Developing
Schwarz Developing

Reputation: 293

the Bootstrap recommended way is to use the color-contrast function on a custom-class.

https://getbootstrap.com/docs/5.2/customize/sass/#color-contrast

.custom-element {
  color: color-contrast($dark); // returns `color: #fff`
}

Upvotes: -1

Related Questions