React Custom Elements vs HTML Elements (Same Colour)

[AndrewJacobVlietstra]

Hello, I love using this colour theme every day working on HTML/CSS and JavaScript for my day job. I recently started learning React and I have one gripe when working with React and that's that the custom components/elements you make in the JS file is the same colour as built-in HTML elements.

I believe the main difference separating the scopes of built-in HTML and custom components when using the inspector tool is that the custom components have a support.class.component.js textmate scope. (See picture Below)

It would be awesome if these could be different colours, like the custom components could be an aqua colour or something. It just kinda sucks to see a bunch of red when you have a lot of custom components and HTML going on in your editor and its a little tough to spot your custom components sometimes.

Thanks for your time!

[AndrewJacobVlietstra]

So I ended up solving the problem myself, all you have to do go to Users->"Your Username"->.vscode->extensions and in there open the monokai pro folder, go into "themes", and edit the monokai pro json file in vscode or something.

Using the token inspector tool I searched up the scope of the jsx custom components which is "entity.name.tag support.class.component" and then made a new rule object separating regular "entity.name.tag" which are the built-in html elements from the react custom components. And made the colour a nice greeny aqua (See below)

Here is what the json file looks like, with the rules I changed up.

This is pretty awesome, so if you have a favourite colour theme you like you can stick with it and just change the things you want using the inspector tool, finding those scopes in the json theme file and changing up the colours or adding new rules to separate scopes and add colours to more specific scopes!

[BillyOgilvie]

Thanks! I implemented this for myself too. I chose the Monokia Green (#a9dc76) for custom components to try and keep in line with the rest of the theme.

I wanted to try and fix this on a branch, but the json files don't seem to be in this repo

All the theme colors are here if you want to have a play and see which you like best https://kolormark.com/brands/monokai

[mikestecker]

@AndrewJacobVlietstra do you mind pasting in the two lines you added here?

[AndrewJacobVlietstra]

@AndrewJacobVlietstra do you mind pasting in the two lines you added here?

Yea for sure, here are the two lines, hope this helps!

{ "scope": ["entity.name.tag"], "settings": { "name": "Built-in HTML", "foreground": "#ff6188" } }, { "scope": ["entity.name.tag.js.jsx support.class.component.js.jsx", "entity.name.tag support.class.component", "source.vue support.class.component"], "settings": { "name": "Custom Component", "foreground": "#00fab5" } },

[mikestecker]

@AndrewJacobVlietstra do you mind pasting in the two lines you added here?

Yea for sure, here are the two lines, hope this helps!

{ "scope": ["entity.name.tag"], "settings": { "name": "Built-in HTML", "foreground": "#ff6188" } }, { "scope": ["entity.name.tag.js.jsx support.class.component.js.jsx", "entity.name.tag support.class.component", "source.vue support.class.component"], "settings": { "name": "Custom Component", "foreground": "#00fab5" } },

Awesome, thanks for this!

I actually just discovered you can override the theme settings without having to edit the theme. You can do this directly in your settings.json file:

"editor.tokenColorCustomizations": {
    "[Monokai Pro (Filter Spectrum)]": {
      "textMateRules": [
        {
          "scope": ["entity.name.tag"],
          "settings": { "foreground": "#ff6188" }
        },
        {
          "scope": [
            "entity.name.tag.js.jsx support.class.component.js.jsx",
            "entity.name.tag support.class.component",
            "source.vue support.class.component"
          ],
          "settings": { "foreground": "#00fab5" }
        }
      ]
    }
  },

Just change out [Monokai Pro (Filter Spectrum)] for whatever version you are using.

[faforus]

"[Monokai Pro (Filter Spectrum)]": {

I am sorry but I cannot figure this out. If my version is v1.2.0 what exactly do I write in this line?

So far I tried the following combinations "[Monokai Pro 1.2.0]": { "[Monokai Pro v1.2.0]": { "[Monokai Pro (1.2.0)]": { "[Monokai Pro (v1.2.0)]": { and others...

[johannesschaffer]

@faforus Should be autocompleted. Have you installed it and set it as theme in settings.json?

[faforus]

I have it installed and working, I cannot however change the color as described above. The person above explains to 'Just change out [Monokai Pro (Filter Spectrum)] for whatever version you are using.' but whatever I type in there has no effect. Color does not change.

[johannesschaffer]

Like I said, you shouldn't need to try out / type in various combinations of name and version. VSCode should autocomplete available themes.

[faforus]

Oh, thank you, it does work like a charm!

[johannesschaffer]

Great! It would probably be helpful for others as reference, if you posted your working code snippet here...

[faforus]

Here is the modified second line of the code that mikestecker provided that works in my case. "[Monokai Pro]": { The version is simply Monokai Pro without any version numbers.