How to "override" semantic token type of VSCode theme

Viewed 1022

I would like to know how to tweak my VSCode theme (One Dark Pro), a theme with semantic highlighting.

I cannot override some of its semantic token types.

With most themes I would write this in settings.json:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Javascript - Variable/object",
        "scope": [
          "variable.other.object.js"
        ],
        "settings": {
          "foreground": "#c7452e",
          "fontStyle": "bold italic"
        }
      }
    ]
  }
}

But with this theme (and also other ones with semantic opinion) I cannot override it, as if I needed to use !important in CSS.

So this is the result of my token and scope inspection after my rule.

enter image description here

As you can see, my settings are indeed read but are apparently not 'specific' enough as to beat the semantic interpretation or overridden by it, and are disregarded (last three lines) and instead the modifying semantic token type takes prevalence.

Is there a way to do this per individual textmate scope (i.e. without losing the rest of the semantics of that wonderful theme) like if I just want to change the color of that particular item?

1 Answers

So when syntax is highlighted by a theme, settings.json files have priority over the syntax highlighting implemented by your set theme, however, if you activate semantic highlighting, then the theme highlights your syntax, your settings.json file takes priority & overrides the theme, and then the language server has priority over the theme and over the local user, & workspace, settings.json files. So in other words, you can't override the token because the token is being overridden already by a scope that has higher priority than your configuration file. Now with that said, if you don't like it, just turn Semantic highlighting off (code snippet below shows the configuration for turning off semantic highlighting).

    /** @file "./.vscode/settings.json" */

    {
        "editor.semanticHighlighting.enabled": false
    }

Related