Skip to content

Support colors for semantic highlighting

Waqar Ahmed requested to merge waqar/syntax-highlighting:semantic-highlight-themes into master

From utilities/kate!164 (closed)

This is a first iteration for adding semantic token colors support in themes. I have two basic goals for this:

  • Do this in a "app" agnostic way, i.e., both KDevelop / Kate can use this however they like
  • Minimize the complexity when creating a theme, don't want too many fields but the end result should still look good.

The official LSP protocol has added support for semantic tokens. We have "tokens" and "token-modifiers". Each token can have n modifiers. This can be solved in two ways:

  1. Have a parent token, and child fields for modifiers:
"class": {
   "modifiers": {
       "private": {
           "color": ...
       }
   }
}

While this looks okay it has some problems:

  • it will result in a rather complicated structure with a huge number of fields.
  • It will complicate the addition of language specific fields I think
  • A lot of the fields may never get used at all or don't even make sense e.g "static" + "namespace"

The second way, 2. Have a combined token + modifier combined field:

function.definition:{}
function.declaration:{}

This is simple, more practical I think while still giving a lot of options to configure the colors.

Below is the full field list. It is mostly taken from https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#semantic-token-scope-map

I have also taken a look at KDevelop's supported fields and most of them can be colored using these fields easily. Also, and it might be subjective, but generally speaking, most of the popular themes revolve around 5 - 7 colors, so even if some field isn't supported here, colors from other fields can be used to give a more "integerated" feel.

    "semantic-tokens": {
        "namespace": {
            "text-color":
        },
        "type": {
            "text-color":
        },
        "type.defaultLibrary": {
            "text-color":
        },
        "struct": {
            "text-color":
        },
        "class": {
            "text-color":
        },
        "class.defaultLibrary": {
            "text-color":
        },
        "interface": {
            "text-color":
        },
        "enum": {
            "text-color":
        },
        "function": {
            "text-color":
        },
        "function.defaultLibrary": {
            "text-color":
        },
        "method": {
            "text-color":
        },
        "macro": {
            "text-color":
        },
        "variable": {
            "text-color":
        },
        "variable.readonly": {
            "text-color":
        },
        "variable.readonly.defaultLibrary": {
            "text-color":
        },
        "parameter": {
            "text-color":
        },
        "property": {
            "text-color":
        },
        "property.readonly": {
            "text-color":
        },
        "enumMember": {
            "text-color":
        },
        "event": {
            "text-color":
        },

Below are some of the fields that I have added in addition to the above. These fields are not supported in the offical LSP spec but clangd seems to provide them anyways:

        "concept": {
            "text-color":
        },
        "parameter.template": {
            "text-color":
        },
        "dependent.type": {
            "text-color":
        },
        "dependent.name": {
            "text-color":
        },
        "inactive.code": {
            "text-color":
        },
        "type.typedef": {
        }
    }

Also, right now there are no colors and the fields are empty but I will fill it all once we have decided the basics.

CC: @cullmann , @dhaumann , @mwolff @brauch

Merge request reports