CODEWITHSUNDEEP
visual-studio-codevscode-extensions
henoc
henoc

Reputation: 323

How to get the vscode theme color in vscode extensions?

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.

Upvotes: 11

Views: 6587

Answers (4)

maninak
maninak

Reputation: 2726

I ended up with this in my vscode extension:

function getCssColor(themeColor: ThemeColor | undefined): string {
  // @ts-expect-error id is aprivate class member but there's no other API currently https://github.com/microsoft/vscode/issues/34411#issuecomment-329741042
  return `var(--vscode-${(themeColor.id as string).replace('.', '-')})`
}

Pretty hacky, but hey, it works! 🤷

For context, in case that helps someone, I use the above to create an HTML icon I end up throwing in the Markdown of the tooltip showin when hovering a TreeItem.

`<span style="color:${getCssColor(icon.color)};">$(${icon.id})</span>`

Upvotes: 0

idanp
idanp

Reputation: 1075

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)

Upvotes: 10

Alex
Alex

Reputation: 67473

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

Upvotes: 11

Matt Bierner
Matt Bierner

Reputation: 65175

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

Upvotes: 3

Related Questions