search

GradienceTeam / Gradience

Change the look of Adwaita, with ease
https://gradienceteam.github.io
GNU General Public License v3.0
1.3k stars 48 forks source link

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

Open dharmik2319 opened 1 year ago

dharmik2319 commented 1 year ago

Is there an existing issue for this?

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

Screenshot from 2023-06-04 17-36-02 Nautilus looking normal even though it is GTK 3 Screenshot from 2023-06-04 17-36-11 gnome-terminal in focus having transparent headerbar Screenshot from 2023-06-04 17-36-22 gnome-terminal headerbar losing transparency upon losing focus Screenshot from 2023-06-04 17-36-46 Screenshot from 2023-06-04 17-36-54 Screenshot from 2023-06-04 17-37-09 Screenshot from 2023-06-04 17-37-29 Various GTK 3 apps showing flickering and glitchiness in their transparency, which they lose upon losing focus image 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)

clipboard-indicator@tudmotu.com dash-to-dock-cosmic-@halfmexicanhalfamazing@gmail.com emoji-selector@maestroschan.fr compiz-windows-effect@hermes83.github.com cosmic-workspaces@system76.com pop-cosmic@system76.com pop-shell@system76.com system76-power@system76.com screenshot-window-sizer@gnome-shell-extensions.gcampax.github.com user-theme@gnome-shell-extensions.gcampax.github.com

Additional context

N/A

Code of Conduct

github-actions[bot] commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

daudix commented 1 year ago

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

dharmik2319 commented 1 year ago

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.

Screenshot from 2023-06-05 15-57-02

Screenshot from 2023-06-05 15-57-11 Screenshot from 2023-06-05 15-57-28 Screenshot from 2023-06-05 15-57-32 All of this, again happens only when the window is in focus, when not in focus it behaves fine.

daudix commented 1 year ago

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

dharmik2319 commented 1 year ago

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

Thank you VERY much for this app.

dharmik2319 commented 1 year ago

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 commented 1 year ago

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

daudix commented 10 months ago

Even i have this issue

We know dude, everyone does :)

dharmik2319 commented 10 months ago

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