loading...

Customizing / Contributing to a VS Code Theme - Syntax Highlighting

chiangs profile image Stephen E. Chiang ・2 min read

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.

Alt Text

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:

Alt Text

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:

Alt Text

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

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

Alt Text

And the results look like this:

Alt Text

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

Posted on Oct 8 '19 by:

chiangs profile

Stephen E. Chiang

@chiangs

Pursuing a perpetual state of flow. Learn, Build, Eat, Sleep, Improve. Apply ☕️ & 🍺 liberally. 🇺🇸 🇩🇰 🇸🇯

Discussion

markdown guide