9

I would like to make variables displayed with colours.

This is how it looks:

Python

This is how I want it to be:

Variable Colored

Looking through here, I cannot find any settings that allow me to change this.

Sash Sinha
  • 18,743
  • 3
  • 23
  • 40
IllustriousMagenta
  • 514
  • 1
  • 4
  • 19

4 Answers4

16

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"
      }
    }
  ]
},
Mark
  • 143,421
  • 24
  • 428
  • 436
  • Thanks for this, it works for some things, but not everything. For instance, [this](https://i.imgur.com/xmw07V2.png), shows the variable `self` turned red, but the `search_obj` is not, nor is the `get_key` part, which is supposed to have function applied to it - the function does apply to the definition only. – IllustriousMagenta Dec 09 '17 at 06:39
  • You can also try https://stackoverflow.com/questions/47272835/how-can-i-make-a-vscode-theme-recognize-c-sharp-interfaces/47274837#47274837 more detailed scopes might help you achieve what you want. – Mark Dec 09 '17 at 17:23
9

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"
        }
      }
    ]
}
Austin Gomez
  • 91
  • 1
  • 1
0

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.

l'L'l
  • 44,951
  • 10
  • 95
  • 146
0

try this:

{
            "scope": [
             "variable.other.readwrite", 
             ],
             "settings": {
             "foreground": "#ffffff",
             }
        },
armin
  • 19
  • 5