search

vscode-elements / elements

Web component library for developing Visual Studio Code extensions
https://vscode-elements.github.io
MIT License
156 stars 27 forks source link

Add default values to styles #164

Open veredcon opened 1 month ago

veredcon commented 1 month ago

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: image

button as part of vscode weview: image

bendera commented 1 month ago

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".

bendera commented 1 month ago

Look at this: https://github.com/vscode-elements/webview-playground

bendera commented 1 month ago

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.