VS Code extension: setting custom semantic token colors

Question

Is it possible to modify the styling of semantic token modifiers received from LSP inside an extension without the need to create custom themes?

I am able to use editor.semanticTokenColorCustomizations in my settings.json file and add the custom rules I want, but this setting is not available for configurationDefaults in the package.json file for a VS Code extension.

So the following snippet does work in settings.json, while the same does not work in package.json for an extension under the configurationDefaults field.

"editor.semanticTokenColorCustomizations": {
  "enabled": true,
  "rules": {
    "*.declaration": {
      "bold": true
    },
    "*.definition": {
      "italic": true
    },
    "*.readonly": "#ff0000"
  }
}

Is there another way?

Ideally, I would like to change both token types and token modifiers for the language I introduce with the extension, but I don't want to create custom themes a user would need to use to get proper highlighting.

Note: I am forced to stick with the token types and modifiers supported by the language-client provided by Microsoft. Those are defined in the LSP specification.

Edit: I use LSP with semantic tokens to get the token types and modifiers of a file. This should be similar to using TextMate grammar. The problem I have, is applying correct styling/highlighting to those tokens. Since the language client limits the usable tokens, I apply a mapping between tokens of my language and the default LSP ones.

Meaning: token modifier declaration is in fact bold in my markup language

Answer 1

You can introduce all your custom semantic tokens without the need to restrict yourself to the built-in ones. Personally I prefer the way proposed in the official sample file: semantic-tokens-sample.

As for the styling, you can easily modify an extension incl. semantic token colors via the package.json file as follows.

{
    ...
    "editor.semanticHighlighting.enabled": true, // not necessary, just make sure it is not disabled
    "contributes": {
        "semanticTokenTypes": [ // not necessary if you use own parsing with "DocumentSemanticTokensProvider"
            {
                "id": "myToken",
                "superType": "myToken",
                "description": "myToken"
            }
        ],
        "configurationDefaults": {
            "editor.semanticTokenColorCustomizations": {
                "rules": {
                    "comment": "#969896",
                    "string": "#B5BD68",
                    "myToken": "#323232" // custom
                }
            }
        }
    }
}

For that I personally introduced myToken in the legend in an extension.ts file.

To check if your semantic token logic is working, you can use the [view/Command Palette/>Developer: Inspect Editor Tokens ans Scopes] functionality that will reveal what semantic scope is attached to your keyword, if any.

If the provided code is not working for you, check your package.json and make sure the language settings are all correct: settings that could be of relevance for you:

{
    ...
    "activationEvents": ["onLanguage:myLanguage"], // make sure your extension is activated
    "contributes": {"languages": [{"id": "myLanguage", "extensions": [".myLang"], "configuration": "./language-configuration.json"}]}
}

Furthermore check if your User / Workspace settings are interfering with your package.json settings.