What is the name of the property that is used by my theme to highlight this syntax?

Question

I would like to change the color highlighting of the text in the image that I have posted below, however; I cannot find the name of the token/property that is responsible for its foreground color. When I place my caret in the string, the text is highlighted.

Currently the theme I am using is a VSCode theme: Material Palenight High Contrast.

Answer 1

VS-Code's Scope Inspector Tool:

So there are two things you need to do to attempt to get VSCode to highlight as you would like. First you need to make sure that an extension you installed isn't dynamicly highlighting your text. To do that you need to turn off all your extension. After your extension are turned off check if the highlighting is adjusted the way you like. If it is, then you can turn your extension back on, one by one, testing each one, until you find the one responsible for the highlighting. The other thing you need to do is get the name of the property via VSCode tools, and change the highlighting of your syntax accordingly

To get the name of any property you can use the Scope Inspector tool that comes with VSCode out of the box. Below is a screen shot of what it looks like.

---

---

How to use the Scope-Inspector-Tool:

• First press F1 to open up the commands menu as shown in the photo.

• After the menu drops open from the top of the editor type

Inspect Editor Tokens and Scopes

• After typing the above words into the commands menu it should be the first option. Click it to open it.

• To close it you can press escape, or instead of closing it, after you open it, you can move the position of your cursor within the editor to see the scopes of other properties.

• In order to get the property you desire you need to make sure the cursor is to the left of one of the characters that belongs to the syntax that you want to inspect, or learn the property name of.

Side Note: This tool only works inside of the editor for syntax highlighting that is provided by your current theme. The only exception to this is if your properties are being overridden by an extension, or you currently have them altered in your local, or global vscode '/settings.json' files.

After you get the name of the property you need to adjust your theme in the VSCode settings.json file. I suggest changing it in the local settings rather than global using the filepath:

./.vscode/settings.json

once in you have your settings open use the setting bellow to configure your syntaxes highlighting.

  "tokenColors": [
    {
      "scope": "string", // Enter the syntax-token-scope here
      "settings": {
        "foreground": "#FFBBBB", // Set the text-color here
        "fontStyle": "bold" // set the text style here
      }
    }

    // For changing other syntax just keep adding blocks
   ]

Tip: The properties are actually TextMate token scopes.

For more help on learning the name of token scopes (Syntax Highlighting Properties) you can visit VSCodes official page at the Link Below.

VSCode on Syntax Highlighting <- Great Resource!