Vscode-docs: List of CSS variables accessible in an extension WebView

[tetchel]

Hi, I am creating a WebView as part of my extension and want to style my WebView buttons to look like the VSCode buttons.

From https://code.visualstudio.com/docs/extensions/webview#_theming-webview-content I see that there is CSS exposed to my extension that I can use, and that's great - just what I need.

However, I've done some digging in the main repository I cannot find a list of the names of the CSS variables (the example given is editor.foreground) that I can use.

I've found this file which provides the names of a few more color variables I can access:

        [editorBackground]: '#FFFFFE',
        [editorForeground]: '#000000',
        [editorInactiveSelection]: '#E5EBF1',
        [editorIndentGuides]: '#D3D3D3',
        [editorActiveIndentGuides]: '#939393',
        [editorSelectionHighlight]: '#ADD6FF4D'

but I feel like there must be more available (such as button background color!).

Please let me know where I can find a list of exposed CSS variables (if it exists), and consider pointing to it from the docs section I've linked above.

Thanks for reading!

[tetchel]

Well, I've found what seems to be an exhaustive list in the theme json files, eg here.

I still think a list like this should be linked from the docs, but my issue personally is resolved :)

[kcclemo]

Would it make sense to place a markdown document for this list under docs/customization? Or is it better to just link to the raw .json file?

[kcclemo]

And actually, in reading through this, I think this color reference would be an appropriate document to link to from the https://code.visualstudio.com/docs/extensions/webview#_theming-webview-content article:
https://code.visualstudio.com/docs/getstarted/theme-color-reference

I'd be happy to submit a pull request with this change if that's OK.

[tetchel]

Hi kcclemo,

The theme-color-reference is exactly what I had in mind. A link to that from the theming-webview-content docs would be really helpful. I will submit a PR for this tomorrow unless you beat me to it :)

That being said, I was hoping for more CSS than just colors. It would be great if I could just apply a (for example) class="vscode-button" to my buttons, and have them fit right in - I still haven't figured out how to create 'editor buttons' (like the Add Configuration... button), so let me know if you can point me to how I can create buttons like those within an editor, or style buttons like that within a WebView, if it is possible.

Thanks!

[tetchel]

Fixed #2075

[usernamehw]

There is an extension now that adds css variables available in webview to autocomplete:

https://marketplace.visualstudio.com/items?itemName=connor4312.css-theme-completions