Change the color/styling of the window bar based on the application

elementary-ospantheonwindow-decorations

I've been heavily customizing my elementary os desktop to look more to my liking, and I would like to know if it's possible to change the color of the bar above each window, based on the application that's being run. It seems like it would be possible, but when I google for it I can never find anything. In fact, I find nothing; no questions about it, no articles–I thought that I might be calling it the wrong thing, or it just isn't possible. That's why I'm asking here. Is it possible to dynamically change the window bar color?

Also my second question is kind of like the first but not as important, is it possible to dynamically change the color of the panel at the top of the desktop based on the color of the application open? I saw something like it using ImageMagick, but I couldn't find it again

Best Answer

tl;dr It is possible, but it's not super straightforward and it won't work for every app.

Firstly, there's something called Gtk.CSS that is used to style the toolkit. If you're familiar with CSS, you'll know that it operates based on selecting elements (like classes and IDs). In order to select a specific app window, it would need to set an ID that you can select in CSS. Some apps do, but some apps don't. Luckily for us, Sam Hewitt has done a lot of the footwork of finding out which apps set IDs. You can use his Paper stylesheet as a reference.

Now, you'll need to modify your stylesheet and add new CSS rules for each app you'd like custom theme. This could be complex depending on which stylesheet you're currently using.

At elementary, we're currently working on a simple Granite utility that app developers can use to set colors for their apps' headerbar. But this will need to be done from the source code of the app.

As far as altering the color of the panel per app, this is not really possible at the moment. The panel is only aware of the focused app's state (maximized, tiled, or not). It doesn't receive any information about the app's internal CSS.

Related Question