From 9bc00909e2145d24e8715dd9a001031965ef8a7d Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Sun, 21 Jul 2024 19:21:07 -0700
Subject: [PATCH] Added more configuration menus for battery, bluetooth, clock,
 dashboard, media, network, notification, systray and volume menus.

---
 options.ts                                    | 13 -----
 scss/style/bar/bar.scss                       | 22 +++----
 scss/variables.scss                           |  2 +-
 widget/settings/pages/theme/menus/battery.ts  | 46 +++++++++++++++
 .../settings/pages/theme/menus/bluetooth.ts   | 55 ++++++++++++++++++
 widget/settings/pages/theme/menus/clock.ts    | 55 ++++++++++++++++++
 .../settings/pages/theme/menus/dashboard.ts   |  0
 widget/settings/pages/theme/menus/index.ts    | 43 ++++++++++++++
 widget/settings/pages/theme/menus/media.ts    | 37 ++++++++++++
 widget/settings/pages/theme/menus/network.ts  | 47 +++++++++++++++
 .../pages/theme/menus/notifications.ts        |  0
 widget/settings/pages/theme/menus/systray.ts  | 22 +++++++
 widget/settings/pages/theme/menus/volume.ts   | 57 +++++++++++++++++++
 13 files changed, 374 insertions(+), 25 deletions(-)
 create mode 100644 widget/settings/pages/theme/menus/battery.ts
 create mode 100644 widget/settings/pages/theme/menus/bluetooth.ts
 create mode 100644 widget/settings/pages/theme/menus/clock.ts
 create mode 100644 widget/settings/pages/theme/menus/dashboard.ts
 create mode 100644 widget/settings/pages/theme/menus/media.ts
 create mode 100644 widget/settings/pages/theme/menus/network.ts
 create mode 100644 widget/settings/pages/theme/menus/notifications.ts
 create mode 100644 widget/settings/pages/theme/menus/systray.ts
 create mode 100644 widget/settings/pages/theme/menus/volume.ts

diff --git a/options.ts b/options.ts
index 345b16b..49defdb 100644
--- a/options.ts
+++ b/options.ts
@@ -165,16 +165,6 @@ const options = mkOptions(OPTIONS, {
                     passive: opt(colors.text),
                     active: opt(colors.lavender)
                 },
-                dashboard: {
-                    background: opt(colors.base2),
-                    text: opt(colors.yellow)
-                },
-                workspaces: {
-                    background: opt(colors.base2),
-                    available: opt(colors.sky),
-                    occupied: opt(colors.flamingo),
-                    active: opt(colors.pink),
-                },
                 progressbar: {
                     foreground: opt(colors.lavender),
                     background: opt(colors.surface1),
@@ -322,9 +312,6 @@ const options = mkOptions(OPTIONS, {
                         },
                     },
                     systray: {
-                        background: {
-                            color: opt(colors.base2),
-                        },
                         dropdownmenu: {
                             background: opt(colors.crust),
                             text: opt(colors.text),
diff --git a/scss/style/bar/bar.scss b/scss/style/bar/bar.scss
index 8ce5534..0bbce7c 100644
--- a/scss/style/bar/bar.scss
+++ b/scss/style/bar/bar.scss
@@ -21,67 +21,67 @@
   &.battery {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover);
     }
   }
   &.bluetooth {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover);
     }
   }
   &.clock {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover);
     }
   }
   &.media {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover);
     }
   }
   &.dashboard {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover);
     }
   }
   &.network {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover);
     }
   }
   &.notifications {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover);
     }
   }
   &.systray {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover);
     }
   }
   &.volume {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover);
     }
   }
   &.windowtitle {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover);
     }
   }
   &.workspaces {
     background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background);
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-background);
+      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-hover);
     }
   }
 }
diff --git a/scss/variables.scss b/scss/variables.scss
index e5edb44..1607c64 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -61,7 +61,7 @@ $bar-buttons-notifications-background: #242438;
 $bar-buttons-notifications-hover: #45475a;
 $bar-buttons-notifications-icon: #b4befe;
 $bar-buttons-notifications-total: #b4befe;
-$bar-menus-monochrome: false;
+$bar-menus-monochrome: true;
 $bar-menus-background: #11111b;
 $bar-menus-cards: #1e1e2e;
 $bar-menus-card_radius: 0.4em;
diff --git a/widget/settings/pages/theme/menus/battery.ts b/widget/settings/pages/theme/menus/battery.ts
new file mode 100644
index 0000000..2e82217
--- /dev/null
+++ b/widget/settings/pages/theme/menus/battery.ts
@@ -0,0 +1,46 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const BatteryMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page battery",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Battery Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.battery.text, title: 'Text', type: 'color' }),
+
+                Header('Card'),
+                Option({ opt: options.theme.bar.menus.menu.battery.card.color, title: 'Card', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.battery.background.color, title: 'Background', type: 'color' }),
+
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.battery.border.color, title: 'Border', type: 'color' }),
+
+                Header('Label'),
+                Option({ opt: options.theme.bar.menus.menu.battery.label.color, title: 'Label', type: 'color' }),
+
+                Header('List Items'),
+                Option({ opt: options.theme.bar.menus.menu.battery.listitems.active, title: 'Active/Hover', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.battery.listitems.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icons'),
+                Option({ opt: options.theme.bar.menus.menu.battery.icons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.battery.icons.passive, title: 'Passive', type: 'color' }),
+
+                Header('Slider'),
+                Option({ opt: options.theme.bar.menus.menu.battery.slider.primary, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.battery.slider.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.battery.slider.backgroundhover, title: 'Background (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.battery.slider.puck, title: 'Puck', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/bluetooth.ts b/widget/settings/pages/theme/menus/bluetooth.ts
new file mode 100644
index 0000000..095e0f0
--- /dev/null
+++ b/widget/settings/pages/theme/menus/bluetooth.ts
@@ -0,0 +1,55 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const BluetoothMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page bluetooth",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Bluetooth Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.text, title: 'Text', type: 'color' }),
+
+                Header('Card'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.card.color, title: 'Card', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.background.color, title: 'Background', type: 'color' }),
+
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.border.color, title: 'Border', type: 'color' }),
+
+                Header('Label'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.label.color, title: 'Label', type: 'color' }),
+
+                Header('Status'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.status, title: 'Connection Status', type: 'color' }),
+
+                Header('List Items'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.listitems.active, title: 'Active/Hover', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.listitems.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icons'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.icons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.icons.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icon Buttons'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.iconbutton.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.iconbutton.passive, title: 'Passive', type: 'color' }),
+
+                Header('Switch'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.switch.enabled, title: 'Enabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.switch.disabled, title: 'Disabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.switch.puck, title: 'Puck', type: 'color' }),
+
+                Header('Switch Divider'),
+                Option({ opt: options.theme.bar.menus.menu.bluetooth.switch_divider, title: 'Switch Divider', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/clock.ts b/widget/settings/pages/theme/menus/clock.ts
new file mode 100644
index 0000000..11b812f
--- /dev/null
+++ b/widget/settings/pages/theme/menus/clock.ts
@@ -0,0 +1,55 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const ClockMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page clock",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Clock Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.clock.text, title: 'Text', type: 'color' }),
+
+                Header('Card'),
+                Option({ opt: options.theme.bar.menus.menu.clock.card.color, title: 'Card', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.clock.background.color, title: 'Background', type: 'color' }),
+
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.clock.border.color, title: 'Border', type: 'color' }),
+
+                Header('Time'),
+                Option({ opt: options.theme.bar.menus.menu.clock.time.time, title: 'Time', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.time.timeperiod, title: 'Period', subtitle: 'AM/PM', type: 'color' }),
+
+                Header('Calendar'),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.yearmonth, title: 'Year/Month', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.weekdays, title: 'Weekdays', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.paginator, title: 'Navigation Arrows (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.currentday, title: 'Current Day', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.days, title: 'Days', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.calendar.contextdays, title: 'Trailing/Leading Days', type: 'color' }),
+
+                Header('Weather'),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.icon, title: 'Current Weather Icon', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.temperature, title: 'Current Temperature', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.status, title: 'Current Status', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.stats, title: 'Current Stats', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.thermometer.extremelyhot, title: 'Thermometer - Extremely Hot', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.thermometer.hot, title: 'Thermometer - Hot', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.thermometer.moderate, title: 'Thermometer - Moderate', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.thermometer.cold, title: 'Thermometer - Cold', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.thermometer.extremelycold, title: 'Thermometer - Extremely Cold', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.hourly.time, title: 'Hourly Weather Time', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.hourly.icon, title: 'Hourly Weather Icon', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.clock.weather.hourly.temperature, title: 'Hourly Weather Temperature', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/dashboard.ts b/widget/settings/pages/theme/menus/dashboard.ts
new file mode 100644
index 0000000..e69de29
diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts
index 0d394ef..64f4fb8 100644
--- a/widget/settings/pages/theme/menus/index.ts
+++ b/widget/settings/pages/theme/menus/index.ts
@@ -26,6 +26,49 @@ export const MenuTheme = () => {
                 Option({ opt: options.theme.bar.menus.border.size, title: 'Border Width', type: 'string' }),
                 Option({ opt: options.theme.bar.menus.border.radius, title: 'Border Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }),
+
+                Header('List Items'),
+                Option({ opt: options.theme.bar.menus.listitems.active, title: 'Active', subtitle: 'Items of a list (network name, bluetooth device name, playback device, etc.) when active or hovered.', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.listitems.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icons'),
+                Option({ opt: options.theme.bar.menus.icons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.icons.passive, title: 'Passive', type: 'color' }),
+
+                Header('Switch'),
+                Option({ opt: options.theme.bar.menus.switch.enabled, title: 'Enabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.switch.disabled, title: 'Disabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.switch.puck, title: 'Puck', type: 'color' }),
+
+                Header('Buttons'),
+                Option({ opt: options.theme.bar.menus.buttons.default, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.buttons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.buttons.disabled, title: 'Disabled', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.buttons.text, title: 'Text', type: 'color' }),
+
+                Header('Icon Buttons'),
+                Option({ opt: options.theme.bar.menus.iconbuttons.passive, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.iconbuttons.active, title: 'Active/Hovered', type: 'color' }),
+
+                Header('Progress Bar'),
+                Option({ opt: options.theme.bar.menus.progressbar.foreground, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.progressbar.background, title: 'Background', type: 'color' }),
+
+                Header('Slider'),
+                Option({ opt: options.theme.bar.menus.slider.primary, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.slider.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.slider.backgroundhover, title: 'Background (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.slider.puck, title: 'Puck', type: 'color' }),
+
+                Header('Dropdown Menu'),
+                Option({ opt: options.theme.bar.menus.dropdownmenu.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.dropdownmenu.text, title: 'Text', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.dropdownmenu.divider, title: 'Divider', type: 'color' }),
+
+                Header('Tooltips'),
+                Option({ opt: options.theme.bar.menus.tooltip.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.tooltip.text, title: 'Text', type: 'color' }),
+
             ]
         })
     })
diff --git a/widget/settings/pages/theme/menus/media.ts b/widget/settings/pages/theme/menus/media.ts
new file mode 100644
index 0000000..99ed8c4
--- /dev/null
+++ b/widget/settings/pages/theme/menus/media.ts
@@ -0,0 +1,37 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const MediaMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page media",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Media Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.media.song, title: 'Song', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.artist, title: 'Artist', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.album, title: 'Album', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.media.background.color, title: 'Background', type: 'color' }),
+
+                Header('Buttons'),
+                Option({ opt: options.theme.bar.menus.menu.media.buttons.inactive, title: 'Unavailable', subtitle: 'Disabled button when media control isn\'t available.', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.buttons.enabled, title: 'Enabled', subtitle: 'Ex: Button color when shuffle/loop is enabled.', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.buttons.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.buttons.text, title: 'Text', type: 'color' }),
+
+                Header('Slider'),
+                Option({ opt: options.theme.bar.menus.menu.media.slider.primary, title: 'Primary Color', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.slider.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.slider.backgroundhover, title: 'Backround (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.media.slider.puck, title: 'Puck', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/network.ts b/widget/settings/pages/theme/menus/network.ts
new file mode 100644
index 0000000..3d5d190
--- /dev/null
+++ b/widget/settings/pages/theme/menus/network.ts
@@ -0,0 +1,47 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const NetworkMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page network",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Network Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.network.text, title: 'Text', type: 'color' }),
+
+                Header('Card'),
+                Option({ opt: options.theme.bar.menus.menu.network.card.color, title: 'Card', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.network.background.color, title: 'Background', type: 'color' }),
+
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.network.border.color, title: 'Border', type: 'color' }),
+
+                Header('Label'),
+                Option({ opt: options.theme.bar.menus.menu.network.label.color, title: 'Label', type: 'color' }),
+
+                Header('Status'),
+                Option({ opt: options.theme.bar.menus.menu.network.status.color, title: 'Connection Status', type: 'color' }),
+
+                Header('List Items'),
+                Option({ opt: options.theme.bar.menus.menu.network.listitems.active, title: 'Active/Hover', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.network.listitems.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icons'),
+                Option({ opt: options.theme.bar.menus.menu.network.icons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.network.icons.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icon Buttons'),
+                Option({ opt: options.theme.bar.menus.menu.network.iconbuttons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.network.iconbuttons.passive, title: 'Passive', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/notifications.ts b/widget/settings/pages/theme/menus/notifications.ts
new file mode 100644
index 0000000..e69de29
diff --git a/widget/settings/pages/theme/menus/systray.ts b/widget/settings/pages/theme/menus/systray.ts
new file mode 100644
index 0000000..0669851
--- /dev/null
+++ b/widget/settings/pages/theme/menus/systray.ts
@@ -0,0 +1,22 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const SystrayMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page systray",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Dropdown Menu'),
+                Option({ opt: options.theme.bar.menus.menu.systray.dropdownmenu.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.systray.dropdownmenu.text, title: 'Text', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.systray.dropdownmenu.divider, title: 'Section Divider', type: 'color' }),
+            ]
+        })
+    })
+}
diff --git a/widget/settings/pages/theme/menus/volume.ts b/widget/settings/pages/theme/menus/volume.ts
new file mode 100644
index 0000000..43ddbff
--- /dev/null
+++ b/widget/settings/pages/theme/menus/volume.ts
@@ -0,0 +1,57 @@
+import { Option } from "widget/settings/shared/Option";
+import { Header } from "widget/settings/shared/Header";
+
+import options from "options";
+
+export const VolumeMenuTheme = () => {
+    return Widget.Scrollable({
+        vscroll: "automatic",
+        hscroll: "never",
+        class_name: "menu-theme-page volume",
+        vexpand: true,
+        child: Widget.Box({
+            vertical: true,
+            children: [
+                Header('Volume Menu Theme Settings'),
+                Option({ opt: options.theme.bar.menus.menu.volume.text, title: 'Text', type: 'color' }),
+
+                Header('Card'),
+                Option({ opt: options.theme.bar.menus.menu.volume.card.color, title: 'Card', type: 'color' }),
+
+                Header('Background'),
+                Option({ opt: options.theme.bar.menus.menu.volume.background.color, title: 'Background', type: 'color' }),
+
+                Header('Border'),
+                Option({ opt: options.theme.bar.menus.menu.volume.border.color, title: 'Border', type: 'color' }),
+
+                Header('Label'),
+                Option({ opt: options.theme.bar.menus.menu.volume.label.color, title: 'Label', type: 'color' }),
+
+                Header('List Items'),
+                Option({ opt: options.theme.bar.menus.menu.volume.listitems.active, title: 'Active/Hover', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.listitems.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icon Button'),
+                Option({ opt: options.theme.bar.menus.menu.volume.iconbutton.active, title: 'Active/Hover', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.iconbutton.passive, title: 'Passive', type: 'color' }),
+
+                Header('Icons'),
+                Option({ opt: options.theme.bar.menus.menu.volume.icons.active, title: 'Active', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.icons.passive, title: 'Passive', type: 'color' }),
+
+                Header('Audio Slider'),
+                Option({ opt: options.theme.bar.menus.menu.volume.audio_slider.primary, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.audio_slider.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.audio_slider.backgroundhover, title: 'Background (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.audio_slider.puck, title: 'Puck', type: 'color' }),
+
+                Header('Input Slider'),
+                Option({ opt: options.theme.bar.menus.menu.volume.input_slider.primary, title: 'Primary', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.input_slider.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.input_slider.backgroundhover, title: 'Background (Hover)', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.menu.volume.input_slider.puck, title: 'Puck', type: 'color' }),
+
+            ]
+        })
+    })
+}