Build a Bootstrap Theme from a Vim Color Scheme

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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#!/usr/bin/python
"""Read a vim color scheme and output an HTML file containing all colors."""

import re
import sys


HEX_REGEX = re.compile(r'#[a-fA-F\d]{6}')


def main():
    color scheme = sys.argv[1]
    color scheme_hexes = list()

    with open(color scheme) as color_scheme_file:
        for line in color scheme_file:
            matches = HEX_REGEX.findall(line)
            [color scheme_hexes.append(match) for match in matches
             if match not in color scheme_hexes]

    html = "<html><title>{0} color scheme</title><body>".format(color scheme)
    html += "<table><tr>"

    for (counter, color) in enumerate(color scheme_hexes):
        if (counter % 5 == 0):
            html += '</tr><tr>'
        text_color = get_text_color(color)
        html += ('<td style="width:100px;height:100px;background-color:{0};'
                 'color:{1};text-align:center;">'.format(color, text_color))
        html += color
        html += "</td>"

    html += "</tr></table>"
    html += "</body></html>"

    with open('./output.html', 'w') as out_file:
        out_file.write(html)


def get_text_color(hex_color_code):
    """Use black for light colors and white for dark ones."""
    (red, green, blue) = rgb_from_hex(hex_color_code)
    luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
    if luminance < 0.5:
        return "#FFFFFF"
    else:
        return "#000000"


def rgb_from_hex(hex_color_code):
    """Return the RGB tuple of the hex color."""
    color_numbers = hex_color_code[1:]
    red = int(color_numbers[:2], 16)
    green = int(color_numbers[2:4], 16)
    blue = int(color_numbers[4:], 16)
    return (red, green, blue)


def usage():
    print("A single argument is required: python2 vim_color_palette.py file")


if __name__ == '__main__':
    if len(sys.argv) == 2:
        main()
    else:
        usage()

You can grab the raw file here. Save this to a file(vim_color_palette.py), copy the desired color scheme to the same folder and pass the color scheme's file name to the script:

cp ~/.vim/colors/molokai.vim .
python vim_color_palette.py molokai.vim

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.

There are 2 caveats with Bootstrap Magic:

  1. 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.
  2. 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.

Lets make a couple of folders:

  • bootstrap & bootstrap/less - to hold Bootstrap's files
  • dist & dist/css - to hold the compile CSS files
  • sample, sample/css & sample/js - to hold a sample HTML page filled with Bootstrap elements
mkdir -p bootstrap/less dist/css sample/{css,js}

Download the Bootstrap Source and extract the LESS files to bootstrap/less.

Grab a sample page from the internet or work through the Bootstrap Docs and build one yourself. I like Bootswatch's Sample Page.

We should go ahead and commit these changes:

git add bootstrap dist sample
git commit -am "Add Base Project Files"

We can now bring in our less file from Bootstrap Magic:

cp ~/Downloads/magic-bootstrap.less theme.less
git add theme.less
git commit -am "Add Initial LESS File from Bootstrap Magic"

Your directory structure should look something like this:

theme/
    dist/
        css/
    bootstrap/
        less/
    sample/
        css/
        js/
    theme.less

Modify LESS, Build CSS, Repeat

Modify the beginning of theme.less to import the bootstrap LESS files:

// theme.less
// Import Base Bootstrap files 
@import "bootstrap/less/bootstrap.less";
@import "bootstrap/less/responsive.less";

// Custom settings 
@gray-darker: #F8F8F0;
@gray-dark: #75715E;
@gray: #232526;
@gray-light: #1B1D1E;
@gray-lighter: #080808;

// ...

Now try building the CSS files by using lessc:

lessc theme.less > dist/css/bootstrap.css
lessc -x theme.less > dist/css/bootstrap.min.css

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.

Comments

There are currently no comments

New Comment

required

required (not published)

optional