How to get the vscode theme color in vscode extensions?

Question

I want to use some color used in current vscode theme in my extension. How do I get the colors?

In other words, I want to match the color of extension using original color with the base vscode windows in run-time of extension.

Answer 1

You can reference workbench colors:

const color = new vscode.ThemeColor('badge.background');

That will give you reference to the color of the current theme's badge.

Note, that you cannot reference TM scope items: #32813

https://code.visualstudio.com/docs/extensionAPI/vscode-api#_a-namethemecoloraspan-classcodeitem-id244themecolorspan

Answer 2

For accessing the theme color on the WebView context, there are css variables generated for all the theme colors. For example, for getting:

editor.background

You can use the css variable:

var(--vscode-editor-background)