Question 134983 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – Custom Colors on ThemeColor class

I have trying to set a custom color to a FileDecorationProvider class, the color should be set to text. I have been using charts colors but that limits me to like 6 colors.

The below method works but I am limited to chart colors(like 6 of them)

async provideFileDecoration(uri: vscode.Uri): Promise<FileDecoration | undefined> {
    if (uri.fsPath === '\temp11') {
         return {
             color: new ThemeColor("charts.red")
         };
    }
        
    return undefined;
}

But I would like to something like this:

return {
    color: new ThemeColor("#0000ff")
};

Use HexCode to set a custom color.

Tags:

2

Answers


  1. 0

    The ThemeColor API only supports workbench colors (https://code.visualstudio.com/docs/getstarted/theme-color-reference), which means hex values are not allowed. And since provideFileDecoration only works with ThemeColor and not string, you won’t be able to use hex values at all.

    You could however, define a new color for your extension (via https://code.visualstudio.com/api/references/contribution-points#contributes.colors), so the end user will be allowed to define its own color, via hex values.

    Hope this helps

    Login or Signup to reply.
  2. 0

    As @alefragnani suggests, you can define a new color in the package.json like this:

    "contributes": {

    "colors": [
        {
            "id": "editorManager.treeItemTextForeground",   // your custom name here
            "description": "Color for a TreeIteem label",   // your description
            "defaults": {
                "dark": "#00ccff",   // your own defined colors, not just references to other exisiting themeColors
                "light": "#00ccff",
                "highContrast": "errorForeground"  // you can also use existing color theme references here
            }
        }
    ]
}

    and then use it wherever a themeColor is accepted:

    color: new ThemeColor("editorManager.treeItemTextForeground")

    The end user will also be able to modify that color in their settings colorCustomizations.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search