How to get the vscode theme color in vscode extensions?

4
votes

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.

3
visual-studio-codevscode-extensions
Do you want to get color once? Do you want to get all colors from theme to create your own? Do you want to get color in run-time from extension? - Alex
I want to get them in run-time in order to make matched color between current theme and the extension. - henoc

3 Answers

8
votes

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

5
votes

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)
3
votes

When you have your desired color scheme in your VS Code instance, run the Developer: Generate Color Theme From Current Settings command. This will generate a color theme file that you can then publish in your own extension