Tips For Creating Sublime Text Color Schemes

So I recently created my first Sublime Text color scheme, Deep Blue See. In doing so I discovered what a pain it can be. But it doesn't have to be a pain, in fact, with these 2 tips the process can be a lot smoother.

Tip 1 Know your scopes:

Sublime text color schemes work by defining colors for scopes. A syntax definition matches the different parts of the file's text (e.g. functions, classes, keywords, etc.) and maps them to a named scope. Then the color scheme specifies what colors to use for what scopes.

The hard part comes when you see a particular piece of syntax you want to style a specific way, but you do not know what scope it is. I did a lot of guess work until I discovered the ScopeHunter plugin.

The ScopeHunter plugin allows you to select some text and it tells you what scope it matches. This removes the guess work and allows you to quickly color the pieces you want to.

Tip 2 Stop fiddling with XML and JSON files:

Sublime Text color schemes are defined with Property lists; which are just cumbersome XML documents that are tedious to work with. So whats the Sublime Community's answer to this? JSON, which is itself cumbersome and tedious to work with, albeit slightly less so then the property lists.

Well fuck that. Use Aroma instead. Aroma lets you compile a CoffeeScript object into a Property List. Now I know there is a great many people that dislike CoffeeScript (I happen to love it!) or simply just don't care to learn it. Well you don't have to. In fact, you don't even need to think of it as CoffeeScript, think of it more like Sass for Sublime Text color schemes.

You aren't writing logic (unless you want to), just key-value pairs. Which ends up looking just like Sass.
Here is a snippet from DeepBlueSee:

CoffeeScript Object:
name:         "Ruby: Constant"
scope:        "constant.language.ruby, constant.numeric.ruby"
  foreground: $PURPLE
Compared to Sass:
float:        left
color:        $RED
  background: $PURPLE
You also get to use variables just like in Sass. Woo hoo!

Aroma expects the objects to be defined in .aroma.coffee files that export the objects as node modules (Aroma really is just a node module itself!) It's actually really easy, just export the object like so:
module.exports =
  foo: "Static"
  baz: "bar"
This format allows you to specify variables to be reused like so:
foo = "Dynamic!"
red = "#d42e64"
module.exports =
  foo: foo
  baz: red

Aroma defaults to compiling to .plist files, but Sublime uses the .tmTheme extension. You can specify this like so:
$ aroma -e ".tmTheme"
You can even have aroma watch for changes and recompile as you work with the --watch flag:
$ aroma -we ".tmTheme"

Well there you have it. I hope this inspires some really great color schemes! If you like aroma, drop me line in the comments or on twitter.


So I have released my second Sublime Text plugin. I always liked the split panes in Sublime Text but sometimes the one I was currently working in, I would want to maximize so I could really focus. The problem was, all I could do was reset it to a single pane view, so when I switched back to a dual column setup again all my files were still in the left pane.

Lets say I was working in File B in the following split pane:

If I switched to a single pane, then back to 2 columns it would be like:

This may seem like a minor annoyance to have to reposition the pane divider to make the right side slightly larger and put File B back over to the right; but do it again and again day after day and this minor annoyance begins to become very annoying.

For a long time I actually just dragged the pane I wanted maximized over like so:

But this eventually got old too and I decided it was time to tackle my next plugin.

The part of the API I needed to accomplish this is undocumented, but luckily there is another Sublime package that deals very closely to the same problem domain. I was able to read the source code and tinker enough to figure out how to solve the problem.

The plugin lets you actually fully maximize a pane, while keeping a snap shot of the last layout so you can easily switch back. just type cmd+shift+enter to toggle back and forth. I used that keyboard shortcut because it does the same thing in iTerm 2.

I also added keyboard shortcuts to jump between maximized panes. To learn more check out the readme.

Slides From My Backbone.Detour Presentation

I recently presented at the Atlanta Javascript Meetup. Here are my slides: