A syntax theme that serves a purpose in SublimeText/TextMate

I spend much of my time writing and reading a variety of code in text editors. Eye fatigue is something that I struggle with due to my habits. I’ve come to understand that colors and visual syntax ‘brought to life’ with the right tweaks relieves the eye strain. Yet for some reason, I’ve never found a good color palette syntax that does what I need it to do and does it well ( a big shout-out to tmTheme-Editor, absolutely brilliant ). I wanted something that is functional and relieving on my eyes. I use SublimeText as my editor (with vim bindings), but my theme can be applied to just about any editor that supports tweaking the syntax highlighting (_Sh_). My theme is a standard TextMate theming standard compliant theme. I’m sure it could be adapted for other editors too (please fork it!) .

[caption id=”attachment_429” align=”aligncenter” width=”545”]Downed Rainbow code syntax highlighting example Downed Rainbow code syntax highlighting example[/caption]

If you’ve seen enough, you can just go to Github now and get the theme! Or read on.

##My requirements

I tend to comment well in my code. Which means my _Sh_ needs to really make comments stand out. I also struggle with reading strings when embedded deep inside “foreign language code”, like /^Reg/ex and function.chaining(‘code’); these need to stand out. Library properties and language constraints need to be a little different than the code I’m writing and I prefer a dark background.

I began looking at some default styles around the web. One that really caught my eye was MagicWB(Amiga).tmTheme). It really makes an attempt to make the _Sh_ functionally helpful. The highlighting serves a purpose and extends the readability of the code well.

[caption id=”attachment_425” align=”aligncenter” width=”535”]MagicWB (amiga) code syntax highlighting example MagicWB (amiga) code syntax highlighting example[/caption]

I took a first stab at it
There are some problems with the amiga theme though. The gray background was not good for me. Also, the comments do not ‘pop’. But what I really enjoy is the strings. Look at them; you can’t miss them. I like this a lot. I started from that point. I came up with Downed Rainbow. My first few revisions were’t perfect. Much more obtrusive than functional.

[caption id=”attachment_428” align=”aligncenter” width=”540”]Downed Rainbow v2.3 Downed Rainbow code syntax highlighting example[/caption]

A final rendition
But I kept at it. This was a work in progress, and I desperately wanted something better. I think I nailed it. I’ve been using this version with no tweaks for months now. I find it a joy. It’s definitely helped me out in my coding and reading and strain.

[caption id=”attachment_429” align=”aligncenter” width=”545”]Downed Rainbow code syntax highlighting example Downed Rainbow code syntax highlighting example[/caption]

##It’s very feature complete for web development tasks!

  • Powerful language support

    • LessCSS
    • Coffeescript
    • AngularJS
    • Mustache Templating
    • and of course html, ecmascript, css, php, sql, python

  • Diff supported highligting

  • Numbers look different than strings
  • Language constructs are entirely different colors than defined constructs
  • Plugin support for SublimeLinter
  • Comments and Strings are first class citizens
  • Dark, but not totally black, background (blueish tint)
  • Searching text matches stand out

For me, code is easier to read. Look at some of this JavaScript below and tell me it’s not good looking (also note that SublimeLinter is pointing out a line for me! Extra points for comments that point out the error[s]).

NodeJS code

##Bonus Notes

I also have a few plugins installed that you may find helpful

Also, this theme is little related, nor inspired by this awesome project. Continue on to my Github project to install!