Added customizable styling for network, bluetooth, battery and audio menu... and fixed window position based on scale.

modules/menus/DropdownMenu.js

@@ -20,6 +20,18 @@ const moveBoxToCursor = (self, fixed) => {
     let monWidth = hyprland.monitors[hyprland.active.monitor.id].width;
     let monHeight = hyprland.monitors[hyprland.active.monitor.id].height;
 
+    // If GDK Scaling is applied, then get divide width by scaling
+    // to get the proper coordinates.
+    // Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
+    // end of the monitor is the 1430th pixel.
+    const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
+
+    if (/^\d+(.\d+)?$/.test(gdkScale)) {
+      const scale = parseFloat(gdkScale);
+      monWidth = monWidth / scale;
+      monHeight = monHeight / scale;
+    }
+
     // If monitor is vertical (transform = 1 || 3) swap height and width
     if (hyprland.monitors[hyprland.active.monitor.id].transform % 2 !== 0) {
       [monWidth, monHeight] = [monHeight, monWidth];

modules/menus/bluetooth/devices/devicelist.js

@@ -49,12 +49,12 @@ const devices = (bluetooth, self) => {
         hpack: "center",
         children: [
           Widget.Label({
-            class_name: "dim",
+            class_name: "no-bluetooth-devices dim",
             hexpand: true,
             label: "No devices currently found",
           }),
           Widget.Label({
-            class_name: "dim",
+            class_name: "search-bluetooth-label dim",
             hexpand: true,
             label: "Press '󰑐' to search",
           }),

options.ts

@@ -244,6 +244,10 @@ const options = mkOptions(OPTIONS, {
                             active: opt(colors.maroon)
                         },
                         iconbutton: {
+                            passive: opt(colors.text),
+                            active: opt(colors.maroon),
+                        },
+                        icons: {
                             passive: opt(colors.overlay2),
                             active: opt(colors.maroon),
                         },
@@ -287,7 +291,7 @@ const options = mkOptions(OPTIONS, {
                         },
                         iconbuttons: {
                             passive: opt(colors.text),
-                            hover: opt(colors.mauve)
+                            active: opt(colors.mauve)
                         },
                     },
                     bluetooth: {
@@ -319,9 +323,9 @@ const options = mkOptions(OPTIONS, {
                             passive: opt(colors.text),
                             active: opt(colors.sky),
                         },
-                        iconbuttons: {
+                        iconbutton: {
                             passive: opt(colors.text),
-                            hover: opt(colors.sky)
+                            active: opt(colors.sky)
                         },
                     },
                     systray: {
@@ -356,6 +360,12 @@ const options = mkOptions(OPTIONS, {
                             passive: opt(colors.overlay2),
                             active: opt(colors.yellow),
                         },
+                        slider: {
+                            primary: opt(colors.lavender),
+                            background: opt(colors.surface2),
+                            backgroundhover: opt(colors.surface1),
+                            puck: opt(colors.overlay0)
+                        },
                     },
                     clock: {
                         card: {
@@ -573,6 +583,7 @@ const options = mkOptions(OPTIONS, {
                 "volume",
                 "network",
                 "bluetooth",
+                "battery",
                 "systray",
                 "clock",
                 "notifications"

scss/style/menus/audiomenu.scss

@@ -13,12 +13,43 @@
     color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-volume-icons-active);
 }
 
-.menu-active-slider {
+.menu-slider.playback {
     trough {
+        background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-audio_slider-background);
 
         highlight,
         progress {
-            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary);
+            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-audio_slider-primary);
+        }
+    }
+
+    &:hover {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-audio_slider-backgroundhover);
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-audio_slider-puck);
+        }
+    }
+}
+.menu-slider.inputs {
+    trough {
+        background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-volume-input_slider-background);
+
+        highlight,
+        progress {
+            background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-volume-input_slider-primary);
+        }
+    }
+
+    &:hover {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-volume-input_slider-backgroundhover);
+        }
+
+        slider {
+            background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-volume-input_slider-puck);
         }
     }
 }
@@ -26,28 +57,28 @@
 .menu-active-button {
     .menu-active-icon.playback,
     .menu-active-icon.input {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbuttons-active);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
         opacity: 1;
     }
 
     &.muted {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbuttons-passive);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
             opacity: 1;
         }
     }
     &:hover {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbuttons-passive);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-volume-iconbutton-passive);
             opacity: 0.3;
         }
     }
     &.muted:hover {
         .menu-active-icon.playback,
         .menu-active-icon.input {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-volume-iconbutton-active);
             opacity: 1;
         }
     }

scss/style/menus/bluetooth.scss

@@ -1,4 +1,5 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.bluetooth {
     font-size: 1.3em;
@@ -28,11 +29,11 @@
 
         &.search {
             image {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbuttons-passive);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
             }
 
             &:hover image {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
             }
 
             font-size: 0.8em;
@@ -40,15 +41,15 @@
         }
 
         &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
         }
     }
 
     .menu-icon-button.bluetooth {
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbuttons-passive);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-bluetooth-iconbutton-passive);
 
         &:hover {
-            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
         }
     }
 
@@ -57,7 +58,7 @@
 
         &:hover {
             .menu-button-icon, .menu-button-name {
-                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
             }
         }
 
@@ -97,7 +98,7 @@
     spinner {
         min-height: 1.3em;
         min-width: 1.3em;
-        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbuttons-active);
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-bluetooth-iconbutton-active);
     }
 
     .menu-separator {
@@ -129,4 +130,9 @@
             background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled);
         }
     }
+
+    .no-bluetooth-devices.dim, .search-bluetooth-label.dim{
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-bluetooth-text);
+        opacity: 0.5;
+    }
 }

scss/style/menus/energy.scss

@@ -1,8 +1,9 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.energy {
     .menu-label {
-        color: $yellow;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-battery-label-color);
     }
 
     .power-profile-item {
@@ -16,19 +17,18 @@
             font-size: 1.3em;
             min-width: 1em;
             min-height: 1em;
-
+            color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
-            color: $overlay1;
         }
 
         &:hover {
             label {
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
             }
         }
 
         &.active {
             image {
-                color: $yellow;
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
             }
         }
     }
@@ -36,7 +36,7 @@
         trough {
             highlight,
             progress {
-                background: $yellow;
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
             }
         }
     }
@@ -58,4 +58,25 @@
         font-weight: bold;
         margin-bottom: 0.2em;
     }
+
+    .menu-slider.brightness {
+        trough {
+            background: if($bar-menus-monochrome, $bar-menus-slider-background, $bar-menus-menu-battery-slider-background);
+
+            highlight,
+            progress {
+                background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-battery-slider-primary);
+            }
+        }
+
+        &:hover {
+            trough {
+                background: if($bar-menus-monochrome, $bar-menus-slider-backgroundhover, $bar-menus-menu-battery-slider-backgroundhover);
+            }
+
+            slider {
+                background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-battery-slider-puck);
+            }
+        }
+    }
 }

scss/style/menus/network.scss

@@ -1,4 +1,5 @@
 @import "../colors";
+@import '../../variables';
 
 .menu-items-container.network {
     font-size: 1.3em;
@@ -6,32 +7,30 @@
         padding-bottom: 1.5em;
     }
     .menu-label {
-        color: $mauve;
+        color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-network-label-color);
-    }
-
-    .menu-icon-button.network {
-        margin: 1em;
-
-        &:hover {
-            color: $mauve;
-        }
     }
 
     .network-icon {
         font-size: 1.3em;
         min-width: 1em;
         min-height: 1em;
-        color: $overlay1;
+        color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-network-icons-passive);
 
         &.active {
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
         }
     }
 
+    .menu-icon-button.network {
+        margin: 1em;
+    }
+
     .connection-container {
         margin-left: 1em;
     }
-    .connection-status {
+    .connection-status.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
         font-size: 0.9em;
     }
     .menu-section-container.wifi {
@@ -42,7 +41,6 @@
     }
 
     .network-element-item {
-
         &:not(:last-child) {
             margin-bottom: 0.5em;
         }
@@ -52,16 +50,31 @@
         }
 
         &:hover {
-            color: $mauve;
+            .network-icon {
+                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-network-icons-active);
+                opacity: 1;
+            }
+            .active-connection {
+                color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
+            }
+        }
+
+        .active-connection {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        }
+        .active-connection.dim {
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
         }
     }
 
     .spinner.wap {
-        color: $mauve;
+        color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
     }
 
     .network-password-input-container {
-        background: $mantle;
+        background: darken(if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-network-card-color), 5%);
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
         border-radius: 0.4em;
         margin: 0em 2em;
         margin-top: 0.75em;
@@ -71,7 +84,17 @@
     .close-network-password-input-button {
         padding: 0em 0.5em;
         &:hover image { 
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+            opacity: 0.5;
+        }
+    }
+
+    .menu-icon-button.network.search {
+        label {
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-passive, $bar-menus-menu-network-iconbuttons-passive);
+        }
+        &:hover { 
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
         }
     }
     
@@ -83,7 +106,12 @@
             font-size: 1.4em;
         }
         &:hover { 
-            color: $mauve;
+            color: if($bar-menus-monochrome, $bar-menus-iconbuttons-active, $bar-menus-menu-network-iconbuttons-active);
         }
     }
+
+    .waps-not-found.dim {
+        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-network-text);
+        opacity: 0.5;
+    }
 }

scss/variables.scss

@@ -120,8 +120,10 @@ $bar-menus-menu-volume-label-color: #eba0ac;
 $bar-menus-menu-volume-text: #cdd6f4;
 $bar-menus-menu-volume-listitems-passive: #cdd6f4;
 $bar-menus-menu-volume-listitems-active: #eba0ac;
-$bar-menus-menu-volume-iconbutton-passive: #9399b2;
+$bar-menus-menu-volume-iconbutton-passive: #cdd6f4;
 $bar-menus-menu-volume-iconbutton-active: #eba0ac;
+$bar-menus-menu-volume-icons-passive: #9399b2;
+$bar-menus-menu-volume-icons-active: #eba0ac;
 $bar-menus-menu-volume-audio_slider-primary: #eba0ac;
 $bar-menus-menu-volume-audio_slider-background: #585b70;
 $bar-menus-menu-volume-audio_slider-backgroundhover: #45475a;
@@ -141,7 +143,7 @@ $bar-menus-menu-network-listitems-active: #cba6f7;
 $bar-menus-menu-network-icons-passive: #9399b2;
 $bar-menus-menu-network-icons-active: #cba6f7;
 $bar-menus-menu-network-iconbuttons-passive: #cdd6f4;
-$bar-menus-menu-network-iconbuttons-hover: #cba6f7;
+$bar-menus-menu-network-iconbuttons-active: #cba6f7;
 $bar-menus-menu-bluetooth-card-color: #1e1e2e;
 $bar-menus-menu-bluetooth-background-color: #11111b;
 $bar-menus-menu-bluetooth-border-color: #313244;
@@ -156,8 +158,8 @@ $bar-menus-menu-bluetooth-listitems-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-listitems-active: #89dceb;
 $bar-menus-menu-bluetooth-icons-passive: #cdd6f4;
 $bar-menus-menu-bluetooth-icons-active: #89dceb;
-$bar-menus-menu-bluetooth-iconbuttons-passive: #cdd6f4;
+$bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4;
-$bar-menus-menu-bluetooth-iconbuttons-hover: #89dceb;
+$bar-menus-menu-bluetooth-iconbutton-active: #89dceb;
 $bar-menus-menu-systray-background-color: #242438;
 $bar-menus-menu-systray-dropdownmenu-background: #11111b;
 $bar-menus-menu-systray-dropdownmenu-text: #cdd6f4;
@@ -171,6 +173,10 @@ $bar-menus-menu-battery-listitems-passive: #cdd6f4;
 $bar-menus-menu-battery-listitems-active: #f9e2af;
 $bar-menus-menu-battery-icons-passive: #9399b2;
 $bar-menus-menu-battery-icons-active: #f9e2af;
+$bar-menus-menu-battery-slider-primary: #b4befe;
+$bar-menus-menu-battery-slider-background: #585b70;
+$bar-menus-menu-battery-slider-backgroundhover: #45475a;
+$bar-menus-menu-battery-slider-puck: #6c7086;
 $bar-menus-menu-clock-card-color: #1e1e2e;
 $bar-menus-menu-clock-background-color: #11111b;
 $bar-menus-menu-clock-border-color: #313244;