Waybar use volumectl on click, add rainbow theme for system details

home/hyprland/waybar/default.nix

@@ -34,9 +34,8 @@
       position = "top";
       # Layout
       "modules-left" = [ "custom/launcher" "hyprland/workspaces" ];
-      "modules-center" = [ ];
+      "modules-center" = [ "mpris" ];
       "modules-right" = [
-        "mpris"
         "pulseaudio"
         "battery"
         "disk"
@@ -51,6 +50,7 @@
         format = " 󰛡 ";
         tooltip = false;
         on-click = "rofi -show combi";
+        on-click-right = "rofi -show power-menu";
       };
       "hyprland/workspaces" = {
         format = "{icon}";
@@ -94,18 +94,22 @@
         scroll-step = 5;
         format = "{volume}% {icon} {format_source}";
         format-muted = " 󰝟 {format_source}";
-        format-source = "{volume}% 󰍬";
-        format-source-muted = " 󰍭";
+        format-source = "󰍬";
+        format-source-muted = "󰍭";
         format-icons = {
-          headphone = "󰋋";
+          car = "󰄍";
+          default = [ "󰕿" "󰖀" "󰕾" ];
           hands-free = "󰥰";
           headset = "󰋎";
           phone = "󰏲";
           portable = "󰏳";
-          car = "󰄍";
-          default = [ "󰕿" "󰖀" "󰕾" ];
+          headphone = "󰋋";
         };
         on-click = "pavucontrol";
+        on-click-middle = "volumectl -m %";
+        on-click-right = "volumectl %";
+        on-scroll-up = "volumectl -u + 5";
+        on-scroll-down = "volumectl -u - 5";
       };
       backlight = {
         format = "{icon}";

home/hyprland/waybar/style.css

@@ -25,24 +25,31 @@ tooltip {
 }
 
 #workspaces,
-#cava,
+#mpris,
+#pulseaudio,
+#battery,
 #disk,
 #cpu,
 #memory,
 #temperature,
 #clock,
-#mpris,
-#pulseaudio,
-#bluetooth,
-#network,
-#backlight,
-#battery,
 #tray {
-    color: @base05;
     margin: 0px;
     padding: 1px 5px;
 }
 
+#workspaces,
+#mpris,
+#tray { color: @base05; }
+
+#pulseaudio { color: @base07; }
+#battery { color: @base08; }
+#disk { color: @base09; }
+#cpu { color: @base0A; }
+#memory { color: @base0B; }
+#temperature { color: @base0C; }
+#clock { color: @base0D; }
+
 #workspaces button {
     border: 1px solid transparent;
     border-radius: 10px;