how to color tree view item in VSCode extension

Question

I have implemented my own explorer view for my extension by implementing vscode.TreeDataProvider<> Now I want to customize color of tree view item/node which is my root node (or it can be other specific node as well). To color tree view item , I have tried to implement vscode.FileDecorationProvider interface and register this to vscode.window.registerFileDecorationProvider(); But I am not able to provide custom color for tree view item. Is there any sample code for this ? or any pointer to achieve this?

Answer 1

• Readers of this answer should also refer to how to add and select color for nodes/tree view items in explorer view in my vscode extension

From themeable colors in extensions, you can add a colors section to your package.json:

"contributes": {

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

You can create as many colors aas you need. The id is just a name you can make up. It can then be used in your FileDecorationProvider like so:

  async provideFileDecoration(uri: Uri): Promise<FileDecoration | undefined> {
    const activeEditor = window.activeTextEditor.document.uri;
    if (uri.fsPath === activeEditor.fsPath) {
      return {
        badge: "⇐",
        // color: new ThemeColor("charts.red"), 
        color: new ThemeColor("editorManager.treeItemTextForeground"), // *****
        // color: new vscode.ThemeColor("tab.activeBackground"), 
        // tooltip: ""
      };
    }
    else return null;  // to get rid of the custom fileDecoration
  }

That color theme id will also be available to users of the extension to change in their settings.json colorCustomizations like so:

"workbench.colorCustomizations": {

  "editorManager.treeItemTextForeground": "#f00"
}

So you can create an initial default themeColor that can be applied to a TreeItem label via your FileDecorationProvider, but you don't know what color theme users might be using so they will and should have the ability to change your default colors if necessary in their own settings.