search

liviuschera / noctis

Noctis is a collection of light & dark themes with a well balanced blend of warm and cold colors
https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis
MIT License
554 stars 67 forks source link

JavaScript property color mismatch #4

Closed vinnlee closed 5 years ago

vinnlee commented 5 years ago

I noticed there is a difference in color of property in javascript, like the image below

image

liviuschera commented 5 years ago

Hey mate! That was a good catch.

I had a cursory look over the issue and apparently VS Code's JavaScript language grammar fails to pick up DOM properties in a consistent manner.

I'll investigate further and see how can I fix it.

liviuschera commented 5 years ago

I have released a fix for this issue in v3.19.3

I would appreciate if you woud try it and let me know how it works for you.

vinnlee commented 5 years ago

Hmm.... 🤔 I just updated the theme and have a look at my js source code. The issue is partial fixed, but it seems inconsistent, some properties still doesn't have same color, Don't know this is by the theme or vscode itself 🤔, I have tested with other theme but doesn't see this issue. 🤨

liviuschera commented 5 years ago

Thanks for your feedback, mate.

I had a proper look into the matter and the conclusion is that VS Codes's JavaScript language grammar is broken when it comes to properly highlight DOM object properties.

Because I wanted DOM objects like document, screen, window and DOM properties like height, backgroundPosition, backgroundImage, name, location, etc. to stand out I decided to highlight them with the Desert Sand color. I'm using this color exclusively for DOM highlighting.

I would have liked that all the DOM properties in the screenshot you provided to be highlighted in Desert Sand color. Unfortunately, as I said, right now VS Code JS grammar picks up only partially DOM object properties. That's why backgroundSize and backgroundPosition were not properly highlighted and that’s why you noticed the highlighting inconsistencies.

Having said that I still want that DOM object related syntax to be highlighted with Desert Sand color, but to get rid of the blatant mismatches I narrowed down the scope selectors that are being picked up by VS Code’s highlighter.

As an example, the highlighting of location.pathname , document.title and name is intentional.

github noctis issue 4

For more background info have a look here.

I hope this sheds some light on this topic if not please feel free to ask or add any thoughts you might have.

Cheers!