VS Code : how to use a semantic token in color theme?

Question

I try to update a color theme I made (simple focus) for VS Code, but I never found any guide for theme creators on how to use the new semantic tokens...

I have set "semanticHighlighting" : true in my theme

For example I want to color classes, and there are specific textMate scopes for class definition (entity.name.type.class.js) and creation (entity.name.type.js), but when using a class otherwise – like MyClass.props = {} – the only scope is a generic variable.other.object.js which I don't want to touch for it messes others things. So when I inspect scopes, I see the semantic token class that also match all classes definitions and creation, but how are we suppose to use this?

I tried naively to just add a scope "class", which isn't working.

All I can find about semantic tokens is related to creating a custom language, nothing for theme creators, so my guess was that it was just suppose to work like textMate scopes, and yet it doesn't. Please someone enlighten me!

inspecting scopes

Duplicate of https://stackoverflow.com/questions/50994340/vs-code-how-to-set-semantic-syntax-coloring-like-eclipse-does-default-syntax-c/61464234#61464234 and others. — Mark, Jun 12 '20 at 21:39

tHeSiD · Accepted Answer · 2020-05-15T10:23:03.147

In your theme file, you need to add the semanticTokenColors, these as far as I have seen will override the colors you have set in tokenColors. The syntax is similar to tokenColors but you can also specify modifiers for each token like class.defaultLibrary or class.declaration you can also set all modifiers at once by setting *.declaration

Here is a sample

   "semanticTokenColors": {
      "namespace": "#ffffff",
      "type": "#ffffff",
      "struct": "#ffffff",
      "class": "#ffffff",
      "class.readonly": {
         "foreground": "#ffffff",
         "fontStyle": "bold italic"
      },
      "*.declaration" : {
         "fontStyle": "bold"
      },
      "*.readonly" : "#ffffff",
  }

You can find all the scopes and modifiers here

Standard semantic token types:

namespace
type, class, enum, interface, struct, typeParameter
parameter, variable, property, enumMember, event
function, member, macro
label
comment, string, keyword, number, regexp, operator

Standard semantic token modifiers:

declaration
readonly, static, deprecated, abstract
async, modification, documentation, defaultLibrary

VS Code : how to use a semantic token in color theme?

1 Answers1

Linked