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

tHeSiD · Accepted Answer · 2020-06-12T21:13:11.340

6

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",
  }

edited Jun 12 '20 at 21:13

answered Jun 12 '20 at 21:06

tHeSiD

4,587
4
29
49

If you want to do it via semantics here https://stackoverflow.com/questions/61802737/vs-code-how-to-use-a-semantic-token-in-color-theme/61816913#61816913 – tHeSiD Jun 12 '20 at 21:15
Thank you. It worked. I have one question: It worked without `"editor.semanticHighlighting.enabled": false`. Also here https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme no info about that step. Will there be any problem if I leave it enabled? Is yes, what problem can appear? – vasili111 Jun 12 '20 at 22:01
As of now semantic highlighting is only available for TS and JS in vscode by default and if your language server (language specific extension) supports it. So if you don't see semantic scopes when you inspect them, that setting will not affect anything! :) In the future if your language server adds support for semantic highlighting, those settings will override your textmate rules. What lang is this btw? More here https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview – tHeSiD Jun 12 '20 at 22:08
Also as I underrated value of `name` like as here `"name": "Deleted"` is `"Deleted"` can be any and does not affect on anything, correct? – vasili111 Jun 13 '20 at 01:41
Yes, its just a description for the rule. You can use it to name your rules so that they can be easily found later. – tHeSiD Jun 13 '20 at 01:46

Override default syntax coloring in VS Code

1 Answers1