[plug-in] webview and css

[benoitf]

There is an issue when using some "Theia CSS" variables in a plug-in's web-view

Let say we use in our own CSS (css of the web-view) --theia-accent-color0, this variable won't be resolved.

It's because definition of variable is using

-theia-accent-color0: var(--md-blue-900);

and all these material design colors (like https://github.com/theia-ide/theia/blob/248775060d2e4815306ac025b18f67364ff5d62a/packages/core/src/browser/style/materialcolors.css) are not included in the webview iframe

[svenefftinge]

But why do you expect --theia-accent-color0 being available in an iframe?

[benoitf]

@svenefftinge the same I expect VSCode constants
https://code.visualstudio.com/api/extension-guides/webview

Webviews can also access VS Code theme colors using CSS variables. These variable names are prefixed with vscode and replace the . with -. For example editor.foreground becomes var(--vscode-editor-foreground):

csscode {
    color: var(--vscode-editor-foreground);
}

[benoitf]

It's to have the rendering of an iframe looking integrated in the IDE, (so matching styles and handling theme switch, etc)