vscode-elements
Add default values to styles
In the original webview toolkit there were default styles configured in case no VSCode variable is present. for example in case of color This helps in local development when there are no VSCode variables available.. otherwise styles look bad
e.g:
button in local development:
button as part of vscode weview:
That's a valid point. Until I add them, you can use these css variables during the development: https://github.com/vscode-elements/elements/blob/main/dev-assets/dark-v2.txt This is the default theme called "Dark Modern".
To anyone who wants to pick up this task,
This is a chore but easy task. You have to add a fallback value in every place where a --vscode prefixed css variable is used. The default VSCode the is the "Dark Modern". This file contains all the theme variables provided by this theme. Keep in mind that --vscode-editor-font-family and --vscode-font-family are platform dependent, sans-serif and monospace will work well for them.
@bendera are there any news/progress in this topic? We are starting to migrate all of our projects and it causes issues in development mode where we don't see the CSS properly.
@veredcon You can use the Webview Playground for this. Adding default values to styles would be a great improvement, but it’s a huge task, and I have very little time for it. Despite this it's a relativly simple task, which is why I labeled it as a "good first issue". It could speed up the process if someone took on this task.