Question 130085 in Visual Studio Code Question posted in
View the official documentation.

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

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.

Visual Studio Dark
Default Dark+

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

Material before
Material after

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Based on @user's answer and TextMate scope inspector I came to the following solution. Because I use TypeScript, I had to add the corresponding scopes for that too.

    final solution

    "editor.tokenColorCustomizations": {
  "[Community Material Theme Darker High Contrast]": {
    "comments": "#058C42",
    "variables": "#ffe3fb",
    "textMateRules": [
      {
        "scope": [
          "variable.other.object.property.js",
          "variable.other.object.property.ts"
        ],
        "settings": {
          "foreground": "#e0c0db"
        }
      },
      {
        "scope": [
          "variable.other.property.js",
          "variable.other.property.ts"
        ],
        "settings": {
          "foreground": "#ea92db"
        }
      }
    ]
  }
},

    I loved the base theme but it uses too much white. This will improve visibility for me. 🙂


  2. 0

    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
    }
}]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search