DEV Community

Aman Mittal
Aman Mittal

Posted on • Originally published at amanhimself.dev

3

Change comment color visibility in a VS Code theme

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:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "foreground": "#9c9c9c"
        }
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

{
  "editor.tokenColorCustomizations": {
    "[Digi-Angler Dark Theme]": {
      "textMateRules": [
        {
          "scope": "comment",
          "settings": {
            "foreground": "#9c9c9c"
          }
        }
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay