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)

Does this answer your question? VS Code, changing color theme for variables — CodeWarrior
– CodeWarrior, Commented Apr 13, 2020 at 10:13
@CodeWarrior Thanks for the suggestion. I have read the answears there before posting the question and they were C/C++ related. In my case I would like a plugin or json property that will change the typescript code as well as the html code to display the variables in purple and not in blue/light blue. — Victor Valeanu
– Victor Valeanu, Commented Apr 13, 2020 at 10:19
@VictorValeanu please avoid using images of code. Instead use inline code formatting and paste your actual code. Please read How do I ask a good question?. — Zekros Admines
– Zekros Admines, Commented Apr 13, 2020 at 10:47
@ZekrosAdmines I'm pretty new to asking questions and I couldn't figure out how to color the code in my code template. — Victor Valeanu
– Victor Valeanu, Commented Apr 13, 2020 at 10:50

C.OG · Accepted Answer · 2020-04-13 10:11:18Z

4

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
          }
        },
      ]
  },

answered Apr 13, 2020 at 10:11

C.OG

6,5373 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Victor Valeanu Over a year ago

I have added the plugin and the property in settings.json with a purple Hex code and unfortunately it colored everything but the variables. I liked how the other things were colored before(classes, functions, key words). I just want the variables to be colored differently. Thanks anyway!

C.OG Over a year ago

hmm, then remove the plugin, and find the correct scope for the variables. You can find the correct scope by inspection the editors token and scopes. You can find / add the shortcut by searching for editor.action.inspectTMScopes in your keymaps

Victor Valeanu Over a year ago

After adding all the scopes it turned the variables in purple, but also the equal signs "=" and the function paranthesis "()". It looks like I will have to play around with it until I will get only the right scopes to get colored in purple. Thanks a lot! I will edit your answear with the right scopes after I get it right.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related