bootstrap: v5: Sass btn-primary color: #000 is incorrect when NPM RUN DEV or NPM RUN PRODUCTION

If I do btn-dark, btn-secondary, etc… the color is white or #fff but when I do btn-primary the font is black.

I did:

npm install bootstrap@next
npm run dev or production

my app.scss
  // Bootstrap
  @import '~bootstrap/scss/bootstrap';


my index.html
 <button type="submit" class="btn btn-primary">
   Register
 </button>

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 24 (8 by maintainers)

Most upvoted comments

I overwrote the $primary value with #007bff and black text is now in the btn-primary

I recovered the white text by overwriting the value $min-contrast-ratio to 3.0 (4.0 by default)

I’m not sure that the default value of $min-contrast-ratio is correct, it seems to me that the text #fff is more readable on #007bff

Voila, it’s just how I feel

cotiga on Jun 19, 2021

Well… you all are correct. I just started looking at the _variables.scss file in the node_modules directory vs in my app’s directory and that’s where the color changed happened. I overwrote the values in the app’s scss file and presto… back to normal bootstrap colors.

I’m using Laravel and not sure how those colors got whacked.

Thank you for hanging in there with me and showing me. That helped a bunch.

wcoy7 on Jan 18, 2021

If I do NPM RUN DEVELOPMENT or PRODUCTION I am seeing this:

Screen Shot 2021-01-16 at 6 39 13 AM

wcoy7 on Jan 16, 2021

https://getbootstrap.com/docs/5.0/customize/color/

Download the ZIP file and presto… these are the default colors. use NPM (SaSS / SCSS) and presto… you don’t get those colors you get:

Screen Shot 2021-01-16 at 6 39 13 AM

Hence my question as to why? Clearly I can edit the _VARIABLE.SCSS and change the contrast ratio to get it to work like bootstrap always has… but hoping you all can fix it vs. me futzing around with the source.

wcoy7 on Jan 17, 2021

Looking at _variables.scss:

// 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 $min-contrast-ratio: 3.0 !default;

The default is 4.5, changing this to 3.0 causes the default colors to work as expected.

wcoy7 on Jan 16, 2021