2

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

1 Answer 1

2

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"
            }
        }
    }
}

enter image description here

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.

enter image description here

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.