1

Question has been asked before, but with no answers.

I have this snippets in html and ts component files:

enter image description here

enter image description here

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

Victor Valeanu
  • 398
  • 6
  • 20
  • Does this answer your question? [VS Code, changing color theme for variables](https://stackoverflow.com/questions/54954433/vs-code-changing-color-theme-for-variables) – CodeWarrior Apr 13 '20 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 Apr 13 '20 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?](https://stackoverflow.com/help/how-to-ask). – Zekros Admines Apr 13 '20 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 Apr 13 '20 at 10:50

1 Answers1

3

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
          }
        },
      ]
  },
C.OG
  • 6,236
  • 3
  • 20
  • 38
  • 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! – Victor Valeanu Apr 13 '20 at 10:29
  • 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 – C.OG Apr 13 '20 at 10:37
  • 1
    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. – Victor Valeanu Apr 13 '20 at 10:53