How to replace one color in my theme vscode

Question

I have a one color which makes me annoyed and I want to change it but don't know how to find it and change it with keeping the rest same.

Want to change the green color showed up below.

Answer 1

How to replace one color in VSCode

Sometimes you may not like a certain color of the current theme, so VSCode allows us to customize some colors to override part of the color theme.

Inspect Editor Tokens and Scopes

VS Code's tokenization engine is powered by TextMate grammars. VSCode color theme extension author use a built-in tool to view the semantics. We can use it too, the settings we're going to do can be thought of as extending the color theme. Don't worry, our job is simple.

I'll show you how to modify the color of string.

At first, open Command Palette. Enter keyword "Inspect Editor Tokens and Scopes" to select and run the tool. Move the cursor to the code and we'll see a panel similar to the following picture.

To solve the problem quickly, now we're just looking at the last line of the panel: `foreground string { "foreground": "#CE9178" }. What we need is the middle part which is "string". It is a scope in action for this semantic stake. The scope in action must be a part of the textmate scopes above.

Token Color Customizations

Next, let's open the file settings.jsonand add a new setting: editor.tokenColorCustomizations.

Keep the key of tokenColorCustomization same as the color theme you are using. In fact, you don't need to enter it manually, VSCode will list all of your color themes at the moment you enter the double quotes.

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "[CUSTOM NAME]",
          "scope": "string",
          "settings": {
            "foreground": "#00FFFF"
          }
        }
      ]
    }
  }

Then we'll see that the color of string in editor has immediately changed.

It's so easIy, now you can do it yourself. If you have questions about how to get the scope, check out the information in the section below.

How to get the scope

I'm not going to explain in detail how to get the scope. Below are more examples to help you understand how to get the scope. If you still have questions, refer to the relevant information, such as semantic-highlight-guide.

No theme selector

When no theme selector, you can use textmate scopes above.

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "source.python",
          "scope": "source.python",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
      ]
    }
  }

A precise scope

It looks like a tree structure, progressive layer by layer. The more to the right, the more precise the semantics.

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "entity function name",
          "scope": "entity.name.function",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
      ]
    }
  }

More colors

Define more color rules.

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "entity function name",
          "scope": "entity.name.function",
          "settings": {
            "foreground": "#FEAA4F"
          }
        },
        {
          "name": "string",
          "scope": "string",
          "settings": {
            "foreground": "#45FD36"
          }
        }
      ]
    }
  }

Precise control of the color range

If you need more precise control over the range of color effects, try textmate scopes above. The higher scope has higher priority. You can use a portion of the scope.

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "function-call in python",
          "scope": "meta.function-call.python",
          "settings": {
            "foreground": "#FEAA4F"
          }
        }
      ]
    }
  }

or

  "editor.tokenColorCustomizations": {
    "[Default Dark+]": {
      "textMateRules": [
        {
          "name": "function-call generic",
          "scope": "meta.function-call.generic",
          "settings": {
            "foreground": "#FEAA4F"
          }
        }
      ]
    }
  }

or others.