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.
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.
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:
theme.less file, then fill that out as you
play around in Bootstrap Magic.Once you've tapped Bootstrap Magic, export the LESS variables and we can make a place for them to live.
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 filesdist & dist/css - to hold the compile CSS filessample, sample/css & sample/js - to hold a sample HTML page filled with
Bootstrap elementsmkdir -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 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 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