Override default syntax coloring in VS Code

Question

I am trying to override default syntax coloring in VS Code. Particularly instead of #a31515 (redish) color in default theme "Light (Visual Studio)" I want to see #036A07 (green) color.

For that, in editor.tokenColorCustomizations in my user settings settings.json file I changed this default values:

"editor.tokenColorCustomizations": null

to:

"editor.tokenColorCustomizations": {
            "markup.deleted": "#036A07",
            "meta.preprocessor.string": "#036A07",
            "string": "#036A07",
            "entity.name.operator.custom-literal.string": "#036A07",
            "meta.embedded.assembly": "#036A07"
        }

I saved settings.json file and restarted VS code, but I do not see any changes in code highlighting (same redish color as was before):

Question: What is the problem with my code and what is the correct code for doing it?

From @tHeSiD answer below I created this code and it worked:

"editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "name": "Single Quotes",
          "scope": "string.quoted.single.python",
          "settings": {
          "fontStyle": "",
          "foreground": "#036A07"
          }
        }]
      }

For setting only for particular theme:

"editor.tokenColorCustomizations": {
      "[Visual Studio Light]": {
        "textMateRules": [
          {
            "name": "Single Quotes",
            "scope": "string.quoted.single.python",
            "settings": {
            "fontStyle": "",
            "foreground": "#036A07"
            }
          }]
      }
  }

Also it worked without setting editor.semanticHighlighting.enabled to false

user_66384 · Answer

You have to add per scope definitions like this.

To get the scopes for what you want - Use the command palette (CTRL SHIFT P) and then select Developer: Inspect Editor Tokens and Scopes

  "editor.tokenColorCustomizations": {
     "textMateRules": [
        {
          "name": "Deleted",
          "scope": "markup.deleted",
          "settings": {
            "fontStyle": "italic",
            "foreground": "#036A07"
          }
        },
        {
          "name": "Strings",
          "scope": "meta.preprocessor.string",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "name": "ThisIsJustANameForReference",
          //You can use coma separated scopes to group them into one
          "scope": "entity.name.operator.custom-literal.string, meta.embedded.assembly",
          "settings": {
            "foreground": "#036A07"
          }
        },
      ]
  },

These are textmate rules, you have to disable Semantic Highlighting for this to work. To do that add "editor.semanticHighlighting.enabled": false

If you want to color everything via Semantic Highlighting though, you have to use something like this.

"semanticTokenColors": {
      "namespace": "#ffffff",
      "type": "#ffffff",
      "struct": "#ffffff",
      "class": "#ffffff",
      "class.readonly": {
         "foreground": "#ffffff",
         "fontStyle": "bold italic"
      },
      "*.declaration" : {
         "fontStyle": "bold"
      },
      "*.readonly" : "#ffffff",
  }

Override default syntax coloring in VS Code

1 Answers