Bootstrap: Can I change primary color without editing main CSS file?

And if so, how would I go about doing that?

I’m working on this template and would like to change all of the “blue” elements to a an orange of sorts and I’m wondering if there’s a way to do that with an addition to the css instead of digging through a minimized file to change all instances of the blue found there.

If anyone’s savvy on how to do that, I’d be greatly appreciative. Thanks for your time!

Unfortunately it looks as though there is a mixture of primary color rules in that file and no consistent approach taken.

For example I did a search of --primary and found about 143 css rules in that file that mention primary (-.e.g like primary-light, primary-dark, primary-enchanced and so on). Therefore although you could just find the variable --primary and change the color value associated with it it would not change all the colors that go with it such as borders and highlight and focus and active and hover etc that will all be some shade of blue.

Had the author instead used one color for the blue and then shaded it with lightness and darkness then only one rule would need to be changed.

There is also the issue that the same blue color is define in a variable as something like --blue and that is also used over the site. Therefore if you change that to say orange then you have a variable called blue which shows an orange color!!!

Lastly it seems that buttons and (many other things) are styled blue directly and not using the --primary color settings so there’s a whole slew of other changes there to take care of.

I’d suggest not using a theme and do it yourself as it would be quicker than changing someone else’s code.

Good luck :slight_smile:

1 Like