Customizing / Contributing to a VS Code Theme - Syntax Highlighting

Ever wanted to make your own theme?

Or maybe you found one but is just slightly off from what you prefer.

It's also a great, easy way to contribute for Hacktoberfest. In this post, I'm going to show you how to modify syntax highlighting.

Backstory

Like many other devs, I use Sarah Drasner's Night Owl Theme. It looks great with Dank Mono. My one complaint; CSS Custom Properties syntax highlighting wasn't as awesome as the rest of the theming. So I opened an issue.

Then I decided I want to take a stab at it, but I had no idea where to start. After forking the repo and opening it up, the JSON for each theme was pretty straightforward, but finding the right scope was like a blind squirrel trying to find a nut...on a long enough timeline I find one, but it's probably not what I was looking for. It was pretty frustrating.

Docs

So I went to the following places for documentation:

Naming Conventions

Useful, but still pretty vague.

Then I found the golden link:

Visual Studio Scope Inspector

Scope Inspector

VS Code's built-in scope inspector tool helps debug grammars. It displays the scopes for the token at the current position in a file, along with metadata about which theme rules apply to that token.

Lovely VS Code has an inspector you can activate from the command palette. 🤯

Trigger the scope inspector from the Command Palette by selecting the Developer: Inspect TM Scopes.

You can look at the docs, but I'll go through the steps here with some visuals:

Playing around

One quick and easy way to check my work is to open up my own settings.json and stub the following:

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "CSS Custom Property declarations",
                "scope": [],
                "settings": {
                    "foreground": "#82aaff"
                }
            }
}

Next I opened up a CSS file where I'm declaring and using CSS variables and highlighted the prop, and I get this lovely view:

You'll see all the scopes which apply to that item with the top being most specific.

I don't want to mess with anything else in Sarah's theme so I only chose the most specific one. I set a color and saved and it automatically updated to show me that it worked.

"scope": ["variable.css"],

I also needed to highlight the variable when it's being used so I did the same thing with the following:

"scope": ["variable.argument.css"],

Here's what my settings.json looks like to override the styling for the theme. Just two blocks:

And the results look like this:

All that's left is to update the relevant portions of the theme json and open a PR, just in time for Hacktoberfest 🍻!