[theming] Access theme's colors programmatically

[fabiospampinato]

I think we should add support for accessing theme's colors programmatically.

For instance let's take as an example the popular OneDark Pro theme, I'd like to access colors defined under tokenColors.

My use case: I'm making an extension that decorates some tokens, and I'd like them to have the same color that comments have in my theme, the problem is that the regex I use to find those tokens depends on some configurable value, so I cannot pre-compute it in advance and just put it in a .tmLanguage file.

It's already possible to somehow access colors defined under the colors key, via something like new vscode.ThemeColor ( 'activityBar.background' ), adding support for this sounds like a useful generalization to me.

What do you think?

[aeschli]

I'd rather avoid API that gives out the actual color, but hope that all can be done with color references. That way extensions don't need to worry about listening to theme changes. Yes, sounds like a useful idea but is not an easy addition as token colors are based on text mate theme rules and the text mate scope hierarchy.
If there are more requests, we can certainly look at it. Until then I recommend you to use one of the regular workbench colors, or - added to 1.16 - define a new color in your extension.

[eamodio]

@aeschli while I still think an API for this would be valuable (or at the least an API that tells you if the current theme is light or dark), another alternative that might work in certain scenarios would be to expose the set of theme colors as css variables. This would allow the scenario here: #34411 (comment)

In theory I could use an SVG image, with colors pulled from the css variables, allowing me to get theme adaptable icons into the hovers.

Thoughts?

FYI, this is similar to this request #41785, but not just for the webview, for the editor itself.

[aeschli]

@eamodio Great idea. If using css variables in SVG images works then we should definitely do this. Let's track this in a separate issue!

[DanTup]

#46940 was closed as a dupe of this, but I'm not sure it's the same request. I have remotely-hosted SVGs I want to include in my markdown tooltips. I need to decide between the black and white versions so need to know whether VS Code considers the current theme light or dark. I don't need access to colours and I cannot modify the SVG.

[eamodio]

This issue has come up again. In GitLens, I would like to expose 2 colors (hot and cold versions) for the heatmap that GitLens generates, but I am unable to use theme colors, because I need access to the real color values to generate the full palette of colors required.

[vviikk]

A lot of extensions would benefit from this. Bracket colorizer, jumpy, gitlens and a zillion others. Would be good to implement this.

[aeschli]

@piggyslasher Please explain how/where these extension could profit from this.

There is already a story that extensions can declare a new color (by id) and use it in decorations. Users can redefine these colors in themes.

[fabiospampinato]

My use case: I'm making an extension that decorates some tokens, and I'd like them to have the same color that comments have in my theme, the problem is that the regex I use to find those tokens depends on some configurable value, so I cannot pre-compute it in advance and just put it in a .tmLanguage file

@aeschli that's my use case. Sure, I'm already exporting these colors via the settings and users can override them already. But I can't just pick the colors for them automatically depending on what theme they are currently using. Also if someone uses one of those extensions for rotating themes I can't just expect them to update their settings every time.

[vviikk]

@aeschli A use case in my scenario is I use the extension called "Bracket pair colorizer" with adds colors to matching brackets, like so:

Now, in order for the extension to render the brackets to match my theme, I have to hard code the colors into my settings:

Without this, I would end up with something that looks like this out of the box:

Notice the color of the brackets. They're from the extension's default preferences because the developer can't access the colors. I hope I'm on the right track.

[aeschli]

@piggyslasher Did you see that you can define new colors in the extension's package.json?

"contributes": {
  "colors": [{
      "id": "bracketPairColorizer.bracket1",
      "description": "Color for the outermost bracket",
      "defaults": {
          "dark": "#112233",
          "light": "#ddeeff",
          "highContrast": "foreground"
      }
  }]
}

Users can then customize the color in the workspace.colorCustomization setting and even themes can add a default color.

Color default values can be defined for light, dark and high contrast theme and can either be a reference to an existing color or a color hex value.

[tamuratak]

Hi,
I am working on a PR for , a VSCode extension for LaTeX editing. In the PR, I make a latex preview in hover available rendering math equations in SVG format with MathJax and embedding the dataurl of generated SVG into a markdown text as an image source.

When rendering math equations, I have to tell MathJax which color to use for each rendering. Otherwise rendered equations are invisible on a certain theme. To work around the lack of color API in VSCode, I have to render equations in a WebView process, not in an extension process because we can know colors form css variables in the WebView process, as suggested by @eamodio. So when LaTeX-Workshop users close a WebView pane, my PR does not work. For LaTeX-Workshop users, opening a WebView pane as a pdf viewer is a usual thing. So the lack of color api seems to be a minor thing.

However, the same can be said for other documents having TeX-like equations. Docstring in python, for example. Let's think about API documents with math equations written in docstring. Python libraries should have tons of such API documents. If we want to render equations in them with MathJax, and to display them with API documents in hover, the same problem happens. And, for python programmers while coding, opening a WebView pane is an unusual thing.

Please notice that, for this purpose, extensions don't have to listen to theme changes. Equations are dynamically rendered each time. MathJax is enough fast to do that.

Regards,

On a light theme.

On a dark theme.

[Gruntfuggly]

@aeschli Unfortunately that doesn't allow the colours to be used outside of the vscode API. 😞

[jodinathan]

In my webview extension I would like to use the same color as used in the editor for the language Dart.
From the Token inspect:

I guess this issue prevents me from reaching the color #4EC9B0 right?

[AllanOricil]

do you guys know if my hack is still working? @jodinathan see if you can use my hack to get what you need.

[jodinathan]

do you guys know if my hack is still working? @jodinathan see if you can use my hack to get what you need.

Nope because I am already using webview and it doesn't show theme colors

[TimWhiting]

I think one particular pain point is that using markdown in hovers is completely at odds with using ThemeColor references:

For example, using markdown's html support allows spans and colors in spans, but restricts those spans to only use colors specified in a hash format. #000000 due to the sanitizing done here.

vscode/src/vs/base/browser/markdownRenderer.ts

Line 216 in c61e35a

return !!token.attrs['style'].match(/^(color\:#[0-9a-fA-F]+;)?(background-color\:#[0-9a-fA-F]+;)?$/);

Using markdown's ```lang ``` support is an alternative solution, but means you only can show valid top level constructs! Often types are not!

For example a language server wanting to provide rich text hover tooltips with type information cannot use the same color scheme as the file is highlighted in!!! For the same language!

[roman-rookout]

I add my few cents with an example of our use case.
We have an IntelliJ plugin and decided to develop VS code one.
We are using the webView approach in Intellij, and the plan was to simply reuse it as is.
For the theme, we are using react + @ emotion styled components, so we don't have global css files for components.
We have a global theme provider for the entry point, which accepts a GlobalTheme object. It has a color scheme of general components. Things like background, foreground, Table.selectionColor, Table.headerColor, etc.

On IntelliJ, we didn't have a problem gathering all the data programmatically from the core or custom user-defined theme and updating the global state on theme change.

The point is we want to have a universal way to create a native look for our component library regardless of where it is being loaded. Unfortunately, after reading all the comments, I see there is no direct solution to retrieve colors programmatically. At least we have a listener to see the theme change.

Having colors as CSS props is nice, but it seems like we will have to go with some tricks to achieve what we planned.
I thought maybe create universal aliases for CSS props and refer them in styled components in our library, but it won't really work in the context of IntelliJ (or work very ugly). In any case, we will stick to programmatical update.

@AllanOricil, I guess In the near future, I'll try your hack or it's direction. I didn't find anything better for now :)

[dperezfadon]

you can try to use this hack I created. I'm just not sure if it still works

#32813 (comment)

Hi. Triying to see the hack but the link is not working. I want to use it to create a guttericon using the colors from the theme.

[AllanOricil]

you can try to use this hack I created. I'm just not sure if it still works

#32813 (comment)

Hi. Triying to see the hack but the link is not working. I want to use it to create a guttericon using the colors from the theme.

https://github.com/microsoft/vscode/issues/32813#issuecomment-798680103

[dperezfadon]

Thanks!

[EhabY]

Here's another scenario where this is needed:

We have a WebView with different components and one of them is a code block that displays code with syntax highlighting (we are using Shiki but it could be anything). I need a way to access the token colors of the current theme so that the syntax color matches the one used in the editor. Using CSS variables doesn't help here, we just want to access the tokenColors array JSON as is!

Not sure why this information needs to be hidden...

[Lramseyer]

I have an interesting take on this: I have an extension called vaporview, and it's a digital waveform viewer used for hardware debug. It implements a custom editor (webview) and I would like to be able to access the semantic token colors to display values of single bit, mult bit, analog, and non 2 state values.

While there is a bit of creative liberty I would be taking, I want to make my extension look as if it's an extension of VScode rather than some app, and I want all of the displayed information to follow suit with the color theme.

[brian-pickens]

I'd rather avoid API that gives out the actual color, but hope that all can be done with color references. That way extensions don't need to worry about listening to theme changes. Yes, sounds like a useful idea but is not an easy addition as token colors are based on text mate theme rules and the text mate scope hierarchy. If there are more requests, we can certainly look at it. Until then I recommend you to use one of the regular workbench colors, or - added to 1.16 - define a new color in your extension.

@aeschli Given this was opened back in 2017, do you still feel the same way about this?

My use case involves using Decorations to either lighten or darken the background of certain blocks of text based on the current editors background color. Is there any alternative method to doing something like this?

[aeschli]

@brian-pickens Using a color with transparency doesn't work?

[tlinhart]

...or at the least an API that tells you if the current theme is light or dark...

Do we have API like this yet? My use case is in a Jupyter notebook renderer extension which needs to determine whether the VS Code theme is light or dark to pick the right theme for the rendering library used. I can set the background using --vscode-editor-background CSS variable, but the rest of colors (theme) should be set based on the VS Code theme (light or dark).

[gjsjohnmurray]

@tlinhart I think window.activeColorTheme.kind may be what you are looking for.

[znorman-harris]

...or at the least an API that tells you if the current theme is light or dark...

Do we have API like this yet? My use case is in a Jupyter notebook renderer extension which needs to determine whether the VS Code theme is light or dark to pick the right theme for the rendering library used. I can set the background using --vscode-editor-background CSS variable, but the rest of colors (theme) should be set based on the VS Code theme (light or dark).

I use a renderer messenger to get information about the theme to my notebook renderer notebook renderer.