Change comment color visibility in a VS Code theme

Published on Dec 21, 2023

2 min read

VSCODE

Switching to a different theme in VS Code can often lead to a mismatch in personal preferences. I enjoy personalizing themes with subtle modifications, especially when I find one theme that suits my taste.

I recently started using Digi-Angler Dark theme, a variant of the renowned Dracula color scheme. Returning to a dark theme after a while felt like familiar territory, reminiscent of my years using the Dracula theme in VS Code.

The issue with the comment color

🔗

Using Digi-Angler, one thing that is a bit too much for me is the color value used for code comments. I prefer comment colors that blend into the background, a preference shaped by my experiences across various code editors, terminal apps, and even while reading code on documentation sites. The sharp, eye-catching color used for comments in this theme didn't sit well with me.

Customizing comment color in VS Code

🔗

To address this, I stumbled upon editor.tokenColorCustomizations in VS Code. It is a feature that allows altering specific color values in the active theme. You add this property to your editor's settings.json file and specify the scope for the desired change.

Using textMateRules for Token Customization

🔗

VS Code's tokenization engine is based on TextMate grammars, and the customization is done within textMateRules. Here's how you can change the comment color:

1{
2 "editor.tokenColorCustomizations": {
3 "textMateRules": [
4 {
5 "scope": "comment",
6 "settings": {
7 "foreground": "#9c9c9c"
8 }
9 }
10 ]
11 }
12}

The above code snippet applies the comment color #9c9c9c to all themes you use inside VS Code. It also means when you switch from one theme to another, this comment will remain consistent.

Theme specific customization

🔗

To tweak the token value for a particular theme, wrap textMateRules with the theme name. The following examples demonstrate defining the name of the [theme] only applies the comment color #9c9c9c for that theme.

1{
2 "editor.tokenColorCustomizations": {
3 "[Digi-Angler Dark Theme]": {
4 "textMateRules": [
5 {
6 "scope": "comment",
7 "settings": {
8 "foreground": "#9c9c9c"
9 }
10 }
11 ]
12 }
13 }
14}

Conclusion

🔗

VS Code's flexibility in customization is a significant advantage. It allows you to tailor any theme to your liking. To learn more about syntax highlighting, tokens, and scopes, see VS Code documentation.


More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working as the documentation lead at 𝝠 Expo. Read more about me on the About page.


Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.