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

Visual Studio Code – How can I give different colors for class, enum, and interface names/identifiers in VS Code?

enter image description here

Is there a way to give distinct colors to classes, enums, and interfaces in VS Code for better differentiation? They all look the same, even the color of the variables look the same as the class name color.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Screenshot

    To achieve this, follow these steps:

    1. Click on File in the top menu.
    2. Choose Preferences, then select Settings.
    3. In the top-right corner of the split editor, locate the icon just left of the "Open JSON Settings" button.
    4. Click this icon to open the JSON settings editor.

    Next, add the following code:

    "editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": "entity.name.type.enum",
      "settings": {
        "foreground": "#B8D7A3"
      }
    },
    {
      "scope": "entity.name.type",
      "settings": {
        "foreground": "#269da5"
      }
    },
    {
      "scope": "entity.name.type.interface",
      "settings": {
        "foreground": "#B8D7A3"
      }
    }
  ]
},

    This configuration modifies the color of interfaces, enums, and classes using the provided color codes. you can change the color codes how you want.


  2. 0

    You can use TextMate token scopes, but check also if the language support extension you’re using supports semantic highlighting. If it does, then you can use the standard token types. Ex. in your settings.json file:

    "editor.semanticTokenColorCustomizations": {
    "[your theme name here]": { // remove this theme wrapper to apply for all themes
        "rules": {
            "class": "#ff0000", // TODO
            "interface": "#ff0000", // TODO
            "enum": "#ff0000", // TODO
        },
    },
},

    If not, then you need to figure out what TextMate token scopes are defined by your language support extension(s) for the tokens you want to colour, which you can do with the scope inspector tool. Use the Developer: Inspect Editor Tokens and Scopes command in the command palette to open the scope inspector widget and move the cursor over each of the tokens you are interested in, and then look at what tokens are defined for them. Ex. for TypeScript:

    "editor.tokenColorCustomizations": {
    "[your theme name here]": { // remove this theme wrapper to apply for all themes
        "textMateRules": [
            {
                "scope": "entity.name.type.enum",
                "settings": {
                    "foreground": "#ff0000", // TODO
                },
            },
            {
                "scope": "entity.name.type.class",
                "settings": {
                    "foreground": "#ff0000", // TODO
                },
            },
            {
                "scope": "entity.name.type.interface",
                "settings": {
                    "foreground": "#ff0000", // TODO
                },
            },
        ],
    },
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search