Inconsistent color, size and gap, and rectangle artifact on normal, hover and active state of titlebar button

[Ashvith10]

In this example, I'll be taking the minimize button, which is similar to both maximize and close button for GTK4 app. For VSCode (with adwaita plugin) , close button on hover and active state shows the color red, which is inaccurate. Also, there is a box outside, which listens to the click event, when it should be the button icons which should react. There's also gap and sizing inconsistency.

GTK4 app

Normal state (#484848)

Hover state (#4F4F4F)

Active state (#6D6D6D)

VSCode, with Adwaita plugin

Normal state (#363636)

Hover state (#535353)

Active state (#535353)

Inconsistent size and gap.

[piousdeer]

Unfortunately, VS Code themes are limited to color changes, and these particular colors are hardcoded. Both this and #20 are unfixable except via injecting custom CSS, which is unsupported and likely won't be shipped with this extension anytime soon: see https://github.com/piousdeer/vscode-adwaita/issues/7#issuecomment-1256814782.

If you're willing to inject CSS, #11 contains snippets you can apply to fix the button sizes.

[Ashvith10]

@piousdeer Another solution would be to do what Microsoft Edge does with their browser - a small corner is allocated for the native title bar buttons, while the rest of it is the internal browser GUI. This has to be done in the VSCode/Electron repository however.

[adhadse]

@piousdeer Can vscode respect the titlebar decorations customized by GNOME Tweaks app, showing no maximize or minimize icon in the titlebar?

Edit: Ahh, Issue #20

[piousdeer]

Not with window.titleBarStyle set to custom. You can create a feature request for VS Code.

[adhadse]

@piousdeer @Ashvith10 Raised #176467