Bootstrap
Replies: 2 comments 2 replies
-
|
Try this: /* import the original Bootstrap files first */
@import "functions";
@import "variables";
/* next, set whatever customization you want */
$primary: $green-500;
$secondary: $pink-500;
$theme-colors: (
"primary": $primary,
"secondary": $secondary
);
/* finally, import Bootstrap to accept your changes */
@import "bootstrap"; |
Beta Was this translation helpful? Give feedback.
-
|
@TravelTimN I tried your solution and it works for only the colors which we specified in the map like in your case they are All the other colors are removed due to the fact that we are creating a new map and the default map will be ignored by Bootstrap due to the In the Bootstrap docs, they mention it just like you did. Do we need to change the position of this map in our |
Beta Was this translation helpful? Give feedback.
-
|
Just found the solution from this site. We need to redefine all the remaining default colors to get them along with our custom ones: |
Beta Was this translation helpful? Give feedback.
-
|
Excellent! Glad you figured out the remaining color addition. Hopefully you're able to get that sorted for your project now! |
Beta Was this translation helpful? Give feedback.
-
Bootstrap 5 has various theme colors like
gray-500,green-500, etc. If we want to use these colors anywhere else after importing_variables.scssit works perfectly fine.But suppose I want to change the
$primarytheme variable to a value from these built-in theme colors, like this:It says the variable green-500 is not found and I understand as we need to import
_variables.scssfirst. But if we do that then we loose the functionality of overriding the$primaryvariable.Beta Was this translation helpful? Give feedback.
All reactions