[5.1.0] Adding colors to $theme-colors no longer works
See original GitHub issueWindows 10 Chrome 92.0.4515.107 Bootstrap 5.1.0
Previously (in 5.0.2), I used the following code to add custom colors to $theme-colors
:
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
$theme-colors: map-merge($theme-colors, (
"disabled": grey,
));
@import "node_modules/bootstrap/scss/bootstrap";
However, applying text-disabled
to an element now does nothing in 5.1.0. Did the API change? Do I need to generate these theme color classes manually now, like the basic color classes?
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:10 (3 by maintainers)
Top Results From Across the Web
Bootstrap 5 - Custom theme-colors not updating classes
Bootstrap 5.0.2 You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like...
Read more >Discover how to override theme colors in Bootstrap 5 using Sass
Bootstrap 5 utilizes both theme-color("primary") and $primary color defintions. This article details how to override and extend the ...
Read more >Colors · Bootstrap v5.1
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too. On this page....
Read more >Create or delete a custom theme color - Microsoft Support
On the Themes tab, under Theme Options, click Colors, and then click Create Theme Colors. · Click a color that you want to...
Read more >D.5 Defining and using custom colors - Bookdown
By using various data types and working with many examples, ... And once we defined new color palettes, we need to know how...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Looks like there needs to be a documentation update or a migration guide Currently the documentation has the following: https://getbootstrap.com/docs/5.1/customize/sass/#add-to-map As others have found out this no longer generates background-color, color etc (maybe a link to the utilities from that page, or a note indicating that further customisation is necessary?
I was in same situation but the doc is updated here and solved this issue: https://getbootstrap.com/docs/5.1/customize/color/#generating-utilities