Angular - How to change variable's color in html file in VS Code?

Question

Question has been asked before, but with no answers.

I have this snippets in html and ts component files:

I would like to have the variables: allowNewServer and serverCreationStatus colored purple.
My VS Code plug-ins: Angular Essentials (Version 9)

Answer 1

I use this VS Code plugin that adds syntax highlighting to angular html templates.

To further enhance to color it specifically purple, you'll have to tweak your theme or editors textMateRules settings.

In your settings.json :

"editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "scope": [
            "expression.angular-interpolation",
            "source.directive.angular"
          ],
          "settings": {
            "foreground": "purple" // or use your desired hex code
          }
        },
      ]
  },