Colour from custom component is the same as regular HTML tags

[Rem0ld]

As you can see on the picture when we use Login and Register components there're exactly the same colour as other html tags. It can be difficult to see what is what.

With this theme we can see the difference.

Could it be possible to add the same behaviour?

[denys-petryniak]

The following only works for React, doesn't work for Vue templates unfortunately

directly in settings.json file:

  "editor.tokenColorCustomizations": {
    "[Tokyo Night]": {
      "textMateRules": [
        {
          "name": "JSX/TSX Component tags",
          "scope": ["entity.name.tag support.class.component"],
          "settings": { "foreground": "#00fab5" }
        }
      ]
    }
  },

[triplecasquette]

Is it a way for punctuation.definition.tag too? I already get tags differenciated but not for begin or end closing tag color difference.

As you can see the components are greenish and the html tag are blueish but the opening and closing tag stay blue...

[enkia]

The latest version fixes the issue with Volar.