Customize link / URL syntax highlighting color in Visual Studio Code?

Question

I am creating my own Visual Studio Code theme, and I want the links / URLs to have their own independent color in HTML and CSS. From what I have read it seems that this was once accomplished with detected-link, but should now use linkForeground. I have tried both in the theme.json file I created, but neither seems to work. Does anyone know how to customize link / URL syntax highlighting color in Visual Studio Code .json file?

This is what I tried...

{ "name": "goto-definition-link", "scope": "linkForeground", "settings": { "foreground": "#4B83CD" } },

Here is one of the discussions that I am referencing above.

https://github.com/Microsoft/vscode/issues/18378

Answer 1

There are two parts to this: using syntax colors to set the color of links in the grammar and using workbench colors to set the color of a clickable link when the user hovers over it.

To set the syntax colors of a link, you need to determine a unique scope for the links and write a TextMate colorization rule that uses this scope. For example, using the Developer: Inspect TM Scope command in VS Code, I can see the css url() links have a scope of variable.parameter.url.css, so my theme would be:

{
    "type": "dark",
    "tokenColors": [
        {
            "scope": [
                "variable.parameter.url.css",
            ],
            "settings": {
                "foreground": "#f0f"
            }
        }
    }
}

The second one is easier; just use the editorLink.activeForeground color theme setting:

{
    "type": "dark",
    "colors": {
        "editorLink.activeForeground": "#ff0",
        ...
    },
    "tokenColors": [ ... ]
}

This changes the color of the link when you hover over it. It cannot be changed per language.