Build a Bootstrap Theme from a Vim Color Scheme

4 years, 9 months ago

This site uses the Bootstrap Molokai theme, which I based off
of the Molokai Vim color scheme. Converting a Vim color scheme
to a Bootstrap theme is fairly easy but somewhat time-consuming. This post documents the process used for creating the Bootstrap Molokai theme.

Create a Palette from the Vim color scheme

The first step is to figure out which colors are available to us. The
following python script parses the Vim color scheme then writes
an HTML file containing swatches of each color along with the hex code for the
color:

Then open up output.html in your web browser to see a table filled with color
swatches from the color scheme.

Build Up Your Base Theme

The Bootstrap Magic Editor is great for rapid development, it
gives you live previews of your customizations. You can import any previous
customizations and export all of your customizations.

Fill out the Grays, Brand Colors & Scaffolding sections first, they will have
the biggest effects. You should be referencing the color swatches you created
in the last section. And if you need inspiration, just open up Vim or inspect
the color scheme.

Saving the LESS variables saves every variable, not just the ones you
changed. Upgrading to a newer version of Bootstrap will be much easier if we
simply omit variables we do not change. You can either take care of it later
or skip ahead to setup your theme.less file, then fill that out as you
play around in Bootstrap Magic.

It doesn't cover all of Bootstrap's elements. For example, wells and panels
are missing. We will take care of this soon.

Once you've tapped Bootstrap Magic, export the LESS variables and we can make a
place for them to live.

Setup the Project Structure

Make a new directory(lets call it theme) and cd into it. We'll keep track
of our changes using git, so go ahead and initialize a new repository with
git init.

Before you check out the sample page, make sure to link the built CSS file:

ln -s dist/css/bootstrap.css sample/css/bootstrap.css

Once everything looks good, it's time to strip out any unnecessary variables
from our theme and add customizations that were missing from Bootstrap Magic.
The best way to do this is by diffing our theme.less against
bootstrap/less/variables.less:

vimdiff theme.less bootstrap/less/variables.less

After making a change, you'll need to rebuild the CSS files in order to update
the sample page. You can streamline this process by using the watch command:

watch -n5 "lessc theme.less > dist/css/bootstrap.css"

Don't foget to commit after making some progress!

Once you've gone through Bootstrap's variables.less you're finished! Copy the
final CSS to your Bootstrap project and think about sharing your theme with the
public :)

Upgrading to a New Version of Bootstrap

Upgrading is relatively simple. Start by making a temp directory and place
the LESS files from the new version into it. Then diff the old variables.less
with the new one and use these changes to update your theme.less. Once your
theme is updated, move the new LESS files from temp to bootsrap/less/ and
rebuild your theme.