Make VSCode Variables have Colour

Question

I would like to make variables displayed with colours.

This is how it looks:

This is how I want it to be:

Looking through here, I canno

Answer 1

Try this setting in your settings.json:

 "editor.tokenColorCustomizations": {
    "variables": "#f00"
 },

There are a few such simple token color customizations available: variables, comments, keywords, functions, numbers, strings and types. Those only allow setting the color though.

If you use "textMateRules" you can set more properties. For example:

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "comment",
      "settings": {
        "fontStyle": "italic",
        "foreground": "#C69650"
      }
    }
  ]
},

Answer 2

You should be able to add the color in tokenColors to customize the colors (basic example):

SomeTheme.json

{ 
 "name": "Some Theme",
 "type": "dark",
 "colors": {
 ...
},
"tokenColors": [
   {
    "name": "Variables",
    "scope": "variable",
    "settings": {
    "foreground": "#e06c75"
   }
  },
 ]
}

I don't have VSCode, although from looking at another themes JSON it looks similar.

Answer 3

This is working for me. It makes it look like the default Javascript formatting as far as I can see.

In settings.json

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "meta.function-call.generic.python",
        "settings": {
          "foreground": "#DCDCAA"
        }
      },
      {
        "scope": "source.python",
        "settings": {
          "foreground": "#9CDCFE"
        }
      },
      {
        "scope": "punctuation.definition.string.begin",
        "settings": {
          "foreground": "#ce9178"
        }
      },
      {
        "scope": "punctuation.definition.string.end",
        "settings": {
          "foreground": "#ce9178"
        }
      },
      {
        "scope": "punctuation",
        "settings": {
          "foreground": "#dfdfdf"
        }
      }
    ]
}