I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different.
Initially, I made the edits directly to the Bootstrap source files by adding my new color to the standard list and setting "primary" to this new color. Surprisingly, everything worked as expected - all components adopted the new color as their default, including lighter and darker shades.
However, I am aware that this might not be the most advisable method. So, I attempted another approach using the original Bootstrap source files and created a custom.scss file like this:
@import "functions";
@import "variables";
@import "mixins";
$newcolor: #00a89c;
$colors: (
"newcolor": $newcolor
);
$primary: $newcolor;
$theme-colors: (
"primary": $primary
);
@import "bootstrap";
Upon rebuilding, I noticed some discrepancies. While certain elements like btn-primary, badge-primary, and bg-primary reflected the new color, others such as btn-link reverted back to Bootstrap Blue. After examining the Bootstrap source, I discovered that btn-link is linked to $link-color which is derived from theme-color("primary"). This confusion leads me to believe that I may have overlooked the order or misunderstood the hierarchy of precedence.
If anyone can pinpoint where I went astray and guide me on achieving consistent application of my new color wherever "primary" is referenced, I would greatly appreciate it.