[FEATURE] menu blur effect, match WMax bg with Gtk headerbar, traffic light buttons etc.

[JE-Amouel]

HI,

how can i set a blurry effect on popup menus?

still enjoying with your extension , 👍 : thanks,

[neuromorph]

Hello,

how can i set a blurry effect on popup menus?

Blur on popup menus is currently not available. In fact, I don't know of any example where it has been done in Gnome. A while back, I had tried to apply the Gnome Shell blur to the menus but it did not work. Shell blur doesn't support rounded corners and there are artifacts issues, sure, but in this case it did not blur the background at all. So I suppose a custom blur effect would be needed which maybe better to tackle in Blur my shell.

Blur my shell recently started supporting blur with rounded corners using their own GLSL shaders, so a custom Blur effect. With that I was hoping aunetx will implement menu blur in Blur my shell but hasn't happened yet. It would be a good idea to ask for it in their GitHub repo as well.

In ideal scenario, Gnome should update their Shell Blur for better support but I wouldn't hold my breath.

So, currently, no solution but I am keeping an eye on it since I also believe it would be awesome.

still enjoying with your extension , 👍 : thanks,

Thank you! Some new updates were added for Gtk apps in case you are interested in that.

[JE-Amouel]

So, currently, no solution but I am keeping an eye on it since I also believe it would be awesome.

thanks for the information,

Thank you! Some new updates were added for Gtk apps in case you are interested in that.

just to show you a little what I managed to do, here is a screenshot of my desktop that I was able to achieve with the auto-theme option. , 👍 💯 🥇

However, I have a small problem with the "window-max bar" feature, especially with the "match BG with headerbar" option,
It looks like it's not exactly the color of the title bar of the maximize window, but rather the system theme.
here is a picture to show you

you can clearly see that the header bar of the terminal window is a dark gray, but the top bar turns white when this window is maximized, I tried to restart the system several times hoping to resolve the problem, but that doesn't change anything.

[neuromorph]

just to show you a little what I managed to do, here is a screenshot of my desktop that I was able to achieve with the auto-theme option. , 👍 💯 🥇

That looks awesome 👍 ! What's the app-grid widget and the sidebar?

However, I have a small problem with the "window-max bar" feature, especially with the "match BG with headerbar" option,
It looks like it's not exactly the color of the title bar of the maximize window, but rather the system theme.

This option tries to match the window-max BG with Gtk headerbar-hint so it requires the Headerbar hint to be set > 0 under Gtk/Flatpak apps setting. Currently, hint of zero means default theme is retained for headerbar.
Also, it seems updating Headerbar hint does not automatically reload stylesheet for WMax, I will look into it. But you can just turn the setting "match BG with headerbar" off and on (to force reload) after setting the headerbar hint to be > 0 .

Why is it white though, are you on Light mode? Well, no, since the headerbar would also be white in that case. I guess a custom theme.

Let me know how it goes.

[JE-Amouel]

Why is it white though, are you on Light mode? Well, no, since the headerbar would also be white in that case. I guess a custom theme.

yes, good guess, is light mode.
if i switch to dark mode the top bar bg will follow systeme setting and will turn black.

That looks awesome 👍 ! What's the app-grid widget and the sidebar?

app-grid, is arcmenu with unity menu layout.
side bar, is plank dock with Arian theme dark, i use it to toggle desktop features, such as overview, clipboad, app-grid, etc...
here is a quick tour on my desktop.

openbar.mp4

[neuromorph]

yes, good guess, is light mode.

Then the Terminal headerbar should be light too. So, did it work for you, the "match BG with headerbar"? It will need you to keep Gtk app theming On and Headerbar hint > 0 in Open Bar settings.

here is a quick tour on my desktop.

Thanks for the tour! It looks very cool!

[JE-Amouel]

Thanks for the tour! It looks very cool!

Thank you 😃
you are welcome .

Then the Terminal headerbar should be light too. So, did it work for you, the "match BG with headerbar"? It will need you to keep Gtk app theming On and Headerbar hint > 0 in Open Bar settings.

okay, i try and i give you my feedback.

[JE-Amouel]

it works well for the terminal, but for other applications, the bar always keeps the same color, I admit that I don't really understand how this option works,
I thought that the color of the background of the top bar would follow the color of the title bar of the maximize window, from what I see, we would say that the option is to modify the color of the bar title of gtk applications so that when they are maximized, they can correspond to that of the top bar,
could you explain to me?

[JE-Amouel]

sorry i mistakely close this issue,
just forget about last message,
i just set headerbar hint to maximum , ... is much more awesome than i thought ,

Screencast.from.2024-08-14.11-46-59.mp4

now i have a couple of question, such as:
1)how can i change that hint color, without breaking my theme,
2) how can i expand that to other application(none gtk),
3) how can i change the color of traffic light controle button, (i want some catpuccin'ish colors)

[neuromorph]

I thought that the color of the background of the top bar would follow the color of the title bar of the maximize window, from what I see, we would say that the option is to modify the color of the bar title of gtk applications so that when they are maximized, they can correspond to that of the top bar,
could you explain to me?

It probably needs better wording or handling. I suppose, it can be confusing. Let me explain.
I first added the feature to tint the app titlebar (and also sidebar) with the Accent color to flow the accent into the apps more than the default. Then, I had the idea to change the BG color of the top bar to match the headerbar/titlebar color of the Gtk app when it is maximized. This kind of unites them and looks more cohesive as can be seen in your screencast.
A few issues and how they are tackled:

• Apps can have different titlebar colors and it would be hard to find that color and also makes it less consistent. So, I change the app titlebar color to default Gnome value (depending on Dark or Light mode) and then mix the selected amount of Accent color (hint) to it. The resulting color is consistent and can be applied to the top bar.
• Some apps like Firefox will follow this Gtk styling only if you select "System theme - auto" theme in their settings. Else their custom theme will override the titlebar color.
• Some newer Gtk4 apps (e.g. Nautilus or Gnome Settings) have decided to use splitview with a sidebar without a titlebar. Basically, the titlebar is not colored. With the above "titlebar matching to top bar" styling, Open Bar will color the titlebar. Some may prefer this some may not. So there is an option in Open Bar Gtk app settings called "Headerbar - Gtk3 only". If that is selected then, for Gtk4, split-view will be maintained and headerbar will not be matched. If it is deselected then headerbar color will be matched.
• The app styling is only limited to Gtk apps i.e. apps that use Gtk toolkit (e.g. Flatpaks built with gtk underneath). Non-gtk are not supported :(

So a few observations:

• The "match top bar color" would only work if Headerbar hint is > 0. When it is zero, the app headerbar color is not altered at all. This is so that users who want to retain the default styling can do so.
• Your nautilus/files app should work if you disable "Headerbar - Gtk3 only"
• Firefox titlebar should work if you select "system theme"

i just set headerbar hint to maximum , ... is much more awesome than i thought ,

That's great! :)

1)how can i change that hint color, without breaking my theme,

Currently, it just uses the Accent color selected in Open Bar (Popup Menus tab). Do you want to use a color different from the Accent color?

2. how can i expand that to other application(none gtk),

Well, non-Gtk can be Qt or KDE or something else. Each would have their own way of theming, if any. They usually are not that amenable to theme under Gnome. I think there are some possibilities like a Qt theme for Gnome. Any particular apps you are referring to?

3. how can i change the color of traffic light controle button, (i want some catpuccin'ish colors)

They are currently hard coded in the code - in stylesheets.js there is a section starting with if(trafficLightButtons) {.
Can you share the catpuccin'ish colors? That seems to be a popular theme, so I might switch the colors to it. I will be pushing an update soon since there's a bug-fix to be released.

[JE-Amouel]

I'm sorry for the time it took me to respond.

They are currently hard coded in the code - in stylesheets.js there is a section starting with if(trafficLightButtons) {.
Can you share the catpuccin'ish colors? That seems to be a popular theme, so I might switch the colors to it. I will be pushing an update soon since there's a bug-fix to be released.

I greatly appreciate it, but as you made me understand above, in terms of theming, each person has their own sensitivity, the current color of the traffic light does not pose a problem to me, I think the original color can only highlight everyone agrees, however a small menu in which we could customize the color of these buttons would be really appreciate.

[neuromorph]

The Gtk section has been updated a bit now and also has options to select custom color as hint for headerbar/sidebar and for view/window. Note that when Autotheming is applied, the Accent color will be set as hint color for Gtk but it can be manually set to any other color.
The traffic control buttons colors are also modified a bit (hopefully for the better) but does not yet have option to change them from GUI.
It is available in main branch here on GitHub.
It also includes some other enhancements e.g. ability to interact with panel buttons without having to precisely point on it.
Please try it out by installing the extension by downloading from the main branch and let me know about any feedback you may have.

Thanks!