Somewhat suprised to see how scarces the available information is, around the interwebs and in the docs, on the subject of creating colorschemes for Sublime Text, for such a popular text-editor. Here are some notes that may come handy when doing this yourself. Down at the bottom of this post one will find links to other resources.
On Mac OS X the colorschemes.tmTheme files can be found in the following directory from the terminal:
$ cd /Users/USERNAME/Library/Application\ Support/Sublime\ Text\ 2/Packages/
Where <USERNAME> is the folder with your own (user)name.
I have this alias in my .bashrc for easy access from the terminal.
alias zsubl='cd /Users/bram/Library/Application\ Support/Sublime\ Text\ 2/Packages/'
Workflow
First of all, having a visual reference for the colorscheme you are working on at hand is indispensable. Something which works really well in my experience is these kind of colorscheme labs, which basically are just simple webpages containing colorscheme color-tiles (using sixteen Sass variables for colors), and some syntax-highlighted code-samples. In order to make editing the colors less cumbersome, it helps to tweak the values for hue, saturation and lightness in the HSL format. Ones one is happy with the overall balance in the colorvalues, it's not that difficult to convert them to hex-values, (either from DevTools or some other trustworthy colortool,) and then manually copy those hex-values over to Base16-schemes.
Base16? A helpful tool can be this webapp on Heroku, but this will only get you so far. My workflow for editing the tmTheme colorscheme for Sublime continues with editing template files that come with Base16-builder, of which I host several versions for Base2Tone and other variations as well. After running the base16 command in the folder with the base16 executable bash-file, a whole lot of syntax-highlighting themes are generated from the commandline in the output-folder, as many as there are template files. Next copy those files over from the output folder (from the commandline) to the Packages/Color Scheme - folder. (Also not to forget removing the *.cache files in that same folder).
Helpful Hints
What you really want when editing, or iterating over an existing colorscheme, is hints for syntax-names which are used by the syntax-highlighting engine. This can be achieved when the command displayName is activated, and the function keys <Ctrl><Shift><P> are simultaneously pressed, while being with the cursor on a specific tag. This now will show the syntax-name in the left-bottom corner of the Sublime Text app-frame. Which makes me wonder how else one could know that the syntax-name for the “dot” in front of a class-name in CSS belongs to the syntax-group punctuation.definition.entity.css.
I have this line "command": "displayName" in my Preferences.sublime-settings file:
"color_scheme": "Packages/Color Scheme - Duotone/base16-duotone-darkspace.dark.tmTheme",
"command": "displayName",
"font_face": "FiraMono-Regular",
"vintage_start_in_command_mode": true,
"font_size": 14,
"ignored_packages": [""],
"theme": "Soda Dark.sublime-theme"
}
One thing I found out is that you can be more or less specific with leaving out or adding those suffixes, so keyword selects also keyword.operator, but keyword.operator.sass will override both, which makes sense.
Screenshots
Demo
Resources
- commands for Sublime
- info on setting for Sublime
- Original DuoTone Themes for Atom on simurai.com
- DuoTones Sublime Colorschemes on Github
This article was also published on Codepen