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:
Useful, but still pretty vague.
Then I found the golden link:
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 🍻!
Top comments (0)