How to style workspace windows icons?

[chrisr87]

Is there any way to style them? I'm using Hyprland and I tried to GTK_DEBUG the bar and it seems like the workspaces window icons are rendered together so I can't find a selector for the individual window icons. My desire is to be able to style icons for active windows differently than icons for inactive windows. The documentation only provides selectors for the workspace icons themselves but not the individual window icons.

For example in here, I see that we can select by title or class. But how do I select by whether the window is focused or not? Or is this impossible natively via the waybar config?

"hyprland/workspaces": {
  "format": "<sub>{icon}</sub>\n{windows}",
  "format-window-separator": "\n",
  "window-rewrite-default": "",
  "window-rewrite": {
    "title<.*youtube.*>": "", // Windows whose titles contain "youtube"
    "class<firefox>": "", // Windows whose classes are "firefox"
    "class<firefox> title<.*github.*>": "", // Windows whose class is "firefox" and title contains "github". Note that "class" always comes first.
    "foot": "", // Windows that contain "foot" in either class or title. For optimization reasons, it will only match against a title if at least one other window explicitly matches against a title.
    "code": "󰨞",
	},
  ...
}

[alrza-l]

do you mean something like this?

/* .config/waybar/style.css*/
#workspaces button.active{
	color: @peach;
  	border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

[chrisr87]

do you mean something like this?

/* .config/waybar/style.css*/
#workspaces button.active{
	color: @peach;
  	border-radius: 10px;
    padding-left: 8px;
    padding-right: 8px;
    animation: gradient_f 20s ease-in infinite;
    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}

No. Like I mentioned above, that selector is for the entire workspace button. I'm trying to style individual window icons within the workspace.

[alrza-l]

I tried using waybar debug -l to inspect widget tree and available classes for styling. and it seems like there is only one class generated per module.

window#waybar.background.top.eDP-1..mode-dock:dir(ltr)
  decoration:dir(ltr)
  box.horizontal:dir(ltr)
    box.horizontal.modules-left:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#power-profiles-daemon.module:dir(ltr)
      widget:dir(ltr)
        box#mobo_drawer.horizontal:dir(ltr)
          widget:dir(ltr)
            label#cpu.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.cpu:dir(ltr)
                label#memory.module:dir(ltr)
              widget.cpu:dir(ltr)
                label#disk.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.blank:dir(ltr)
      widget:dir(ltr)
        box#laptop.horizontal:dir(ltr)
          widget:dir(ltr)
            label#backlight.module:dir(ltr)
          widget:dir(ltr)
            label#battery.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
    box.horizontal.modules-center:dir(ltr)
      widget:dir(ltr)
        label#custom-swaync.module:dir(ltr)
      widget:dir(ltr)
        label#custom-cava_mviz.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#clock.module.5:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        box#workspaces.horizontal.module.alrza-l:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#idle_inhibitor.module:dir(ltr)
    box.horizontal.modules-right:dir(ltr)
      widget:dir(ltr)
        label#network.module.speed:dir(ltr)
      widget:dir(ltr)
        box#connections.horizontal:dir(ltr)
          widget:dir(ltr)
            label#network.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.bluetooth:dir(ltr)
                label#bluetooth.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        box#audio.horizontal:dir(ltr)
          widget:dir(ltr)
            label#pulseaudio.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.pulseaudio:dir(ltr)
                label#pulseaudio.module.microphone:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        label#custom-keyboard.module:dir(ltr)
      widget:dir(ltr)
        label#custom-lock.module:dir(ltr)
      widget:dir(ltr)
        label#custom-power.module:dir(ltr)

But for minor styling you might want to consider pango markup

It is not that clean but it works. I wish this would help you.

[chrisr87]

I tried using waybar debug -l to inspect widget tree and available classes for styling. and it seems like there is only one class generated per module.

window#waybar.background.top.eDP-1..mode-dock:dir(ltr)
  decoration:dir(ltr)
  box.horizontal:dir(ltr)
    box.horizontal.modules-left:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#power-profiles-daemon.module:dir(ltr)
      widget:dir(ltr)
        box#mobo_drawer.horizontal:dir(ltr)
          widget:dir(ltr)
            label#cpu.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.cpu:dir(ltr)
                label#memory.module:dir(ltr)
              widget.cpu:dir(ltr)
                label#disk.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.blank:dir(ltr)
      widget:dir(ltr)
        box#laptop.horizontal:dir(ltr)
          widget:dir(ltr)
            label#backlight.module:dir(ltr)
          widget:dir(ltr)
            label#battery.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
    box.horizontal.modules-center:dir(ltr)
      widget:dir(ltr)
        label#custom-swaync.module:dir(ltr)
      widget:dir(ltr)
        label#custom-cava_mviz.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#clock.module.5:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        box#workspaces.horizontal.module.alrza-l:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.dot-line.module:dir(ltr)
      widget:dir(ltr)
        label#idle_inhibitor.module:dir(ltr)
    box.horizontal.modules-right:dir(ltr)
      widget:dir(ltr)
        label#network.module.speed:dir(ltr)
      widget:dir(ltr)
        box#connections.horizontal:dir(ltr)
          widget:dir(ltr)
            label#network.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.bluetooth:dir(ltr)
                label#bluetooth.module:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        box#audio.horizontal:dir(ltr)
          widget:dir(ltr)
            label#pulseaudio.module:dir(ltr)
          revealer.drawer:dir(ltr)
            box.horizontal:dir(ltr)
              widget.pulseaudio:dir(ltr)
                label#pulseaudio.module.microphone:dir(ltr)
      widget:dir(ltr)
        label#custom-separator.module.line:dir(ltr)
      widget:dir(ltr)
        label#custom-keyboard.module:dir(ltr)
      widget:dir(ltr)
        label#custom-lock.module:dir(ltr)
      widget:dir(ltr)
        label#custom-power.module:dir(ltr)

But for minor styling you might want to consider pango markup

It is not that clean but it works. I wish this would help you.

Yes I'm familiar with debugging GTK and pango markup, I've gone through this exact process of debugging you're going through. But can you elaborate on what you mean by it working? You were able to style the client icons individually within the same workspace?