Proposal: CSS and JS instead of token colorization

[wroyca]

VS Code Adwaita is currently limited by token colorization and is unable to properly represent libadwaita design guidelines. These restrictions can be overcome by injecting CSS and JS, as is demonstrated by vscode-fluent-ui, which would be a good step forward.

vscode-fluent-ui, customized (rounded) elements

[piousdeer]

Redesigning VS Code to match libadwaita design guidelines would take a lot of work and a lot of maintenance to make sure it works in the future, plus due to how it requires modifying package files I don't know how it'd behave on different distros. It would be great, but I don't have the resources to work on it. If someone would be willing to, it could be included as an optional feature at some point.

[wroyca]

Redesigning VS Code to match libadwaita design guidelines would take a lot of work and a lot of maintenance to make sure it works in the future, plus due to how it requires modifying package files I don't know how it'd behave on different distros. It would be great, but I don't have the resources to work on it. If someone would be willing to, it could be included as an optional feature at some point.

@piousdeer

I went ahead and made a slight attempt at mimicking libadwaita tab. I'd be interested to walk down that path. My knowledge of CSS isn't particularly great, but something minimal that fits well shouldn't be particularly difficult:

[piousdeer]

Hey @wroyca, sorry for the delay. There are a few reasons I don't want to include CSS/JS in this extension:

• It is unsupported by VS Code. Existing extensions' approach is to monkey-patch the app's HTML files. It'd require some work to integrate that into this extension and make sure it works across as many systems as possible.
• Unless we fork and patch VS Code, it surely won't work on some systems, including mine. I'm running NixOS where the package store is immutable and therefore the HTML cannot be modified.
• It could break at any time, as seen in the issues of the project linked, vscode-fluent-ui no longer works.
• Convincingly reimplementing libadwaita widgets using CSS and JS on an existing DOM structure across all or most of VS Code is a huge task, though most people should be fine with something that looks similar enough.
• Most people are also good with just a color scheme that matches the rest of their system. Actually changing the UI could be a bit less popular among some, especially if the new UI is incomplete or inaccurate, which is unavoidable given how complex VS Code is.

That said, what you describe would be lovely to see as a separate extension! If you feel enthusiastic about this, let me know when you have something ready, I'll link it in this project's readme and perhaps contribute when I get more spare time.

[wroyca]

Hey @wroyca, sorry for the delay. There are a few reasons I don't want to include CSS/JS in this extension:

* It is unsupported by VS Code. Existing extensions' approach is to monkey-patch the app's HTML files. It'd require some work to integrate that into this extension and make sure it works across as many systems as possible.

* Unless we fork and patch VS Code, it surely won't work on some systems, including mine. I'm running NixOS where the package store is immutable and therefore the HTML cannot be modified.

* It could break at any time, as seen in the issues of the project linked, [vscode-fluent-ui](https://github.com/TheOld/vscode-fluent-ui/issues) no longer works.

* Convincingly reimplementing libadwaita widgets using CSS and JS on an existing DOM structure across all or most of VS Code is a huge task, though most people should be fine with something that looks similar enough.

* Most people are also good with just a color scheme that matches the rest of their system. Actually changing the UI could be a bit less popular among some, especially if the new UI is incomplete or inaccurate, which is unavoidable given how complex VS Code is.

That said, what you describe would be lovely to see as a separate extension! If you feel enthusiastic about this, let me know when you have something ready, I'll link it in this project's readme and perhaps contribute when I get more spare time.

@piousdeer

I don't really intend to do extensive maintenance, nor do I intend to maintain the theme outside of my personal necessity, but I have uploaded my configuration for anyone that is interested: https://github.com/wroyca/vscode-gnome :slightly_smiling_face:

[piousdeer]

Looks very cool! I'll add a link.