Added the ability to enable borders for the bar. (#428)

* Added the ability to configure a border for the bar.

* Added the right color for configs

lib/types/options.d.ts

@@ -217,3 +217,5 @@ export type ColorMapValue = (typeof defaultColorMap)[ColorMapKey];
 export type ScalingPriority = 'gdk' | 'hyprland' | 'both';
 
 export type BluetoothBatteryState = 'paired' | 'connected' | 'always';
+
+export type BorderLocation = 'none' | 'top' | 'right' | 'bottom' | 'left' | 'horizontal' | 'vertical' | 'full';

modules/bar/Bar.ts

@@ -38,6 +38,7 @@ import Window from 'types/widgets/window.js';
 
 const { layouts } = options.bar;
 const { location } = options.theme.bar;
+const { location: borderLocation } = options.theme.bar.border;
 
 export type BarWidget = keyof typeof widget;
 
@@ -270,7 +271,9 @@ export const Bar = (() => {
             child: Widget.Box({
                 class_name: 'bar-panel-container',
                 child: Widget.CenterBox({
-                    class_name: 'bar-panel',
+                    class_name: borderLocation
+                        .bind('value')
+                        .as((brdrLcn) => (brdrLcn !== 'none' ? 'bar-panel withBorder' : 'bar-panel')),
                     css: 'padding: 1px',
                     startWidget: Widget.Box({
                         class_name: 'box-left',

options.ts

@@ -6,6 +6,7 @@ import {
     BarButtonStyles,
     BarLocation,
     BluetoothBatteryState,
+    BorderLocation,
     NotificationAnchor,
     OSDAnchor,
     OSDOrientation,
@@ -158,6 +159,11 @@ const options = mkOptions(OPTIONS, {
             transparent: opt(false),
             dropdownGap: opt('2.9em'),
             background: opt(colors.crust),
+            border: {
+                location: opt<BorderLocation>('none'),
+                width: opt('0.15em'),
+                color: opt(colors.lavender),
+            },
             buttons: {
                 style: opt<BarButtonStyles>('default'),
                 enableBorders: opt(false),

scripts/fillThemes.js

@@ -399,6 +399,7 @@ const main = () => {
     // Format: "target_key": "source_key"
     const specialKeyMappings = {
         'theme.bar.menus.menu.network.switch.enabled': 'theme.bar.menus.menu.network.iconbuttons.active',
+        'theme.bar.border.color': 'theme.bar.buttons.notifications.border',
         // Add more special mappings here if needed
     };
 

scss/style/bar/bar.scss

@@ -15,6 +15,31 @@
         $transparency-value: 1 - $bar-opacity-ratio;
         background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
         border-radius: if($bar-floating, $bar-border_radius, 0em);
+
+        &.withBorder {
+            border-top: if(
+                $bar-border_location == 'top' or $bar-border_location == 'horizontal' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-bottom: if(
+                $bar-border_location == 'bottom' or $bar-border_location == 'horizontal' or $bar-border_location ==
+                    'full',
+                $bar-border_width solid,
+                none
+            );
+            border-left: if(
+                $bar-border_location == 'left' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-right: if(
+                $bar-border_location == 'right' or $bar-border_location == 'vertical' or $bar-border_location == 'full',
+                $bar-border_width solid,
+                none
+            );
+            border-color: $bar-border_color;
+        }
     }
 }
 

themes/catppuccin_frappe.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c6d0f5"
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5",
+  "theme.bar.border.color": "#babbf1"
 }

themes/catppuccin_frappe_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c6d0f5"
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5",
+  "theme.bar.border.color": "#babbf1"
 }

themes/catppuccin_frappe_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c6d0f5"
+  "theme.bar.buttons.systray.customIcon": "#c6d0f5",
+  "theme.bar.border.color": "#babbf1"
 }

themes/catppuccin_latte.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#4c4f69"
+  "theme.bar.buttons.systray.customIcon": "#4c4f69",
+  "theme.bar.border.color": "#7287fd"
 }

themes/catppuccin_latte_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#4c4f69"
+  "theme.bar.buttons.systray.customIcon": "#4c4f69",
+  "theme.bar.border.color": "#7287fd"
 }

themes/catppuccin_latte_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#4c4f69"
+  "theme.bar.buttons.systray.customIcon": "#4c4f69",
+  "theme.bar.border.color": "#7287fd"
 }

themes/catppuccin_macchiato.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#cad3f5"
+  "theme.bar.buttons.systray.customIcon": "#cad3f5",
+  "theme.bar.border.color": "#b7bdf8"
 }

themes/catppuccin_macchiato_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#cad3f5"
+  "theme.bar.buttons.systray.customIcon": "#cad3f5",
+  "theme.bar.border.color": "#b7bdf8"
 }

themes/catppuccin_macchiato_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#cad3f5"
+  "theme.bar.buttons.systray.customIcon": "#cad3f5",
+  "theme.bar.border.color": "#b7bdf8"
 }

themes/catppuccin_mocha.json

@@ -341,5 +341,6 @@
     "theme.bar.buttons.modules.submap.border": "#94e2d5",
     "theme.bar.menus.menu.network.switch.enabled": "#cba6f7",
     "theme.bar.menus.menu.network.switch.disabled": "#313245",
-    "theme.bar.menus.menu.network.switch.puck": "#454759"
+    "theme.bar.menus.menu.network.switch.puck": "#454759",
+    "theme.bar.border.color": "#b4befe"
 }

themes/catppuccin_mocha_split.json

@@ -341,5 +341,7 @@
     "theme.bar.buttons.modules.submap.border": "#94e2d5",
     "theme.bar.menus.menu.network.switch.enabled": "#cba6f7",
     "theme.bar.menus.menu.network.switch.disabled": "#313245",
-  "theme.bar.menus.menu.network.switch.puck": "#454759"
+    "theme.bar.menus.menu.network.switch.puck": "#454759",
+    "theme.bar.border.color": "#b4befe"
 }
+

themes/catppuccin_mocha_vivid.json

@@ -341,6 +341,6 @@
     "theme.notification.label": "#b4befe",
     "theme.notification.actions.text": "#181825",
     "theme.notification.actions.background": "#b4befd",
-    "theme.notification.background": "#181826"
+    "theme.notification.background": "#181826",
+    "theme.bar.border.color": "#b4befe"
 }
-

themes/cyberpunk.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d1d1d1"
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1",
+  "theme.bar.border.color": "#f7d04b"
 }

themes/cyberpunk_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d1d1d1"
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1",
+  "theme.bar.border.color": "#f7d04b"
 }

themes/cyberpunk_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d1d1d1"
+  "theme.bar.buttons.systray.customIcon": "#d1d1d1",
+  "theme.bar.border.color": "#f7d04b"
 }

themes/dracula.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#f8f8f2"
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2",
+  "theme.bar.border.color": "#bd93f9"
 }

themes/dracula_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#f8f8f2"
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2",
+  "theme.bar.border.color": "#bd93f9"
 }

themes/dracula_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#f8f8f2"
+  "theme.bar.buttons.systray.customIcon": "#f8f8f2",
+  "theme.bar.border.color": "#bd93f9"
 }

themes/everforest.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8caac"
+  "theme.bar.buttons.systray.customIcon": "#d8caac",
+  "theme.bar.border.color": "#83c092"
 }

themes/everforest_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8caac"
+  "theme.bar.buttons.systray.customIcon": "#d8caac",
+  "theme.bar.border.color": "#83c092"
 }

themes/everforest_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8caac"
+  "theme.bar.buttons.systray.customIcon": "#d8caac",
+  "theme.bar.border.color": "#83c092"
 }

themes/gruvbox.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#ebdbb2"
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2",
+  "theme.bar.border.color": "#83a598"
 }

themes/gruvbox_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#ebdbb2"
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2",
+  "theme.bar.border.color": "#83a598"
 }

themes/gruvbox_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#ebdbb2"
+  "theme.bar.buttons.systray.customIcon": "#ebdbb2",
+  "theme.bar.border.color": "#83a598"
 }

themes/monochrome.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#FFFFFF"
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF",
+  "theme.bar.border.color": "#FFFFFF"
 }

themes/monochrome_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#FFFFFF"
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF",
+  "theme.bar.border.color": "#FFFFFF"
 }

themes/monochrome_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#FFFFFF"
+  "theme.bar.buttons.systray.customIcon": "#FFFFFF",
+  "theme.bar.border.color": "#FFFFFF"
 }

themes/nord.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8dee9"
+  "theme.bar.buttons.systray.customIcon": "#d8dee9",
+  "theme.bar.border.color": "#88c0d0"
 }

themes/nord_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8dee9"
+  "theme.bar.buttons.systray.customIcon": "#d8dee9",
+  "theme.bar.border.color": "#88c0d0"
 }

themes/nord_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#d8dee9"
+  "theme.bar.buttons.systray.customIcon": "#d8dee9",
+  "theme.bar.border.color": "#88c0d0"
 }

themes/one_dark.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#abb2bf"
+  "theme.bar.buttons.systray.customIcon": "#abb2bf",
+  "theme.bar.border.color": "#61afef"
 }

themes/one_dark_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#abb2bf"
+  "theme.bar.buttons.systray.customIcon": "#abb2bf",
+  "theme.bar.border.color": "#61afef"
 }

themes/one_dark_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#abb2bf"
+  "theme.bar.buttons.systray.customIcon": "#abb2bf",
+  "theme.bar.border.color": "#61afef"
 }

themes/rose_pine.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/rose_pine_moon.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/rose_pine_moon_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/rose_pine_moon_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/rose_pine_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/rose_pine_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#e0def4"
+  "theme.bar.buttons.systray.customIcon": "#e0def4",
+  "theme.bar.border.color": "#c4a7e7"
 }

themes/tokyo_night.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c0caf5"
+  "theme.bar.buttons.systray.customIcon": "#c0caf5",
+  "theme.bar.border.color": "#bb9af7"
 }

themes/tokyo_night_split.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c0caf5"
+  "theme.bar.buttons.systray.customIcon": "#c0caf5",
+  "theme.bar.border.color": "#bb9af7"
 }

themes/tokyo_night_vivid.json

@@ -341,5 +341,6 @@
   "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.buttons.systray.customIcon": "#c0caf5"
+  "theme.bar.buttons.systray.customIcon": "#c0caf5",
+  "theme.bar.border.color": "#bb9af7"
 }

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

@@ -54,10 +54,27 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                 }),
                 /*
                  ******************************
-                 *          SPACING           *
+                 *          GENERAL           *
                  ******************************
                  */
-                Header('Spacing'),
+                Header('General'),
+                Option({
+                    opt: options.theme.bar.border.location,
+                    title: 'Bar Border Location',
+                    type: 'enum',
+                    enums: ['none', 'full', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical'],
+                }),
+                Option({
+                    opt: options.theme.bar.border.width,
+                    title: 'Bar Border Width',
+                    type: 'string',
+                }),
+                Option({
+                    opt: options.theme.bar.border_radius,
+                    title: 'Border Radius',
+                    subtitle: 'Only applies if floating is enabled',
+                    type: 'string',
+                }),
                 Option({
                     opt: options.theme.bar.outer_spacing,
                     title: 'Outer Spacing',
@@ -122,12 +139,6 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     subtitle: 'Only applies if floating is enabled',
                     type: 'string',
                 }),
-                Option({
-                    opt: options.theme.bar.border_radius,
-                    title: 'Border Radius',
-                    subtitle: 'Only applies if floating is enabled',
-                    type: 'string',
-                }),
 
                 /*
                  ******************************

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

@@ -33,6 +33,11 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
                     min: 0,
                     max: 100,
                 }),
+                Option({
+                    opt: options.theme.bar.border.color,
+                    title: 'Bar Border Color',
+                    type: 'color',
+                }),
                 Option({
                     opt: options.theme.bar.buttons.opacity,
                     title: 'Button Opacity',