How can I change the color of JS variables without changing the color of their keys in VS Code?

Question

I noticed that the Default Dark+ theme has a different color for variables than the Visual Studio Dark theme. Dark+ has two different colors for the variable and member.

I personally use the Community Material Theme Darker High Contrast theme and would like to override this setting. But if I set the variable color i get the following result:

"editor.tokenColorCustomizations": {
  "[Community Material Theme Darker High Contrast]": {
    "variables": "#ff0000"
  }
}

How can I set the variable color to only affect it at declaration and reference like in Default Dark+?

TL;DR how can I set different colors for test and key on line 2.

Answer 1

Start by using the builtin TextMate scope inspector tool.

Using it, you'll find that your test object has the semantic token type variable.other.constant.object.js and variable, and your key field has variable.other.property.js.

So for example, inside your "[Community Material Theme Darker High Contrast]": {:

"textMateRules": [{
    "scope": "variable", // or variable.other.constant.object.js
    "settings": {
        "foreground": "#FF0000", // TODO
    }
},{
    "scope": "variable.other.property.js",
    "settings": {
        "foreground": "#00FF00", // TODO
    }
}]