Customizing / Contributing to a VS Code Theme - Syntax Highlighting
Tags: vscode, hacktoberfest
Published: 2019-10-08 20:21:38

## 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](https://github.com/sdras/night-owl-vscode-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](https://thepracticaldev.s3.amazonaws.com/i/xoyslt1fchdq98q12c6b.png)

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](https://macromates.com/manual/en/language_grammars#naming_conventions)

Useful, but still pretty vague. 

Then I found the golden link: 

[Visual Studio Scope Inspector](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#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:

```json
"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](https://thepracticaldev.s3.amazonaws.com/i/rzvxf6ljl9kpd8n4142x.png)


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.

```json
"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](https://thepracticaldev.s3.amazonaws.com/i/1tokzo54kb0a8fqneav3.png)

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

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

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8doo9eb7ogtg8yxdgk8h.png)

And the results look like this:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dv5gjp8s8oe7qt7kmdxc.png)

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