VSCE: Automate rendering of user's color theme

[jjinnii]

The expected behavior of the VSCE is to pull in a user's color theme palette for all UI elements, including text color, background color for containers, icon colors, etc. This allows the extension to feel more "native' and integrated to VS Code extension and prevents scenarios in which there is a harsh contrast btw a user's default color palette and switching to our extension.

It's important that we check with multiple color palettes and ensure that we are pulling in these color themes in an effective and accessible way -- this will define at a glance how the extension looks to a user.

[jjinnii]

@tjkandala Just wanted to follow up on your question from the planning meeting. This issue covers essentially spans all colors on the VSCE, which includes syntax highlighting. At the moment, it seems to be a hybrid of pulling in a user's color theme and Sourcegraph colors (definitely my bad here, my designs promoted this). I think the most natural state for the extension would be to pull in the user's color theme in to all elements: syntax highlighting, typography, background colors, etc.

Please let me know if you'd like me to clarify further!

[tjkandala]

@jjinnii Got it! I believe this will basically entail finding VS Code CSS variables to use in place of our highlighting styles

[jjinnii]

@tjkandala Perfect! Do let me know when this issue is ready for review -- I'd like to test with a few different themes, just to make sure that for the most popular themes in VS Code at least, our extension looks sleek and polished with how/what CSS variables we're pulling in for the different components :)

[jjinnii]

I know we're still working on this -- but just for reference, this is what shows up for me on VS Code's default dark theme with the new version from the .vsix file. Let's make sure "error red" isn't the default color for highlighting 😆

[abeatrix]

Updated to use --vscode-editor-selectionBackground

[jjinnii]

@abeatrix That looks a lot better! Could you please test out a few other default themes with your latest version to make sure nothing stands out? Thank you!

[abeatrix]

For syntax highlighting, it looks like currently access to VS Code built-in highlighting color is not available: microsoft/vscode#56356
microsoft/vscode#91375
Will keep looking to see if there is a workaround

[abeatrix]

This is currently blocked by the limitation of the VS Code API. A potential temporary workaround I can think of would be adding an option for users to provide the extension with their color theme.

[jjinnii]

Could I get some clarification on what "providing the extension with their color theme" means? Namely:

• How would a user share/provide their color theme?
• What would be do with that information to support their color theme? And are there additional actions a user needs to take?
  cc: @abeatrix @tjkandala

[abeatrix]

How would a user share/provide their color theme?

The user would first need to generate a color theme file using the Developer: Generate Color Theme from Current Settings command from their VS Code Command Palette, and then from there I was thinking if we can write a program that would take the newly-generated color theme from the user and extract the color for tokens use, and save it as a new sourcegraph setting that allows the extension to use it (or even in cloud for future)

[abeatrix]

Moving this to Blocked because as mentioned above, this is blocked by the limitation of the VS Code API since theme and token colors are not accessible via the API: #29704 (comment)

[jjinnii]

Thanks @abeatrix! Just to refresh my memory:

• What we have implemented now: Coverage for most highly-used VS Code theme palettes, which required manual hard-coding of CSS variables.
• What this issue aims to do: A solution that automatically mirrors a user's VS Code theme palette, without having to hard code any CSS.

And we are blocked because it's not possible for us to pull in theme colors through the API, and the only solution would be for a user to follow some manual steps and save as a Sourcegraph extension setting?

If above is correct, what would you say our coverage of themes on VS Code is? e.g. we have the top 20 themes hard coded.

[abeatrix]

What we have implemented now: Coverage for most highly-used VS Code theme palettes, which required manual hard-coding of CSS variables.

That's correct. [Here](Material Theme Palenight High Contrast) you can see how we hard code the color for one of the themes we support.

And we are blocked because it's not possible for us to pull in theme colors through the API, and the only solution would be for a user to follow some manual steps and save as a Sourcegraph extension setting?

That's correct. And the color list would be very long so I am unsure where would be an appropriate place to save it

Here is a list of the themes we have vetted so far: https://github.com/sourcegraph/sourcegraph/blob/main/client/vscode/src/webview/theming/highlight.scss#L180-L202 (Solarized and Material Theme Palenight High Contrast are missing in the list, I will add them in my next PR)

[jjinnii]

Thanks for the clarification @abeatrix ! I changed the name of the issue to be a bit clearer. If we no see no feasible technical way to implement this, I think we can close this issue. 😄 We've received no feedback yet (besides positive ones!) on user color themes, so I think we can create a new issue in the future when we know of any specific user problem.