Added the ability to define custom icons for the system tray. (#408)

* Added the ability to define custom icons for the system tray.

* Add placeholder icon if icon is not defined.

* Update themes

globals.d.ts

@@ -5,6 +5,7 @@ import { Options, Variable as VariableType } from 'types/variable';
 
 declare global {
     var useTheme: (filePath: string) => void;
+    var getSystrayItems: () => string;
     var isWindowVisible: (windowName: string) => boolean;
     var globalWeatherVar: VariableType<Weather>;
     var options: Options;

globals/systray.ts

@@ -0,0 +1,7 @@
+const systemtray = await Service.import('systemtray');
+
+globalThis.getSystrayItems = (): string => {
+    return systemtray.items.map((systrayItem) => systrayItem.id).join('\n');
+};
+
+export { getSystrayItems };

lib/types/systray.d.ts

@@ -0,0 +1,6 @@
+export type SystrayIconMap = {
+    [key: string]: {
+        icon: string;
+        color: string;
+    };
+};

main.ts

@@ -1,6 +1,7 @@
 import 'lib/session';
 import 'scss/style';
 import 'globals/useTheme';
+import 'globals/systray';
 import 'globals/dropdown.js';
 import 'globals/utilities';
 

modules/bar/systray/index.ts

@@ -4,17 +4,39 @@ import { Notify } from 'lib/utils';
 const systemtray = await Service.import('systemtray');
 import options from 'options';
 
-const { ignore } = options.bar.systray;
+const { ignore, customIcons } = options.bar.systray;
 
 const SysTray = (): BarBoxChild => {
     const isVis = Variable(false);
 
-    const items = Utils.merge([systemtray.bind('items'), ignore.bind('value')], (items, ignored) => {
+    const items = Utils.merge(
+        [systemtray.bind('items'), ignore.bind('value'), customIcons.bind('value')],
+        (items, ignored, custIcons) => {
             const filteredTray = items.filter(({ id }) => !ignored.includes(id));
 
             isVis.value = filteredTray.length > 0;
 
             return filteredTray.map((item) => {
+                const matchedCustomIcon = Object.keys(custIcons).find((iconRegex) => item.id.match(iconRegex));
+
+                if (matchedCustomIcon !== undefined) {
+                    const iconLabel = custIcons[matchedCustomIcon].icon || '󰠫';
+                    const iconColor = custIcons[matchedCustomIcon].color;
+
+                    return Widget.Button({
+                        cursor: 'pointer',
+                        child: Widget.Label({
+                            class_name: 'systray-icon txt-icon',
+                            label: iconLabel,
+                            css: iconColor ? `color: ${iconColor}` : '',
+                        }),
+                        on_primary_click: (_: SelfButton, event: Gdk.Event) => item.activate(event),
+                        on_secondary_click: (_, event) => item.openMenu(event),
+                        onMiddleClick: () => Notify({ summary: 'App Name', body: item.id }),
+                        tooltip_markup: item.bind('tooltip_markup'),
+                    });
+                }
+
                 return Widget.Button({
                     cursor: 'pointer',
                     child: Widget.Icon({
@@ -27,7 +49,8 @@ const SysTray = (): BarBoxChild => {
                     tooltip_markup: item.bind('tooltip_markup'),
                 });
             });
-    });
+        },
+    );
 
     return {
         component: Widget.Box({

options.ts

@@ -13,6 +13,7 @@ import {
     WindowLayer,
 } from 'lib/types/options';
 import { MatugenScheme, MatugenTheme, MatugenVariations } from 'lib/types/options';
+import { SystrayIconMap } from 'lib/types/systray';
 import { UnitType } from 'lib/types/weather';
 import { Transition } from 'lib/types/widget';
 import { ApplicationIcons, WorkspaceIcons, WorkspaceIconsColored } from 'lib/types/workspace';
@@ -242,6 +243,7 @@ const options = mkOptions(OPTIONS, {
                 },
                 systray: {
                     enableBorder: opt(false),
+                    customIcon: opt(colors.text),
                     border: opt(colors.lavender),
                     background: opt(colors.base2),
                     spacing: opt('0.5em'),
@@ -923,6 +925,7 @@ const options = mkOptions(OPTIONS, {
         },
         systray: {
             ignore: opt<string[]>([]),
+            customIcons: opt<SystrayIconMap>({}),
         },
         clock: {
             icon: opt('󰸗'),

scss/style/bar/systray.scss

@@ -4,6 +4,10 @@
 
 .systray-icon {
     font-size: 1.3em;
+
+    &.txt-icon {
+        color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-systray-customIcon);
+    }
 }
 
 .style2.systray {

themes/catppuccin_frappe.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#303446",
   "theme.bar.menus.menu.network.switch.enabled": "#ca9ee6",
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
-  "theme.bar.menus.menu.network.switch.puck": "#51576d"
+  "theme.bar.menus.menu.network.switch.puck": "#51576d",
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5"
 }

themes/catppuccin_frappe_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#81c8be",
   "theme.bar.menus.menu.network.switch.enabled": "#ca9ee6",
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
-  "theme.bar.menus.menu.network.switch.puck": "#51576d"
+  "theme.bar.menus.menu.network.switch.puck": "#51576d",
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5"
 }

themes/catppuccin_frappe_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#303446",
   "theme.bar.menus.menu.network.switch.puck": "#51576d",
   "theme.bar.menus.menu.network.switch.disabled": "#414559",
-  "theme.bar.menus.menu.network.switch.enabled": "#ca9ee6"
+  "theme.bar.menus.menu.network.switch.enabled": "#ca9ee6",
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5"
 }

themes/catppuccin_latte.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#dcdfe8",
   "theme.bar.menus.menu.network.switch.enabled": "#8839ef",
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
-  "theme.bar.menus.menu.network.switch.puck": "#bcc0cc"
+  "theme.bar.menus.menu.network.switch.puck": "#bcc0cc",
+  "theme.bar.buttons.systray.customIcon": "#4c4f69"
 }

themes/catppuccin_latte_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#179299",
   "theme.bar.menus.menu.network.switch.enabled": "#8839ef",
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
-  "theme.bar.menus.menu.network.switch.puck": "#bcc0cc"
+  "theme.bar.menus.menu.network.switch.puck": "#bcc0cc",
+  "theme.bar.buttons.systray.customIcon": "#4c4f69"
 }

themes/catppuccin_latte_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#dcdfe8",
   "theme.bar.menus.menu.network.switch.puck": "#bcc0cc",
   "theme.bar.menus.menu.network.switch.disabled": "#ccd0da",
-  "theme.bar.menus.menu.network.switch.enabled": "#8839ef"
+  "theme.bar.menus.menu.network.switch.enabled": "#8839ef",
+  "theme.bar.buttons.systray.customIcon": "#4c4f69"
 }

themes/catppuccin_macchiato.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#24273a",
   "theme.bar.menus.menu.network.switch.enabled": "#c6a0f6",
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
-  "theme.bar.menus.menu.network.switch.puck": "#494d64"
+  "theme.bar.menus.menu.network.switch.puck": "#494d64",
+  "theme.bar.buttons.systray.customIcon": "#cad3f5"
 }

themes/catppuccin_macchiato_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#8bd5ca",
   "theme.bar.menus.menu.network.switch.enabled": "#c6a0f6",
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
-  "theme.bar.menus.menu.network.switch.puck": "#494d64"
+  "theme.bar.menus.menu.network.switch.puck": "#494d64",
+  "theme.bar.buttons.systray.customIcon": "#cad3f5"
 }

themes/catppuccin_macchiato_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#24273a",
   "theme.bar.menus.menu.network.switch.puck": "#494d64",
   "theme.bar.menus.menu.network.switch.disabled": "#363a4f",
-  "theme.bar.menus.menu.network.switch.enabled": "#c6a0f6"
+  "theme.bar.menus.menu.network.switch.enabled": "#c6a0f6",
+  "theme.bar.buttons.systray.customIcon": "#cad3f5"
 }

themes/catppuccin_mocha.json

@@ -273,6 +273,7 @@
     "theme.bar.buttons.battery.border": "#f9e2af",
     "theme.bar.buttons.systray.background": "#242438",
     "theme.bar.buttons.systray.border": "#b4befe",
+    "theme.bar.buttons.systray.customIcon": "#cdd6f4",
     "theme.bar.buttons.bluetooth.icon_background": "#89dbeb",
     "theme.bar.buttons.bluetooth.icon": "#89dceb",
     "theme.bar.buttons.bluetooth.text": "#89dceb",

themes/catppuccin_mocha_split.json

@@ -327,6 +327,7 @@
     "theme.bar.buttons.clock.border": "#f5c2e7",
     "theme.bar.buttons.battery.border": "#f9e2af",
     "theme.bar.buttons.systray.border": "#b4befe",
+    "theme.bar.buttons.systray.customIcon": "#cdd6f4",
     "theme.bar.buttons.bluetooth.border": "#89dceb",
     "theme.bar.buttons.network.border": "#cba6f7",
     "theme.bar.buttons.volume.border": "#eba0ac",

themes/catppuccin_mocha_vivid.json

@@ -281,6 +281,7 @@
     "theme.bar.buttons.battery.border": "#f9e2af",
     "theme.bar.buttons.systray.background": "#242438",
     "theme.bar.buttons.systray.border": "#b4befe",
+    "theme.bar.buttons.systray.customIcon": "#cdd6f4",
     "theme.bar.buttons.bluetooth.icon_background": "#89dbeb",
     "theme.bar.buttons.bluetooth.icon": "#242438",
     "theme.bar.buttons.bluetooth.text": "#242438",
@@ -342,3 +343,4 @@
     "theme.notification.actions.background": "#b4befd",
     "theme.notification.background": "#181826"
 }
+

themes/cyberpunk.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#121212",
   "theme.bar.menus.menu.network.switch.enabled": "#FF69B4",
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
-  "theme.bar.menus.menu.network.switch.puck": "#333333"
+  "theme.bar.menus.menu.network.switch.puck": "#333333",
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1"
 }

themes/cyberpunk_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#FF69B4",
   "theme.bar.menus.menu.network.switch.enabled": "#FF69B4",
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
-  "theme.bar.menus.menu.network.switch.puck": "#333333"
+  "theme.bar.menus.menu.network.switch.puck": "#333333",
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1"
 }

themes/cyberpunk_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#121212",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.menus.menu.network.switch.disabled": "#2A2A2A",
-  "theme.bar.menus.menu.network.switch.enabled": "#FF69B4"
+  "theme.bar.menus.menu.network.switch.enabled": "#FF69B4",
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1"
 }

themes/dracula.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#44475a",
   "theme.bar.menus.menu.network.switch.enabled": "#bd93f9",
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
-  "theme.bar.menus.menu.network.switch.puck": "#44475a"
+  "theme.bar.menus.menu.network.switch.puck": "#44475a",
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2"
 }

themes/dracula_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#8be9fd",
   "theme.bar.menus.menu.network.switch.enabled": "#bd93f9",
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
-  "theme.bar.menus.menu.network.switch.puck": "#44475a"
+  "theme.bar.menus.menu.network.switch.puck": "#44475a",
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2"
 }

themes/dracula_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#44475a",
   "theme.bar.menus.menu.network.switch.puck": "#44475a",
   "theme.bar.menus.menu.network.switch.disabled": "#44475a",
-  "theme.bar.menus.menu.network.switch.enabled": "#bd93f9"
+  "theme.bar.menus.menu.network.switch.enabled": "#bd93f9",
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2"
 }

themes/everforest.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#323d43",
   "theme.bar.menus.menu.network.switch.enabled": "#e69875",
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
-  "theme.bar.menus.menu.network.switch.puck": "#454b53"
+  "theme.bar.menus.menu.network.switch.puck": "#454b53",
+  "theme.bar.buttons.systray.customIcon": "#d8caac"
 }

themes/everforest_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#83c092",
   "theme.bar.menus.menu.network.switch.enabled": "#e69875",
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
-  "theme.bar.menus.menu.network.switch.puck": "#454b53"
+  "theme.bar.menus.menu.network.switch.puck": "#454b53",
+  "theme.bar.buttons.systray.customIcon": "#d8caac"
 }

themes/everforest_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#323d43",
   "theme.bar.menus.menu.network.switch.puck": "#454b53",
   "theme.bar.menus.menu.network.switch.disabled": "#2f383e",
-  "theme.bar.menus.menu.network.switch.enabled": "#e69875"
+  "theme.bar.menus.menu.network.switch.enabled": "#e69875",
+  "theme.bar.buttons.systray.customIcon": "#d8caac"
 }

themes/gruvbox.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#282828",
   "theme.bar.menus.menu.network.switch.enabled": "#b16286",
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
-  "theme.bar.menus.menu.network.switch.puck": "#504945"
+  "theme.bar.menus.menu.network.switch.puck": "#504945",
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2"
 }

themes/gruvbox_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#8ec07c",
   "theme.bar.menus.menu.network.switch.enabled": "#b16286",
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
-  "theme.bar.menus.menu.network.switch.puck": "#504945"
+  "theme.bar.menus.menu.network.switch.puck": "#504945",
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2"
 }

themes/gruvbox_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#282828",
   "theme.bar.menus.menu.network.switch.puck": "#504945",
   "theme.bar.menus.menu.network.switch.disabled": "#3c3836",
-  "theme.bar.menus.menu.network.switch.enabled": "#b16286"
+  "theme.bar.menus.menu.network.switch.enabled": "#b16286",
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2"
 }

themes/monochrome.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#090909",
   "theme.bar.menus.menu.network.switch.enabled": "#FFFFFF",
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
-  "theme.bar.menus.menu.network.switch.puck": "#333333"
+  "theme.bar.menus.menu.network.switch.puck": "#333333",
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF"
 }

themes/monochrome_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#FFFFFF",
   "theme.bar.menus.menu.network.switch.enabled": "#FFFFFF",
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
-  "theme.bar.menus.menu.network.switch.puck": "#333333"
+  "theme.bar.menus.menu.network.switch.puck": "#333333",
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF"
 }

themes/monochrome_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#090909",
   "theme.bar.menus.menu.network.switch.puck": "#333333",
   "theme.bar.menus.menu.network.switch.disabled": "#444444",
-  "theme.bar.menus.menu.network.switch.enabled": "#FFFFFF"
+  "theme.bar.menus.menu.network.switch.enabled": "#FFFFFF",
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF"
 }

themes/nord.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#3b4252",
   "theme.bar.menus.menu.network.switch.enabled": "#88c0d0",
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
-  "theme.bar.menus.menu.network.switch.puck": "#434c53"
+  "theme.bar.menus.menu.network.switch.puck": "#434c53",
+  "theme.bar.buttons.systray.customIcon": "#d8dee9"
 }

themes/nord_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#8fbcbb",
   "theme.bar.menus.menu.network.switch.enabled": "#88c0d0",
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
-  "theme.bar.menus.menu.network.switch.puck": "#434c53"
+  "theme.bar.menus.menu.network.switch.puck": "#434c53",
+  "theme.bar.buttons.systray.customIcon": "#d8dee9"
 }

themes/nord_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#3b4252",
   "theme.bar.menus.menu.network.switch.puck": "#434c53",
   "theme.bar.menus.menu.network.switch.disabled": "#434c53",
-  "theme.bar.menus.menu.network.switch.enabled": "#88c0d0"
+  "theme.bar.menus.menu.network.switch.enabled": "#88c0d0",
+  "theme.bar.buttons.systray.customIcon": "#d8dee9"
 }

themes/one_dark.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#21252b",
   "theme.bar.menus.menu.network.switch.enabled": "#c678dd",
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
-  "theme.bar.menus.menu.network.switch.puck": "#4b5263"
+  "theme.bar.menus.menu.network.switch.puck": "#4b5263",
+  "theme.bar.buttons.systray.customIcon": "#abb2bf"
 }

themes/one_dark_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#56b6c2",
   "theme.bar.menus.menu.network.switch.enabled": "#c678dd",
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
-  "theme.bar.menus.menu.network.switch.puck": "#4b5263"
+  "theme.bar.menus.menu.network.switch.puck": "#4b5263",
+  "theme.bar.buttons.systray.customIcon": "#abb2bf"
 }

themes/one_dark_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#21252b",
   "theme.bar.menus.menu.network.switch.puck": "#4b5263",
   "theme.bar.menus.menu.network.switch.disabled": "#3e4451",
-  "theme.bar.menus.menu.network.switch.enabled": "#c678dd"
+  "theme.bar.menus.menu.network.switch.enabled": "#c678dd",
+  "theme.bar.buttons.systray.customIcon": "#abb2bf"
 }

themes/rose_pine.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#21202e",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
-  "theme.bar.menus.menu.network.switch.puck": "#26233a"
+  "theme.bar.menus.menu.network.switch.puck": "#26233a",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/rose_pine_moon.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#2a283e",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
-  "theme.bar.menus.menu.network.switch.puck": "#393552"
+  "theme.bar.menus.menu.network.switch.puck": "#393552",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/rose_pine_moon_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#9ccfd8",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
-  "theme.bar.menus.menu.network.switch.puck": "#393552"
+  "theme.bar.menus.menu.network.switch.puck": "#393552",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/rose_pine_moon_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#2a283e",
   "theme.bar.menus.menu.network.switch.puck": "#393552",
   "theme.bar.menus.menu.network.switch.disabled": "#2a273f",
-  "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7"
+  "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/rose_pine_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#9ccfd8",
   "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
-  "theme.bar.menus.menu.network.switch.puck": "#26233a"
+  "theme.bar.menus.menu.network.switch.puck": "#26233a",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/rose_pine_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#21202e",
   "theme.bar.menus.menu.network.switch.puck": "#26233a",
   "theme.bar.menus.menu.network.switch.disabled": "#1f1d2e",
-  "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7"
+  "theme.bar.menus.menu.network.switch.enabled": "#c4a7e7",
+  "theme.bar.buttons.systray.customIcon": "#e0def4"
 }

themes/tokyo_night.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#272a3d",
   "theme.bar.menus.menu.network.switch.enabled": "#bb9af7",
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
-  "theme.bar.menus.menu.network.switch.puck": "#565f89"
+  "theme.bar.menus.menu.network.switch.puck": "#565f89",
+  "theme.bar.buttons.systray.customIcon": "#c0caf5"
 }

themes/tokyo_night_split.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#73daca",
   "theme.bar.menus.menu.network.switch.enabled": "#bb9af7",
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
-  "theme.bar.menus.menu.network.switch.puck": "#565f89"
+  "theme.bar.menus.menu.network.switch.puck": "#565f89",
+  "theme.bar.buttons.systray.customIcon": "#c0caf5"
 }

themes/tokyo_night_vivid.json

@@ -340,5 +340,6 @@
   "theme.bar.buttons.modules.submap.icon_background": "#272a3d",
   "theme.bar.menus.menu.network.switch.puck": "#565f89",
   "theme.bar.menus.menu.network.switch.disabled": "#565f89",
-  "theme.bar.menus.menu.network.switch.enabled": "#bb9af7"
+  "theme.bar.menus.menu.network.switch.enabled": "#bb9af7",
+  "theme.bar.buttons.systray.customIcon": "#c0caf5"
 }

widget/settings/pages/config/bar/index.ts

@@ -651,6 +651,15 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     subtitleLink: 'https://hyprpanel.com/configuration/panel.html#system-tray',
                     type: 'object',
                 }),
+                Option({
+                    opt: options.bar.systray.customIcons,
+                    title: 'Custom Systray Icons',
+                    subtitle:
+                        'An object defining custom icons for the system tray.\n' +
+                        'Wiki: https://hyprpanel.com/configuration/panel.html#custom-systray-icons',
+                    subtitleLink: 'https://hyprpanel.com/configuration/panel.html#custom-systray-icons',
+                    type: 'object',
+                }),
 
                 /*
                  ******************************

widget/settings/pages/theme/bar/index.ts

@@ -13,6 +13,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
         child: Widget.Box({
             vertical: true,
             children: [
+                /* ================================================== */
+                /*                      GENERAL                       */
+                /* ================================================== */
                 Header('General'),
                 Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
                 Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
@@ -72,11 +75,17 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                     type: 'color',
                 }),
 
+                /* ================================================== */
+                /*                  DASHBOARD BUTTON                  */
+                /* ================================================== */
                 Header('Dashboard Button'),
                 Option({ opt: options.theme.bar.buttons.dashboard.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.dashboard.icon, title: 'Icon', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.dashboard.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                    WORKSPACES                      */
+                /* ================================================== */
                 Header('Workspaces'),
                 Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }),
                 Option({
@@ -111,6 +120,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.workspaces.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                   WINDOW TITLE                     */
+                /* ================================================== */
                 Header('Window Title'),
                 Option({ opt: options.theme.bar.buttons.windowtitle.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.windowtitle.text, title: 'Text', type: 'color' }),
@@ -124,6 +136,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.windowtitle.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                      MEDIA                         */
+                /* ================================================== */
                 Header('Media'),
                 Option({ opt: options.theme.bar.buttons.media.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.media.text, title: 'Text', type: 'color' }),
@@ -137,6 +152,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.media.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                      VOLUME                        */
+                /* ================================================== */
                 Header('Volume'),
                 Option({ opt: options.theme.bar.buttons.volume.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.volume.text, title: 'Text', type: 'color' }),
@@ -150,6 +168,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.volume.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                     NETWORK                        */
+                /* ================================================== */
                 Header('Network'),
                 Option({ opt: options.theme.bar.buttons.network.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.network.text, title: 'Text', type: 'color' }),
@@ -163,6 +184,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.network.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                    BLUETOOTH                       */
+                /* ================================================== */
                 Header('Bluetooth'),
                 Option({ opt: options.theme.bar.buttons.bluetooth.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.bluetooth.text, title: 'Text', type: 'color' }),
@@ -176,9 +200,17 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.bluetooth.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                   SYSTEM TRAY                      */
+                /* ================================================== */
                 Header('System Tray'),
+                Option({ opt: options.theme.bar.buttons.systray.border, title: 'Border', type: 'color' }),
+                Option({ opt: options.theme.bar.buttons.systray.customIcon, title: 'Custom Icons', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.systray.background, title: 'Background', type: 'color' }),
 
+                /* ================================================== */
+                /*                     BATTERY                        */
+                /* ================================================== */
                 Header('Battery'),
                 Option({ opt: options.theme.bar.buttons.battery.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.battery.text, title: 'Text', type: 'color' }),
@@ -192,6 +224,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.battery.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                      CLOCK                         */
+                /* ================================================== */
                 Header('Clock'),
                 Option({ opt: options.theme.bar.buttons.clock.background, title: 'Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.clock.text, title: 'Text', type: 'color' }),
@@ -205,6 +240,9 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                 }),
                 Option({ opt: options.theme.bar.buttons.clock.border, title: 'Border', type: 'color' }),
 
+                /* ================================================== */
+                /*                   NOTIFICATIONS                    */
+                /* ================================================== */
                 Header('Notifications'),
                 Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),
                 Option({