Introducing Contrast Theme for Sublime Text

Contrast is a theme for Sublime Text born out of my frustration with inconsistent cross-language syntax highlighting. The purpose of Contrast is to reduce cognitive load by making color representative of how a program actually works, rather than just highlighting text.

Contrast Theme Language Support

I took a ground-zero approach when creating Contrast. No theme editor/generator was used. I started with, and will continue to build Contrast in raw XML. Currently, Contrast is focused on the languages below.

  • HTML
  • CSS
  • Sass
  • JavaScript
  • PHP
  • JSON
  • XML

My next step is to improve support for Sass. The current language definitions in Sublime Text for Sass are pretty awful. So, I need to create a better language file or find an open source one. The improved language file will provide the necessary Sass definitions to bind Contrast’s syntax highlighting rules to.

Contrast Theme Preview

Below is a screenshot of Contrast in JavaScript, where Sublime Text 3 does provide good language definitions. You will notice that function declarations and expressions are in blue, and function invocations are in light blue. While a relationship is established by all functions being blue, the different shades of blue imply a different context. Though subtle, this approach achieves the goal of reducing cognitive load by making it easier for developers to build a mental model.

Screenshot of a JavaScript module in Contrast Theme for Sublime Text
Contrast Theme JavaScript Preview

Lastly, my intent is to publish Contrast on Package Control when Sass support is better. For now, I’ll continue to use Contrast privately and fix errors and inconsistencies along the way. Feel free to download Contrast from GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *