When it comes to theming the webview’s content of your Visual Studio Code extensions, the proposed way by the Visual Studio Code team is to use the provided CSS variables from the current theme. Although, in some cases, you want a bit more control, or make sure it matches what you want to achieve. That is why a code-driven approach is sometimes required.
Let us first focus on the proposed way to theme the webview’s content of your VS Code extension.
If you open the webview its developer tools in VS code, you can spot all these CSS variables in the
style attribute of the
Webviews can access all the theme colors.
Info You can find an overview of all the color references in the VS Code theme color documentation.
The notation of these variables is as follows; all use the
--vscode- prefix, followed by the variable name. The dot (
.) gets replaced by a dash (
Info Here is a list of all the VS Code theme variables: theme variables - gist
In your extension CSS file, you can use these variables as follows:
Cool, but what with CSS in JS, theme providers, …?
The default CSS way to theme/style is good enough in many cases, but when using component libraries like MUI, you might want a code-driven to create your themes.
Another advantage of using a code-driven approach is that you can manipulate some theme values, like converting HEX to RGBA to define the alpha value for backgrounds and more.
Getting all CSS variables and their values
As mentioned above, all the CSS variables get defined on the HTML style element. To retrieve these from code, all you need to do is get the value of the style attribute.
One way is to get the values one by one as follows:
The above approach might be good if you only need to get a couple of values; the next one might be better if you need more CSS variables or want them all.
The above code will give you key/value (property/value) pairs and allows you to make use of them in your code. To do so, you can use
codeStyles.editorBackground and get the color value.
Wait! What about theme changes? Good question, as when you use the CSS approach, it will all be automatic.
When using the code-driven approach, you will have to observe theme changes. You can use an observer to check the
attributes on the document body as each time you change the theme, the following attributes change:
- data-vscode-theme-kind: same as class
- data-vscode-theme-name: the name of the theme
An example of the observer looks as follows:
Info In the
updateCssVariablesmethod, you can define the same logic from above.
Happy theming your extensions