Implement styling options for all the bar components (not menus) through options variables.

modules/bar/Bar.ts

@@ -1,4 +1,3 @@
-const network = await Service.import("network");
 import { Menu } from "./menu/index.js";
 import { Workspaces } from "./workspaces/index.js";
 import { ClientTitle } from "./window_title/index.js";

modules/bar/battery/index.js

@@ -53,6 +53,7 @@ const BatteryLabel = () => {
       },
     }),
     isVis,
+    boxClass: "battery",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "energymenu");

modules/bar/bluetooth/index.js

@@ -18,6 +18,7 @@ const Bluetooth = () => {
       children: [btIcon, btText],
     }),
     isVisible: true,
+    boxClass: "bluetooth",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "bluetoothmenu");

modules/bar/clock/index.js

@@ -11,6 +11,7 @@ const Clock = () => {
       label: date.bind(),
     }),
     isVisible: true,
+    boxClass: "clock",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "calendarmenu");

modules/bar/media/index.js

@@ -86,6 +86,7 @@ const Media = () => {
       }),
     }),
     isVisible: false,
+    boxClass: "media",
     name: "media",
     props: {
       on_scroll_up: () => mpris.getPlayer("")?.next(),

modules/bar/menu/index.js

@@ -9,6 +9,7 @@ const Menu = () => {
       }),
     }),
     isVisible: true,
+    boxClass: "dashboard",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "dashboardmenu");

modules/bar/network/index.js

@@ -1,14 +1,14 @@
 const network = await Service.import("network");
 import { openMenu } from "../utils.js";
 
-import { globalMousePos } from "../../../globals.js";
-
 const Network = () => {
   const wifiIndicator = [
     Widget.Icon({
+      class_name: "bar-network-icon",
       icon: network.wifi.bind("icon_name"),
     }),
     Widget.Label({
+      class_name: "bar-network-label",
       label: network.wifi
         .bind("ssid")
         .as((ssid) => (ssid ? `  ${ssid}` : "  --").substring(0, 7)),
@@ -16,8 +16,13 @@ const Network = () => {
   ];
 
   const wiredIndicator = [
+    Widget.Icon({
+      class_name: "bar-network-icon",
+      icon: network.wired.bind("icon_name"),
+    }),
     Widget.Label({
-      label: network.bind("wired").as(() => "󰈀  Wired"),
+      class_name: "bar-network-label",
+      label: network.bind("wired").as(() => "  Wired"),
     }),
   ];
 
@@ -30,6 +35,7 @@ const Network = () => {
         .as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)),
     }),
     isVisible: true,
+    boxClass: "network",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "networkmenu");

modules/bar/notifications/index.js

@@ -27,6 +27,7 @@ export const Notifications = () => {
       }),
     }),
     isVisible: true,
+    boxClass: "notifications",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "notificationsmenu");

modules/bar/power/index.js

@@ -10,6 +10,7 @@ export const Power = () => {
       }),
     }),
     isVisible: true,
+    boxClass: "power",
     props: {
       on_clicked: () => App.toggleWindow("powermenu"),
     },

modules/bar/systray/index.js

@@ -29,6 +29,7 @@ const SysTray = () => {
       children: items,
     }),
     isVisible: true,
+    boxClass: "systray",
     isVis,
   };
 };

modules/bar/volume/index.js

@@ -44,6 +44,7 @@ const Volume = () => {
       children: [volIcn, volPct],
     }),
     isVisible: true,
+    boxClass: "volume",
     props: {
       on_primary_click: (clicked, event) => {
         openMenu(clicked, event, "audiomenu");

modules/bar/window_title/index.js

@@ -29,6 +29,7 @@ const ClientTitle = () => {
       label: hyprland.active.bind("client").as((v) => filterTitle(v)),
     }),
     isVisible: true,
+    boxClass: "windowtitle",
   };
 };
 

modules/bar/workspaces/index.js

@@ -89,6 +89,7 @@ const Workspaces = (monitor = -1, ws = 8) => {
       },
     }),
     isVisible: true,
+    boxClass: "workspaces",
   };
 };
 export { Workspaces };