31
Aug
2013
2 Comments

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"
settings:
  foreground: $PURPLE
Compared to Sass:
float:        left
color:        $RED
.inner:
  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.

2 Comments

E30745ae3be2e0792957c89d7460d57c?s=40
Wed Feb 19 19:16:28 2014
This article has helped me a great deal! I happen to love CoffeeScript as well. I landed on this page because I decided to create the perfect Sublime Text Color Scheme for my CoffeeScripts. So yeah, I was delighted to find out about Aroma. I couldn't get ScopeHunter to work, so I used a similar package instead.
Cebb8f230ae552b94c5b7967c342c1ce?s=40
Thu Mar 27 23:01:46 2014
Awesome! Did you open source this color scheme?

Leave A Comment