Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[theming] Access theme's colors programmatically #32813

Open
fabiospampinato opened this issue Aug 19, 2017 · 83 comments
Open

[theming] Access theme's colors programmatically #32813

fabiospampinato opened this issue Aug 19, 2017 · 83 comments
Assignees
Labels
api-proposal feature-request Request for new features or functionality themes Color theme issues
Milestone

Comments

@fabiospampinato
Copy link
Contributor

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?

@vscodebot vscodebot bot added the workbench label Aug 19, 2017
@aeschli
Copy link
Contributor

aeschli commented Aug 21, 2017

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 aeschli self-assigned this Aug 21, 2017
@aeschli aeschli added themes Color theme issues feature-request Request for new features or functionality labels Aug 21, 2017
@aeschli aeschli added this to the Backlog milestone Aug 21, 2017
@aeschli aeschli changed the title Access theme's colors programmatically [themeing] Access theme's colors programmatically Aug 21, 2017
@aeschli aeschli changed the title [themeing] Access theme's colors programmatically [theming] Access theme's colors programmatically Sep 15, 2017
@bpasero bpasero removed the workbench label Nov 16, 2017
@eamodio
Copy link
Contributor

eamodio commented Mar 1, 2018

@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
Copy link
Contributor

aeschli commented Mar 2, 2018

@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
Copy link
Contributor

DanTup commented Apr 3, 2018

#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
Copy link
Contributor

eamodio commented Jun 20, 2018

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
Copy link

vviikk commented Jun 26, 2018

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

@aeschli
Copy link
Contributor

aeschli commented Jun 26, 2018

@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
Copy link
Contributor Author

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
Copy link

vviikk commented Aug 17, 2018

@aeschli A use case in my scenario is I use the extension called "Bracket pair colorizer" with adds colors to matching brackets, like so:
image
Now, in order for the extension to render the brackets to match my theme, I have to hard code the colors into my settings:

image

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

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
Copy link
Contributor

aeschli commented Aug 20, 2018

@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
Copy link
Contributor

Hi,
I am working on a PR for LaTeX-Workshop, 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.

oct-13-2018 10-46-17

On a dark theme.

oct-13-2018 10-48-16

@Gruntfuggly
Copy link

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

@znorman-harris
Copy link

znorman-harris commented May 23, 2022

Any thoughts or updates about being able to access this information for extension developers?

Edit: This is the API I'm looking for but not seeing (getColor that is): #32813 (comment)

For my use case, I'm interested in getting access to the theme colors in order to adjust content that I'm writing to the debug console. I want to be able to match/replicate some of the debug colors (i.e. debugConsole.infoForeground) that there's currently no way to access.

I feel like I'm going to have to borrow from the hacky method mentioned above using a webview in order to get these, but that seems clunky and not a great user-experience having a webview panel open every time you open VSCode.

@AllanOricil
Copy link

AllanOricil commented May 23, 2022

@znorman-harris that hack is horrible, but it was the only way I found. I forgot to mention that on Windows it takes a lot more time to retrieve colors. Users can see the webview opening and closing :/

@ghaschel
Copy link

All I want is to be able to get the current theme scope colors. Eg.:

I want to find out programmatically what is the color my current active theme uses for "string.regexp". There should be an API for that

@AllanOricil
Copy link

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

#32813 (comment)

@amyXia1994
Copy link

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

#32813 (comment)

Thanks! That works for me, and the solution just suits me since it provides a webview of my configuration data as yaml format and the theme needs to keep consistent with the active editor!

@jodinathan
Copy link

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:

CleanShot 2023-11-06 at 14 57 48@2x

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

@AllanOricil
Copy link

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

@jodinathan
Copy link

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
Copy link

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.

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
Copy link

roman-rookout commented Jan 11, 2024

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
Copy link

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
Copy link

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
Copy link

Thanks!

@EhabY
Copy link
Contributor

EhabY commented Apr 12, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
api-proposal feature-request Request for new features or functionality themes Color theme issues
Projects
None yet
Development

No branches or pull requests