Home > Software design >  Custom Colors on ThemeColor class
Custom Colors on ThemeColor class

Time:12-16

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.

CodePudding user response:

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

CodePudding user response:

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.

  • Related