Waybar icon indicating copy to clipboard operation
Waybar copied to clipboard

Dynamic background color

Open carlosV2 opened this issue 1 year ago • 2 comments

Is there a way to define the waybar's background color to match the opened app's color?

Of course this has a ton of caveats (like what happens if there are multiple windows, etc) but, in the simplest form, I'm looking for a way to set the color programmatically (even if I had to define the colors manually). For example, with a long-running process.

I've seen there are some GTK variables that can be used but they are related to the GTK theme instead of the screen's contents (unless I'm mistaken).

Here are some examples of what I mean.

This is how my bar looks like without windows open: image

The background color is set to match the one in my terminal so that when the terminal is open, it looks like this: image

However, if I open Spotify (for example), the color does not adjust dynamically: image

carlosV2 avatar May 22 '24 15:05 carlosV2

The most brutal way I can think of to achieving that is - hope you're sitting on a chair:

  • launch the application using a wrapper script (f.e. in your window manager keybindings)
  • application is Spotify so you know its bg color is #000000
  • you cat #000000 into style.css in the property window#waybar
  • killall -SIGUSR2 waybar (reloads Waybar config)

(only half-joking)

apiraino avatar Jun 05 '24 18:06 apiraino

Hang on, this might not be that crazy!

I mean, like you said, it is a very crude way but waybar has a mechanism to reload the CSS automatically when it changes. In addition to this, I can tap onto the Hyprland socket to know what workspace I am on and what screens are in there... I might actually try it!

Only concern is the CPU usage but, by my estimates, it should not have that big of an impact actually!

Thank a lot for the half-joke that I'm taking half-seriously.

carlosV2 avatar Jun 06 '24 14:06 carlosV2

While working on a patch for sway/window, I have used this css for testing:

window#waybar.Firefox-esr {
    background: #ff0000;
}

window#waybar.foot {
    background: #0000ff;
}

this sets waybar's background color based on app_id based css classes. AFAIU hyprland/window supports the same. The limitation is that the window modules only apply the app_id class for a single tiled window in the workspace. I mean, it could be quite a bit of work writing down all the colors, depending on how many apps you want to do this for, but is that not sort of what you want?

RobertMueller2 avatar Jul 07 '24 18:07 RobertMueller2