Adopt semantic highlighting

[aeschli]

Since 1.43, VSCode themes can take advantage of semantic highlighting.

Every theme controls whether semantic tokens are enabled. So far, only built-in themes have it enabled and I filed this issue to ask you to opt-in for the Noctis themes as well.

Adoption is easy and there are new cool styling possibilities.

To turn on semantic highlighting for a theme, all you have to do is put "semanticHighlighting": true in the theme's definition file.

There's a good chance that no further change to the theme is needed (thanks to a default mapping from semantic tokens to TextMate scopes (if not, I'd be interested to know, so I can improve the defaults further)).

But, more interestingly, themes can tune and go wild by defining new styling rules against the semantic tokens:

"semanticTokenColors": {
    "variable.readonly": "#ff0000", 
    "parameter": { "fontStyle": "underline" },
    "*.declaration:java": { "fontStyle": "bold" }
} 

Check out our Semantic Highlighting Wiki and the Semantic Highlighting Guide for more details and feel free to ping me in this issue if I can help.

Thanks for the great work and looking forward to semantic highlighting in your theme.

[liviuschera]

I definitely plan to implement it. Let me have a look and I'll get back to you. Thank you for the great feedback and info mate.

Cheers!

[liviuschera]

Here is TextMate version:

With "semanticHighlighting": true

When Developer: Inspect Editor Tokens and Scopes command is activated:

From what I can see I would need to redo most of the token color definitions.

However, it seems that other than enabling semantic highlighting, none of the built in themes has any specific semantic token definition.They are still using TextMate theme rules. E.g. https://github.com/Microsoft/vscode/blob/master/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json

Can you please point out a theme that adopted and leverages the power of semantic tokens, as I would like to use it as an example?

[aeschli]

We don't have any such example yet. So far I focused on improving the default mappings (semantic tokens -> TextMate scope) so that turning on the semantic property flag works smoothly.

Can you let me know which color change in your example you don't like? In theory they should be for the better :-)

[liviuschera]

I like the new standard semantic tokens and token modifiers as it makes higligting more consistent, I'm quite happy with the changes I can make using "semanticTokenColors": {}. Initially I was bummed because I coudn't target support.class.consoleanymore, but I think it's for the best as the reading code becomes less distracting.

There is only one other thing I would've liked to be able to target and that is meta.object-literal.key. It would be fantastic if there was a way to do it with the new rules.

Also can semantic tokens be scoped/grouped the way textMate ones are? This would help me a lot to genenerate semantic synatx colors.

Kudos for the excelent work.

[aeschli]

@liviuschera Thanks for the feedback. I have https://github.com/aeschli/typescript-vscode-sh-plugin/issues/12 for meta.object-literal.key.

[0A7V9A]

@liviuschera @aeschli Export, Import and Return and some words are in bold (INSTEAD OF ITALIC) because of these two extensions: Babel Javascript (https://github.com/michaelgmcd/vscode-language-babel) and Babel ES6/ES7 (https://github.com/dzannotti/vscode-babel) It's so sad :( How can I fix it?

Thanks

[mattfbacon]

BTW, if you're a fan of semantic highlighting, I've converted Noctis Lux and Minimus to semantic highlighting only. https://github.com/mattfbacon/vscode-theme