Added a scrollbar to the network and bluetooth menu. (#593)

* Added a scrollbar to the network and bluetooth menu.

* Update themes

* Adjust height of network menu scroller.

scripts/fillThemes.js

@@ -13,7 +13,7 @@
  * If no themes_directory is provided, it defaults to '~/.config/ags/themes'.
  */
 
-const fs = require('fs');
+const fs = require('fs').promises;
 const path = require('path');
 const os = require('os');
 
@@ -48,14 +48,14 @@ const COLORS = {
 const formatMessage = (color, message) => `${color}${message}${COLORS.RESET}`;
 
 /**
- * Loads and parses a JSON file.
+ * Loads and parses a JSON file asynchronously.
  *
  * @param {string} filePath - The path to the JSON file.
- * @returns {Object} The parsed JSON object.
+ * @returns {Promise<Object>} The parsed JSON object.
  */
-const loadJSON = (filePath) => {
+const loadJSON = async (filePath) => {
     try {
-        const data = fs.readFileSync(filePath, 'utf8');
+        const data = await fs.readFile(filePath, 'utf8');
         return JSON.parse(data);
     } catch (error) {
         console.error(formatMessage(COLORS.FG_RED, `Error reading or parsing '${filePath}': ${error.message}`));
@@ -64,15 +64,15 @@ const loadJSON = (filePath) => {
 };
 
 /**
- * Saves a JSON object to a file with indentation.
+ * Saves a JSON object to a file with indentation asynchronously.
  *
  * @param {string} filePath - The path to the JSON file.
  * @param {Object} data - The JSON data to save.
  */
-const saveJSON = (filePath, data) => {
+const saveJSON = async (filePath, data) => {
     try {
         const jsonString = JSON.stringify(data, null, 2);
-        fs.writeFileSync(filePath, jsonString, 'utf8');
+        await fs.writeFile(filePath, jsonString, 'utf8');
     } catch (error) {
         console.error(formatMessage(COLORS.FG_RED, `Error writing to '${filePath}': ${error.message}`));
         process.exit(1);
@@ -123,9 +123,7 @@ const findMissingKeys = (baseJSON, targetJSON) => {
  * @returns {boolean} True if the key is excluded, otherwise false.
  */
 const isExcludedKey = (key) => {
-    const excludedPatterns = [
+    const excludedPatterns = [];
-        // Add any regex patterns for keys to exclude here
-    ];
 
     return excludedPatterns.some((pattern) => pattern.test(key));
 };
@@ -175,14 +173,18 @@ const collectBorderColors = (baseJSON) => {
  * @param {Object} targetJSON - The target JSON object.
  * @param {Object} specialKeyMappings - A map of special keys to their source keys.
  * @param {string} currentKey - The key currently being processed.
+ * @param {Object} baseTheme - The base theme JSON object.
  * @returns {*} The best matching value or null if a random selection is needed.
  */
-const determineBestMatchValue = (baseValue, valueToKeysMap, targetJSON, specialKeyMappings, currentKey) => {
+const determineBestMatchValue = (baseValue, valueToKeysMap, targetJSON, specialKeyMappings, currentKey, baseTheme) => {
-    // Check if the current key is in special mappings
     if (specialKeyMappings.hasOwnProperty(currentKey)) {
         const sourceKey = specialKeyMappings[currentKey];
         if (targetJSON.hasOwnProperty(sourceKey)) {
+            console.log(formatMessage(COLORS.FG_CYAN, `🔍 Found source key '${sourceKey}' in target JSON.`));
             return targetJSON[sourceKey];
+        } else if (baseTheme && baseTheme.hasOwnProperty(sourceKey)) {
+            console.log(formatMessage(COLORS.FG_CYAN, `🔍 Found source key '${sourceKey}' in base theme.`));
+            return baseTheme[sourceKey];
         } else {
             console.warn(
                 formatMessage(
@@ -229,14 +231,16 @@ const findExtraKeys = (baseTheme, targetJSON) => {
  *
  * @param {string} themePath - The path to the theme file.
  */
-const backupTheme = (themePath) => {
+const backupTheme = async (themePath) => {
+    try {
         const backupDir = path.join(path.dirname(themePath), 'backup');
-    if (!fs.existsSync(backupDir)) {
+        await fs.mkdir(backupDir, { recursive: true });
-        fs.mkdirSync(backupDir);
-    }
         const backupPath = path.join(backupDir, path.basename(themePath));
-    fs.copyFileSync(themePath, backupPath);
+        await fs.copyFile(themePath, backupPath);
         console.log(formatMessage(COLORS.FG_CYAN, `Backup created at '${backupPath}'.`));
+    } catch (error) {
+        console.error(formatMessage(COLORS.FG_RED, `❌ Error creating backup for '${themePath}': ${error.message}`));
+    }
 };
 
 /**
@@ -246,9 +250,10 @@ const backupTheme = (themePath) => {
  * @param {Object} baseTheme - The base JSON object.
  * @param {boolean} dryRun - If true, no changes will be written to files.
  * @param {Object} specialKeyMappings - A map of special keys to their source keys.
+ * @returns {Promise<void>}
  */
-const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) => {
+const processTheme = async (themePath, baseTheme, dryRun, specialKeyMappings = {}) => {
-    const themeJSON = loadJSON(themePath);
+    const themeJSON = await loadJSON(themePath);
     const missingKeys = findMissingKeys(baseTheme, themeJSON);
 
     let hasChanges = false;
@@ -266,14 +271,21 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
         const valueToKeysMap = buildValueToKeysMap(baseTheme);
         const borderColors = collectBorderColors(baseTheme);
 
-        missingKeys.forEach((key) => {
+        for (const key of missingKeys) {
             if (isExcludedKey(key)) {
                 console.log(formatMessage(COLORS.FG_MAGENTA, `❗ Excluded key from addition: "${key}"`));
-                return;
+                continue;
             }
 
             const baseValue = baseTheme[key];
-            const bestValue = determineBestMatchValue(baseValue, valueToKeysMap, themeJSON, specialKeyMappings, key);
+            const bestValue = determineBestMatchValue(
+                baseValue,
+                valueToKeysMap,
+                themeJSON,
+                specialKeyMappings,
+                key,
+                baseTheme,
+            );
 
             if (bestValue !== null) {
                 themeJSON[key] = bestValue;
@@ -281,7 +293,7 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
             } else {
                 if (borderColors.length === 0) {
                     console.error(formatMessage(COLORS.FG_RED, '❌ Error: No border colors available to assign.'));
-                    return;
+                    continue;
                 }
                 const randomColor = borderColors[Math.floor(Math.random() * borderColors.length)];
                 themeJSON[key] = randomColor;
@@ -294,7 +306,7 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
             }
 
             hasChanges = true;
-        });
+        }
     }
 
     const extraKeys = findExtraKeys(baseTheme, themeJSON);
@@ -309,11 +321,11 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
             ),
         );
 
-        extraKeys.forEach((key) => {
+        for (const key of extraKeys) {
             delete themeJSON[key];
             console.log(formatMessage(COLORS.FG_RED, `➖ Removed key: "${key}"`));
             hasChanges = true;
-        });
+        }
     }
 
     if (hasChanges) {
@@ -325,8 +337,8 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
                 ),
             );
         } else {
-            backupTheme(themePath);
+            await backupTheme(themePath);
-            saveJSON(themePath, themeJSON);
+            await saveJSON(themePath, themeJSON);
             console.log(
                 formatMessage(COLORS.FG_GREEN, `✅ Updated '${path.basename(themePath)}' with missing and extra keys.`),
             );
@@ -339,7 +351,7 @@ const processTheme = (themePath, baseTheme, dryRun, specialKeyMappings = {}) =>
 /**
  * The main function that orchestrates the theme comparison and updating.
  */
-const main = () => {
+const main = async () => {
     const args = process.argv.slice(2);
     const dryRunIndex = args.indexOf('--dry-run');
     const dryRun = dryRunIndex !== -1;
@@ -350,7 +362,9 @@ const main = () => {
 
     const themesDir = args[0] || path.join(os.homedir(), '.config', 'ags', 'themes');
 
-    if (!fs.existsSync(themesDir)) {
+    try {
+        await fs.access(themesDir);
+    } catch (error) {
         console.error(formatMessage(COLORS.FG_RED, `❌ Error: Themes directory '${themesDir}' does not exist.`));
         process.exit(1);
     }
@@ -362,55 +376,46 @@ const main = () => {
     const baseThemeSplitPath = path.join(themesDir, baseThemeSplitFile);
     const baseThemeVividPath = path.join(themesDir, baseThemeVividFile);
 
-    if (!fs.existsSync(baseThemePath)) {
+    const baseThemes = [
+        { file: baseThemeFile, path: baseThemePath },
+        { file: baseThemeSplitFile, path: baseThemeSplitPath },
+        { file: baseThemeVividFile, path: baseThemeVividPath },
+    ];
+
+    for (const theme of baseThemes) {
+        try {
+            await fs.access(theme.path);
+        } catch (error) {
             console.error(
-            formatMessage(COLORS.FG_RED, `❌ Error: Base theme '${baseThemeFile}' does not exist in '${themesDir}'.`),
+                formatMessage(COLORS.FG_RED, `❌ Error: Base theme '${theme.file}' does not exist in '${themesDir}'.`),
             );
             process.exit(1);
         }
-
-    if (!fs.existsSync(baseThemeSplitPath)) {
-        console.error(
-            formatMessage(
-                COLORS.FG_RED,
-                `❌ Error: Base split theme '${baseThemeSplitFile}' does not exist in '${themesDir}'.`,
-            ),
-        );
-        process.exit(1);
     }
 
-    if (!fs.existsSync(baseThemeVividPath)) {
+    const [baseTheme, baseThemeSplit, baseThemeVivid] = await Promise.all([
-        console.error(
+        loadJSON(baseThemePath),
-            formatMessage(
+        loadJSON(baseThemeSplitPath),
-                COLORS.FG_RED,
+        loadJSON(baseThemeVividPath),
-                `❌ Error: Base vivid theme '${baseThemeVividFile}' does not exist in '${themesDir}'.`,
+    ]);
-            ),
-        );
-        process.exit(1);
-    }
 
-    const baseTheme = loadJSON(baseThemePath);
+    const themeFiles = (await fs.readdir(themesDir)).filter((file) => file.endsWith('.json'));
-    const baseThemeSplit = loadJSON(baseThemeSplitPath);
-    const baseThemeVivid = loadJSON(baseThemeVividPath);
 
-    const themeFiles = fs.readdirSync(themesDir).filter((file) => file.endsWith('.json'));
-
-    // Define special key mappings
-    // Format: "target_key": "source_key"
     const specialKeyMappings = {
-        'theme.bar.buttons.modules.hypridle.icon': 'theme.bar.buttons.modules.storage.icon',
+        'theme.bar.menus.menu.bluetooth.scroller.color': 'theme.bar.menus.menu.bluetooth.label.color',
-        'theme.bar.buttons.modules.hypridle.background': 'theme.bar.buttons.modules.storage.background',
+        'theme.bar.menus.menu.network.scroller.color': 'theme.bar.menus.menu.network.label.color',
-        'theme.bar.buttons.modules.hypridle.icon_background': 'theme.bar.buttons.modules.storage.icon_background',
-        'theme.bar.buttons.modules.hypridle.text': 'theme.bar.buttons.modules.storage.text',
-        'theme.bar.buttons.modules.hypridle.border': 'theme.bar.buttons.modules.storage.border',
-        // Add more special mappings here if needed
     };
 
-    themeFiles.forEach((file) => {
+    const queue = [...themeFiles].filter(
-        if (file === baseThemeFile || file === baseThemeSplitFile || file === baseThemeVividFile) {
+        (file) =>
-            return;
+            !['catppuccin_mocha.json', 'catppuccin_mocha_split.json', 'catppuccin_mocha_vivid.json'].includes(file),
-        }
+    );
 
+    const processQueue = async () => {
+        while (queue.length > 0) {
+            const promises = [];
+            for (let i = 0; i < concurrencyLimit && queue.length > 0; i++) {
+                const file = queue.shift();
                 const themePath = path.join(themesDir, file);
                 let correspondingBaseTheme;
 
@@ -422,12 +427,17 @@ const main = () => {
                     correspondingBaseTheme = baseTheme;
                 }
 
-        try {
+                promises.push(
-            processTheme(themePath, correspondingBaseTheme, dryRun, specialKeyMappings);
+                    processTheme(themePath, correspondingBaseTheme, dryRun, specialKeyMappings).catch((error) => {
-        } catch (error) {
                         console.error(formatMessage(COLORS.FG_RED, `❌ Error processing '${file}': ${error.message}`));
+                    }),
+                );
             }
-    });
+            await Promise.all(promises);
+        }
+    };
+
+    await processQueue();
 
     console.log(formatMessage(COLORS.FG_GREEN, '\n🎉 All themes have been processed.'));
 };

src/components/menus/bluetooth/devices/index.tsx

@@ -33,9 +33,11 @@ export const BluetoothDevices = (): JSX.Element => {
                 deviceListBinding.drop();
             }}
         >
+            <scrollable className={'menu-scroller bluetooth'}>
                 <box className={'menu-content'} vertical>
                     {deviceListBinding()}
                 </box>
+            </scrollable>
         </box>
     );
 };

src/components/menus/network/wifi/WirelessAPs/index.tsx

@@ -15,33 +15,35 @@ export const WirelessAPs = (): JSX.Element => {
             if (filteredWAPs.length <= 0 && staging.get() === undefined) {
                 return (
                     <label
-                        className="waps-not-found dim"
+                        className={'waps-not-found dim'}
                         expand
                         halign={Gtk.Align.CENTER}
                         valign={Gtk.Align.CENTER}
-                        label="No Wi-Fi Networks Found"
+                        label={'No Wi-Fi Networks Found'}
                     />
                 );
             }
 
             return (
-                <box className="available-waps-list" vertical>
+                <scrollable className={'menu-scroller wap'}>
+                    <box className={'available-waps-list'} vertical>
                         {filteredWAPs.map((ap: AstalNetwork.AccessPoint) => {
                             return (
-                            <box className="network-element-item">
+                                <box className={'network-element-item'}>
                                     <AccessPoint connecting={connecting} accessPoint={ap} />
                                     <Controls connecting={connecting} accessPoint={ap} />
                                 </box>
                             );
                         })}
                     </box>
+                </scrollable>
             );
         },
     );
 
     return (
         <box
-            className="available-waps"
+            className={'available-waps'}
             vertical
             onDestroy={() => {
                 wapBinding.drop();

src/components/settings/pages/theme/menus/bluetooth.tsx

@@ -57,6 +57,10 @@ export const BluetoothMenuTheme = (): JSX.Element => {
                 <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" />
 
+                {/* Scroller Section */}
+                <Header title="Scroller" />
+                <Option opt={options.theme.bar.menus.menu.bluetooth.scroller.color} title="Color" type="color" />
+
                 {/* Switch Section */}
                 <Header title="Switch" />
                 <Option opt={options.theme.bar.menus.menu.bluetooth.switch.enabled} title="Enabled" type="color" />

src/components/settings/pages/theme/menus/index.tsx

@@ -139,6 +139,11 @@ export const MenuTheme = (): JSX.Element => {
                 />
                 <Option opt={options.theme.bar.menus.slider.puck} title="Puck" type="color" />
 
+                {/* Scroller Section */}
+                <Header title="Scroller" />
+                <Option opt={options.theme.bar.menus.scroller.radius} title="Radius" type="string" />
+                <Option opt={options.theme.bar.menus.scroller.width} title="Width" type="string" />
+
                 {/* Dropdown Menu Section */}
                 <Header title="Dropdown Menu" />
                 <Option opt={options.theme.bar.menus.dropdownmenu.background} title="Background" type="color" />

src/components/settings/pages/theme/menus/network.tsx

@@ -58,6 +58,10 @@ export const NetworkMenuTheme = (): JSX.Element => {
                 <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" />
 
+                {/* Scroller Section */}
+                <Header title="Scroller" />
+                <Option opt={options.theme.bar.menus.menu.network.scroller.color} title="Color" type="color" />
+
                 {/* Icon Buttons Section */}
                 <Header title="Icon Buttons" />
                 <Option opt={options.theme.bar.menus.menu.network.iconbuttons.active} title="Active" type="color" />

src/options.ts

@@ -468,6 +468,10 @@ const options = mkOptions(CONFIG, {
                     slider_radius: opt('0.3rem'),
                     progress_radius: opt('0.3rem'),
                 },
+                scroller: {
+                    radius: opt('0.7em'),
+                    width: opt('0.25em'),
+                },
                 dropdownmenu: {
                     background: opt(colors.crust),
                     text: opt(colors.text),
@@ -562,6 +566,9 @@ const options = mkOptions(CONFIG, {
                         label: {
                             color: opt(colors.mauve),
                         },
+                        scroller: {
+                            color: opt(colors.mauve),
+                        },
                         text: opt(colors.text),
                         status: {
                             color: opt(colors.overlay0),
@@ -598,6 +605,9 @@ const options = mkOptions(CONFIG, {
                         label: {
                             color: opt(colors.sky),
                         },
+                        scroller: {
+                            color: opt(colors.sky),
+                        },
                         text: opt(colors.text),
                         status: opt(colors.overlay0),
                         switch_divider: opt(colors.surface1),

src/scss/style/menus/bluetooth.scss

@@ -194,4 +194,16 @@
     .connection-status.txt-icon {
         margin-left: 0.2em;
     }
+
+    .bluetooth-controls {
+        margin-right: 0.5em;
+    }
+
+    .menu-scroller.bluetooth {
+        min-height: 18em;
+
+        slider {
+            background: $bar-menus-menu-bluetooth-scroller-color;
+        }
+    }
 }

src/scss/style/menus/menu.scss

@@ -254,3 +254,14 @@
     animation-timing-function: linear;
     animation-iteration-count: infinite;
 }
+
+.menu-scroller {
+    margin-right: 0em;
+    min-width: 0.35em;
+
+    slider {
+        min-width: $bar-menus-scroller-width;
+        border-radius: $bar-menus-scroller-radius;
+        background: $bar-menus-text;
+    }
+}

src/scss/style/menus/network.scss

@@ -181,4 +181,16 @@
             background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-network-switch-enabled);
         }
     }
+
+    .menu-scroller.wap {
+        min-height: 16em;
+
+        slider {
+            background: $bar-menus-menu-network-scroller-color;
+        }
+    }
+
+    .network-element-controls-container {
+        margin-right: 0.7em;
+    }
 }

themes/catppuccin_frappe.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#303446",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e78284",
   "theme.bar.buttons.modules.hypridle.text": "#e78284",
-  "theme.bar.buttons.modules.hypridle.border": "#e78284"
+  "theme.bar.buttons.modules.hypridle.border": "#e78284",
+  "theme.bar.menus.menu.network.scroller.color": "#ca9ee6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#99d1db"
 }

themes/catppuccin_frappe_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#303446",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e78284",
   "theme.bar.buttons.modules.hypridle.text": "#e78284",
-  "theme.bar.buttons.modules.hypridle.border": "#e78284"
+  "theme.bar.buttons.modules.hypridle.border": "#e78284",
+  "theme.bar.menus.menu.network.scroller.color": "#ca9ee6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#99d1db"
 }

themes/catppuccin_frappe_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#e78284",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e78284",
   "theme.bar.buttons.modules.hypridle.text": "#303446",
-  "theme.bar.buttons.modules.hypridle.border": "#e78284"
+  "theme.bar.buttons.modules.hypridle.border": "#e78284",
+  "theme.bar.menus.menu.network.scroller.color": "#ca9ee6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#99d1db"
 }

themes/catppuccin_latte.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#dcdfe8",
   "theme.bar.buttons.modules.hypridle.icon_background": "#d20f39",
   "theme.bar.buttons.modules.hypridle.text": "#d20f39",
-  "theme.bar.buttons.modules.hypridle.border": "#d20f39"
+  "theme.bar.buttons.modules.hypridle.border": "#d20f39",
+  "theme.bar.menus.menu.network.scroller.color": "#8839ef",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#04a5e5"
 }

themes/catppuccin_latte_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#dcdfe8",
   "theme.bar.buttons.modules.hypridle.icon_background": "#d20f39",
   "theme.bar.buttons.modules.hypridle.text": "#d20f39",
-  "theme.bar.buttons.modules.hypridle.border": "#d20f39"
+  "theme.bar.buttons.modules.hypridle.border": "#d20f39",
+  "theme.bar.menus.menu.network.scroller.color": "#8839ef",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#04a5e5"
 }

themes/catppuccin_latte_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#d20f39",
   "theme.bar.buttons.modules.hypridle.icon_background": "#d20f39",
   "theme.bar.buttons.modules.hypridle.text": "#dcdfe8",
-  "theme.bar.buttons.modules.hypridle.border": "#d20f39"
+  "theme.bar.buttons.modules.hypridle.border": "#d20f39",
+  "theme.bar.menus.menu.network.scroller.color": "#8839ef",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#04a5e5"
 }

themes/catppuccin_macchiato.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#24273a",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ed8796",
   "theme.bar.buttons.modules.hypridle.text": "#ed8796",
-  "theme.bar.buttons.modules.hypridle.border": "#ed8796"
+  "theme.bar.buttons.modules.hypridle.border": "#ed8796",
+  "theme.bar.menus.menu.network.scroller.color": "#c6a0f6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#91d7e3"
 }

themes/catppuccin_macchiato_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#24273a",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ed8796",
   "theme.bar.buttons.modules.hypridle.text": "#ed8796",
-  "theme.bar.buttons.modules.hypridle.border": "#ed8796"
+  "theme.bar.buttons.modules.hypridle.border": "#ed8796",
+  "theme.bar.menus.menu.network.scroller.color": "#c6a0f6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#91d7e3"
 }

themes/catppuccin_macchiato_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#ed8796",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ed8796",
   "theme.bar.buttons.modules.hypridle.text": "#24273a",
-  "theme.bar.buttons.modules.hypridle.border": "#ed8796"
+  "theme.bar.buttons.modules.hypridle.border": "#ed8796",
+  "theme.bar.menus.menu.network.scroller.color": "#c6a0f6",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#91d7e3"
 }

themes/catppuccin_mocha.json

@@ -133,6 +133,7 @@
     "theme.bar.menus.menu.bluetooth.status": "#6c7086",
     "theme.bar.menus.menu.bluetooth.text": "#cdd6f4",
     "theme.bar.menus.menu.bluetooth.label.color": "#89dceb",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#89dceb",
     "theme.bar.menus.menu.bluetooth.border.color": "#313244",
     "theme.bar.menus.menu.bluetooth.background.color": "#11111b",
     "theme.bar.menus.menu.bluetooth.card.color": "#1e1e2e",
@@ -145,6 +146,7 @@
     "theme.bar.menus.menu.network.status.color": "#6c7086",
     "theme.bar.menus.menu.network.text": "#cdd6f4",
     "theme.bar.menus.menu.network.label.color": "#cba6f7",
+    "theme.bar.menus.menu.network.scroller.color": "#cba6f7",
     "theme.bar.menus.menu.network.border.color": "#313244",
     "theme.bar.menus.menu.network.background.color": "#11111b",
     "theme.bar.menus.menu.network.card.color": "#1e1e2e",

themes/catppuccin_mocha_split.json

@@ -128,6 +128,7 @@
     "theme.bar.menus.menu.bluetooth.status": "#6c7086",
     "theme.bar.menus.menu.bluetooth.text": "#cdd6f4",
     "theme.bar.menus.menu.bluetooth.label.color": "#89dceb",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#89dceb",
     "theme.bar.menus.menu.bluetooth.border.color": "#313244",
     "theme.bar.menus.menu.bluetooth.background.color": "#11111b",
     "theme.bar.menus.menu.bluetooth.card.color": "#1e1e2e",
@@ -140,6 +141,7 @@
     "theme.bar.menus.menu.network.status.color": "#6c7086",
     "theme.bar.menus.menu.network.text": "#cdd6f4",
     "theme.bar.menus.menu.network.label.color": "#cba6f7",
+    "theme.bar.menus.menu.network.scroller.color": "#cba6f7",
     "theme.bar.menus.menu.network.border.color": "#313244",
     "theme.bar.menus.menu.network.background.color": "#11111b",
     "theme.bar.menus.menu.network.card.color": "#1e1e2e",

themes/catppuccin_mocha_vivid.json

@@ -133,6 +133,7 @@
   "theme.bar.menus.menu.bluetooth.status": "#6c7086",
   "theme.bar.menus.menu.bluetooth.text": "#cdd6f4",
   "theme.bar.menus.menu.bluetooth.label.color": "#89dceb",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#89dceb",
   "theme.bar.menus.menu.bluetooth.border.color": "#313244",
   "theme.bar.menus.menu.bluetooth.background.color": "#11111b",
   "theme.bar.menus.menu.bluetooth.card.color": "#1e1e2e",
@@ -148,6 +149,7 @@
   "theme.bar.menus.menu.network.status.color": "#6c7086",
   "theme.bar.menus.menu.network.text": "#cdd6f4",
   "theme.bar.menus.menu.network.label.color": "#cba6f7",
+  "theme.bar.menus.menu.network.scroller.color": "#cba6f7",
   "theme.bar.menus.menu.network.border.color": "#313244",
   "theme.bar.menus.menu.network.background.color": "#11111b",
   "theme.bar.menus.menu.network.card.color": "#1e1e2e",

themes/cyberpunk.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#121212",
   "theme.bar.buttons.modules.hypridle.icon_background": "#FF4500",
   "theme.bar.buttons.modules.hypridle.text": "#FF4500",
-  "theme.bar.buttons.modules.hypridle.border": "#FF4500"
+  "theme.bar.buttons.modules.hypridle.border": "#FF4500",
+  "theme.bar.menus.menu.network.scroller.color": "#FFD700",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#00FFFF"
 }

themes/cyberpunk_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#121212",
   "theme.bar.buttons.modules.hypridle.icon_background": "#FF4500",
   "theme.bar.buttons.modules.hypridle.text": "#FF4500",
-  "theme.bar.buttons.modules.hypridle.border": "#FF4500"
+  "theme.bar.buttons.modules.hypridle.border": "#FF4500",
+  "theme.bar.menus.menu.network.scroller.color": "#FFD700",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#00FFFF"
 }

themes/cyberpunk_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#FF4500",
   "theme.bar.buttons.modules.hypridle.icon_background": "#FF4500",
   "theme.bar.buttons.modules.hypridle.text": "#121212",
-  "theme.bar.buttons.modules.hypridle.border": "#FF4500"
+  "theme.bar.buttons.modules.hypridle.border": "#FF4500",
+  "theme.bar.menus.menu.network.scroller.color": "#FFD700",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#00FFFF"
 }

themes/dracula.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#44475a",
   "theme.bar.buttons.modules.hypridle.icon_background": "#bd93f9",
   "theme.bar.buttons.modules.hypridle.text": "#bd93f9",
-  "theme.bar.buttons.modules.hypridle.border": "#bd93f9"
+  "theme.bar.buttons.modules.hypridle.border": "#bd93f9",
+  "theme.bar.menus.menu.network.scroller.color": "#bd93f9",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#8be9fd"
 }

themes/dracula_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#44475a",
   "theme.bar.buttons.modules.hypridle.icon_background": "#bd93f9",
   "theme.bar.buttons.modules.hypridle.text": "#bd93f9",
-  "theme.bar.buttons.modules.hypridle.border": "#bd93f9"
+  "theme.bar.buttons.modules.hypridle.border": "#bd93f9",
+  "theme.bar.menus.menu.network.scroller.color": "#bd93f9",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#8be9fd"
 }

themes/dracula_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#bd93f9",
   "theme.bar.buttons.modules.hypridle.icon_background": "#bd93f9",
   "theme.bar.buttons.modules.hypridle.text": "#44475a",
-  "theme.bar.buttons.modules.hypridle.border": "#bd93f9"
+  "theme.bar.buttons.modules.hypridle.border": "#bd93f9",
+  "theme.bar.menus.menu.network.scroller.color": "#bd93f9",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#8be9fd"
 }

themes/everforest.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#323d43",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e67e80",
   "theme.bar.buttons.modules.hypridle.text": "#e67e80",
-  "theme.bar.buttons.modules.hypridle.border": "#e67e80"
+  "theme.bar.buttons.modules.hypridle.border": "#e67e80",
+  "theme.bar.menus.menu.network.scroller.color": "#83c092",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83c092"
 }

themes/everforest_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#323d43",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e67e80",
   "theme.bar.buttons.modules.hypridle.text": "#e67e80",
-  "theme.bar.buttons.modules.hypridle.border": "#e67e80"
+  "theme.bar.buttons.modules.hypridle.border": "#e67e80",
+  "theme.bar.menus.menu.network.scroller.color": "#83c092",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83c092"
 }

themes/everforest_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#e67e80",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e67e80",
   "theme.bar.buttons.modules.hypridle.text": "#323d43",
-  "theme.bar.buttons.modules.hypridle.border": "#e67e80"
+  "theme.bar.buttons.modules.hypridle.border": "#e67e80",
+  "theme.bar.menus.menu.network.scroller.color": "#83c092",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83c092"
 }

themes/gruvbox.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#282828",
   "theme.bar.buttons.modules.hypridle.icon_background": "#282828",
   "theme.bar.buttons.modules.hypridle.text": "#83a598",
-  "theme.bar.buttons.modules.hypridle.border": "#83a598"
+  "theme.bar.buttons.modules.hypridle.border": "#83a598",
+  "theme.bar.menus.menu.network.scroller.color": "#b16286",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83a598"
 }

themes/gruvbox_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#282828",
   "theme.bar.buttons.modules.hypridle.icon_background": "#83a598",
   "theme.bar.buttons.modules.hypridle.text": "#83a598",
-  "theme.bar.buttons.modules.hypridle.border": "#83a598"
+  "theme.bar.buttons.modules.hypridle.border": "#83a598",
+  "theme.bar.menus.menu.network.scroller.color": "#b16286",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83a598"
 }

themes/gruvbox_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#83a598",
   "theme.bar.buttons.modules.hypridle.icon_background": "#282828",
   "theme.bar.buttons.modules.hypridle.text": "#282828",
-  "theme.bar.buttons.modules.hypridle.border": "#83a598"
+  "theme.bar.buttons.modules.hypridle.border": "#83a598",
+  "theme.bar.menus.menu.network.scroller.color": "#b16286",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#83a598"
 }

themes/monochrome.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#090909",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ffffff",
   "theme.bar.buttons.modules.hypridle.text": "#ffffff",
-  "theme.bar.buttons.modules.hypridle.border": "#ffffff"
+  "theme.bar.buttons.modules.hypridle.border": "#ffffff",
+  "theme.bar.menus.menu.network.scroller.color": "#FFFFFF",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#ffffff"
 }

themes/monochrome_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#090909",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ffffff",
   "theme.bar.buttons.modules.hypridle.text": "#ffffff",
-  "theme.bar.buttons.modules.hypridle.border": "#ffffff"
+  "theme.bar.buttons.modules.hypridle.border": "#ffffff",
+  "theme.bar.menus.menu.network.scroller.color": "#FFFFFF",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#ffffff"
 }

themes/monochrome_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#ffffff",
   "theme.bar.buttons.modules.hypridle.icon_background": "#ffffff",
   "theme.bar.buttons.modules.hypridle.text": "#090909",
-  "theme.bar.buttons.modules.hypridle.border": "#ffffff"
+  "theme.bar.buttons.modules.hypridle.border": "#ffffff",
+  "theme.bar.menus.menu.network.scroller.color": "#FFFFFF",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#ffffff"
 }

themes/nord.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#3b4252",
   "theme.bar.buttons.modules.hypridle.icon_background": "#8fbcbb",
   "theme.bar.buttons.modules.hypridle.text": "#8fbcbb",
-  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb"
+  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb",
+  "theme.bar.menus.menu.network.scroller.color": "#88c0d0",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#88c0d0"
 }

themes/nord_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#3b4252",
   "theme.bar.buttons.modules.hypridle.icon_background": "#8fbcbb",
   "theme.bar.buttons.modules.hypridle.text": "#8fbcbb",
-  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb"
+  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb",
+  "theme.bar.menus.menu.network.scroller.color": "#88c0d0",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#88c0d0"
 }

themes/nord_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#8fbcbb",
   "theme.bar.buttons.modules.hypridle.icon_background": "#8fbcbb",
   "theme.bar.buttons.modules.hypridle.text": "#3b4252",
-  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb"
+  "theme.bar.buttons.modules.hypridle.border": "#8fbcbb",
+  "theme.bar.menus.menu.network.scroller.color": "#88c0d0",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#88c0d0"
 }

themes/one_dark.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#21252b",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e06c75",
   "theme.bar.buttons.modules.hypridle.text": "#e06c75",
-  "theme.bar.buttons.modules.hypridle.border": "#e06c75"
+  "theme.bar.buttons.modules.hypridle.border": "#e06c75",
+  "theme.bar.menus.menu.network.scroller.color": "#c678dd",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#56b6c2"
 }

themes/one_dark_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#21252b",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e06c75",
   "theme.bar.buttons.modules.hypridle.text": "#e06c75",
-  "theme.bar.buttons.modules.hypridle.border": "#e06c75"
+  "theme.bar.buttons.modules.hypridle.border": "#e06c75",
+  "theme.bar.menus.menu.network.scroller.color": "#c678dd",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#56b6c2"
 }

themes/one_dark_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#e06c75",
   "theme.bar.buttons.modules.hypridle.icon_background": "#e06c75",
   "theme.bar.buttons.modules.hypridle.text": "#21252b",
-  "theme.bar.buttons.modules.hypridle.border": "#e06c75"
+  "theme.bar.buttons.modules.hypridle.border": "#e06c75",
+  "theme.bar.menus.menu.network.scroller.color": "#c678dd",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#56b6c2"
 }

themes/rose_pine.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#21202e",
     "theme.bar.buttons.modules.hypridle.icon_background": "#eb6f92",
     "theme.bar.buttons.modules.hypridle.text": "#eb6f92",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/rose_pine_moon.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#2a283e",
     "theme.bar.buttons.modules.hypridle.icon_background": "#2a283e",
     "theme.bar.buttons.modules.hypridle.text": "#eb6f92",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/rose_pine_moon_split.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#2a283e",
     "theme.bar.buttons.modules.hypridle.icon_background": "#eb6f92",
     "theme.bar.buttons.modules.hypridle.text": "#eb6f92",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/rose_pine_moon_vivid.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#c4a7e7",
     "theme.bar.buttons.modules.hypridle.icon_background": "#2a283e",
     "theme.bar.buttons.modules.hypridle.text": "#2a283e",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/rose_pine_split.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#21202e",
     "theme.bar.buttons.modules.hypridle.icon_background": "#eb6f92",
     "theme.bar.buttons.modules.hypridle.text": "#eb6f92",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/rose_pine_vivid.json

@@ -354,5 +354,7 @@
     "theme.bar.buttons.modules.hypridle.background": "#eb6f92",
     "theme.bar.buttons.modules.hypridle.icon_background": "#eb6f92",
     "theme.bar.buttons.modules.hypridle.text": "#21202e",
-  "theme.bar.buttons.modules.hypridle.border": "#eb6f92"
+    "theme.bar.buttons.modules.hypridle.border": "#eb6f92",
+    "theme.bar.menus.menu.network.scroller.color": "#c4a7e7",
+    "theme.bar.menus.menu.bluetooth.scroller.color": "#9ccfd8"
 }

themes/tokyo_night.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#272a3d",
   "theme.bar.buttons.modules.hypridle.icon_background": "#f7768e",
   "theme.bar.buttons.modules.hypridle.text": "#f7768e",
-  "theme.bar.buttons.modules.hypridle.border": "#f7768e"
+  "theme.bar.buttons.modules.hypridle.border": "#f7768e",
+  "theme.bar.menus.menu.network.scroller.color": "#bb9af7",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#7dcfff"
 }

themes/tokyo_night_split.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#272a3d",
   "theme.bar.buttons.modules.hypridle.icon_background": "#f7768e",
   "theme.bar.buttons.modules.hypridle.text": "#f7768e",
-  "theme.bar.buttons.modules.hypridle.border": "#f7768e"
+  "theme.bar.buttons.modules.hypridle.border": "#f7768e",
+  "theme.bar.menus.menu.network.scroller.color": "#bb9af7",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#7dcfff"
 }

themes/tokyo_night_vivid.json

@@ -354,5 +354,7 @@
   "theme.bar.buttons.modules.hypridle.background": "#f7768e",
   "theme.bar.buttons.modules.hypridle.icon_background": "#f7768e",
   "theme.bar.buttons.modules.hypridle.text": "#272a3d",
-  "theme.bar.buttons.modules.hypridle.border": "#f7768e"
+  "theme.bar.buttons.modules.hypridle.border": "#f7768e",
+  "theme.bar.menus.menu.network.scroller.color": "#bb9af7",
+  "theme.bar.menus.menu.bluetooth.scroller.color": "#7dcfff"
 }