enzo for vscode

I made a custom theme for vscode with some fancy extra syntax highlighting sugar.

“Layers” of the theme

This theme goes way beyond the built in theming api. As such there are 3 “layers” to it.

  1. Simple base theme using the built in vscode theme api.
  2. Regex based highlighting rules.
  3. CSS code injection.

1. Textmate theme file

This is installed like any other theme. I also added the ability to use variables in JSON files using node module variable-replacer. Make your edits to the src/source-enzo.json or the variables.json file then run src/render.sh from CLI to render a new version of themes/enzo.json.

Note, the theme is divided into two parts. The workbench theming is handled with the colors section, and the editor hilighting is handled in the tokenColors section.

2. Regex based highlighter

Install this vscode extension.

Why use a regex based highlighter when the built in vscode syntax highlighter also uses regex?

Simple. vscode syntax highlighting only gives you access to two styling options: foreground color and background color.

While the regex based highlighter gives you access to the full Themable Decoration Render Options. This means in addition to background and forground color you can also set a border with radius/width etc, and a whole bunch of other stuff. (it doesn’t give you full access to all css properties which is a bit of a shame)

It has been proposed that this stuff be made available to syntax extensions etc but at this time this has not been done. If you’d like to see this stuff added to vscode I encourage you to go and make your support known in those tickets.

To use the syntax hilighting patterns that I designed, you just need to copy the contents of syntaxes/highlight.json into your settings.json

2.5 Syntax Hilighting the native way

The documentation for writing your own syntax grammar for the native syntax hilighting system in vscode is…. garbage. It’s pretty convoluted and like I said it doesn’t really give you that powerful a system for actually styling stuff. But in case you’re interested in actually writing your own syntax grammar let me drop you a couple of links that might help.

Check this link out to see a good example of a grammar syntax file. eppz wrote a really extensive syntax file for Unity specific flavors of C#. If I were to try and delve back into this issue I’d probably use his set up as a model. Second check this link to see a syntax extension written for brainfuck and it’s necessary package.json set up file for registering your syntax with vscode as an extension. I include this also because eppz had to do some funky stuff to register an extension of an already existing syntax so I think it’s helpful to have a more straightforward example at hand.

3. CSS code injection

The final thing you can do to spruce stuff up is to actually inject css/js into vscode. To do this install this extension.

This is super powerful because it means that you get full CSS properties access to elements of the vscode interface.

Atom is apparently pretty straightforward to theme because all the elements in the DOM have consistent class names but in vscode they’re programmatically generated. At least I think that’s the issue….

Because of this sometimes css class names will randomly change for no apparently reason which then will break the custom injection stuff. So… caveat emptor!

The CSS injection style sheet can be found in the folder injectedTheme-vscdoe/styles.css. injectedTheme is itself it’s own git repo with a gulp based SCSS build system.

To install the injected theme you need to copy the styles.css file somewhere on your computer (I keep mine in my dot files repo), and then link the css/js injector extension to that file by putting something like this in your settings:

{
  "vscode_custom_css.imports": [
    "file:///folder/folder/blahblah/folder/styles.css"
    ]
}

At some point I’d like to combine the theme, my settings file, and injectedTheme all into one master build system, but this will have to do for now.

additional notes on code injection:
While you can use CSS injection to style any CSS property the way it actually ends up getting rendered is sort of wonky. For instance I wanted to try to add padding to some of the custom highlighting I’d made for html and php tags, but it was doing some weird double rendering stuff. I think this might have something to do with the way that the vscode editor uses canvas now, but not entirely sure.

Additional extensions I recommend for expanding theming possibilities

Check out this blog post to see some of the other extensions I recommend for improving the visual-semantic represenation of code in vscode.

Credits

icon made using base by prettycons licensed under CC 3 from flaticons.

The original theme colors were based on hopscotch, specifically idleberg’s implementation.

Huge inspiration from eppz’ unity vscode theme. It’s fucking genius!

First, while I’ve been fiddling around with injection for awhile it’s Robb Owen’s awesome use of it in Synthwave84 that inspired me to finally package this stuff up for other people to use. I was like “ooooh duh! you can make text glow! ah!”

Someday I’d like to maybe even play with animation loops for styling. Is it in good taste? IDK, but does this theme look like it was ever in good taste???

License

This work is licensed under the Creative Commons CC0 1.0 Universal License.

Future Plans!

  • Better systematize the color palette’s semantic relationship to JS/CSS/HTML/PHP/JSX etc syntax similar to how eppz has done for his theme/syntax scheme for C# in Unity.
  • rip out the relevant parts of the regex hilighting extension and the CSS code injection extension so that people can simply install the extension and not worry about doing all the other extra steps to get the flashy stuff.
  • Genericize the resulting extension so that other people can easily write their own haxor-injected-style themes that go beyond the default vscode extension api etc.
  • build up more on the injectedTheme css file.
  • create a more soup to nuts build system which includes both the css injection files, the custom theme, and the regex hilighting system all in one go. Probably won’t do this until I decide to actually sit down and frankenstein the other two extensions into mine though, and I need to get better at coding before I attempt that.