bug: Glitchy headerbars in GTK 3 apps while using Monet theme

[dharmik2319]

Is there an existing issue for this?

• [x] I have searched the existing issues

What happened?

When I apply a theme generated by the monet engine, the libadwaita and GTK 4 apps look and behave flawlessly. But, some GTK 3 apps (with adw-gtk3) have glitchy headerbars due to transparency. In fact, all of them show inconsistent behavior. gnome-terminal has a completely transparent headerbar when in focus, otherwise it becomes opaque. VLC always has a transparent headerbar regardless of focus. gnome-control-center or the Settings app and gnome-tweaks have the glitchy headerbars with severe flickering. nautilus looks and behaves like a GTK 4 app even though it is GTK 3. GTK 4 and libadwaita apps dont have transparency in their headerbars at all, which is expected.

To Reproduce

1. Apply this theme (renamed to txt to support github upload, you will need to rename to json).
2. Make sure to apply to GTK 3 apps as well
3. check the apps mentioned above

Expected behavior

All GTK 3 apps have consistent behaviour, among themselves and with GTK 4 and libadwaita as well.

Screenshots

Nautilus looking normal even though it is GTK 3 gnome-terminal in focus having transparent headerbar gnome-terminal headerbar losing transparency upon losing focus Various GTK 3 apps showing flickering and glitchiness in their transparency, which they lose upon losing focus Actual libadwaita/GTK 4 apps, without transparency

OS

cat /etc/os-release:

NAME="Pop!_OS"
VERSION="22.04 LTS"
ID=pop
ID_LIKE="ubuntu debian"
PRETTY_NAME="Pop!_OS 22.04 LTS"
VERSION_ID="22.04"
HOME_URL="https://pop.system76.com"
SUPPORT_URL="https://support.system76.com"
BUG_REPORT_URL="https://github.com/pop-os/pop/issues"
PRIVACY_POLICY_URL="https://system76.com/privacy"
VERSION_CODENAME=jammy
UBUNTU_CODENAME=jammy
LOGO=distributor-logo-pop-os

DE/WM version

GNOME Shell 42.5

Version

0.4.1

Installation method

Flatpak from Flathub

Enabled system extensions (GNOME specific)

[email protected] dash-to-dock-cosmic-@[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] screenshot-window-sizer@gnome-shell-extensions.gcampax.github.com [email protected]

Additional context

N/A

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Welcome on Gradience. 🥳 We really appreciate your contribution. The core team will review your issue as soon as possible. You can also join the Matrix room: https://matrix.to/#/#Gradience-space:envs.net or the Discord server: https://discord.com/invite/4njFDtfGEZ

[daudix]

This is known issue, it happens because of alpha value in headerbar color, you can remove last digits from it to make it opaque

The fix will come in next release

Directly related to #736

[dharmik2319]

Thank you very much for the quick reply. I will try doing that and close afterwards.

[daudix]

No need in closing, we can close it when the fix will land

[dharmik2319]

This is known issue, it happens because of alpha value in headerbar color, you can remove last digits from it to make it opaque

I did as you mentioned (see here), but now, all the windows have headerbars with extremely light colors, which messes up the contrast.

All of this, again happens only when the window is in focus, when not in focus it behaves fine.

[daudix]

Yeah, we used transparency to make color less bright, but as you see transparency breaks gtk3

[dharmik2319]

After some fiddling with color pickers, looks and behaves flawlessly!

Thank you VERY much for this app.

[dharmik2319]

If anyone is wondering what i did to fix it:

1. First of all, take a screenshot of the gradience window in focus.
2. Open a color picker and copy the hex code for the header bar color, from the screenshot, if you try otherwise, it gains focus and things change
3. replace headerbar_bg_color to the copied hex code
4. for headerbar_border_color just change the rgba to rgb and delete the last number
5. headerbar_shade_color should be the same as window_bg_color
6. You're done.

[daudix]

Temporary fix landed in https://github.com/GradienceTeam/Gradience/commit/b55eecbdb4870e6636642037fc6b6233dfd708c2

[daudix]

Even i have this issue

We know dude, everyone does :)

[dharmik2319]

If anyone is wondering what i did to fix it:

1. First of all, take a screenshot of the gradience window in focus.
2. Open a color picker and copy the hex code for the header bar color, from the screenshot, if you try otherwise, it gains focus and things change
3. replace headerbar_bg_color to the copied hex code
4. for headerbar_border_color just change the rgba to rgb and delete the last number
5. headerbar_shade_color should be the same as window_bg_color
6. You're done.

Even i have this issue

you can try this to fix it for now