How do you change the colour of Twitter's Bootstrap CSS?

Question

I've not used less before today.

I changed the colour in preboot.less to:

// Color Scheme
@baseColor:         @orange;                  // Set a base color

I then complied the less files. It all came out, but everything was still blue.

So I tried the js.less route. Still blue.

Answer 1

Here's a bootstrap theme generator that works from a picture.... So you can just take a picture of your "old" website, upload it here, and it'll generate a theme that matches your old color scheme!

Note: This site appears to be offline at the moment. If you still want this feature, you can install the site from it's Github repo, and try it from there.

http://www.lavishbootstrap.com/

and of course Bootstrap itself allows you to customize the colors when you download it now, but that involves lots of cutting and pasting of color schemes.... The tool above figures it all out for you...

http://getbootstrap.com/customize/

Answer 2

You might find the Bootstrap Generator useful - it lets you choose colours etc and generates a compiled Boostrap CSS file for you.