feat(settings): add explicit border toggle and updated layouts

- Defaults On with blur enabled to clean up the border edges
- Darken Modal moves to Launcher settings

Closes #2446
port 1.5

quickshell/Common/SettingsData.qml

@@ -240,6 +240,8 @@ Singleton {
     onBlurForegroundLayersChanged: saveSettings()
     property real blurLayerOutlineOpacity: 0.12
     onBlurLayerOutlineOpacityChanged: saveSettings()
+    property bool blurBorderEnabled: true
+    onBlurBorderEnabledChanged: saveSettings()
     property string blurBorderColor: "outline"
     onBlurBorderColorChanged: saveSettings()
     property string blurBorderCustomColor: "#ffffff"

quickshell/Common/settings/SettingsSpec.js

@@ -70,6 +70,7 @@ var SPEC = {
     blurEnabled: { def: false },
     blurForegroundLayers: { def: true },
     blurLayerOutlineOpacity: { def: 0.12, coerce: percentToUnit },
+    blurBorderEnabled: { def: true },
     blurBorderColor: { def: "outline" },
     blurBorderCustomColor: { def: "#ffffff" },
     blurBorderOpacity: { def: 0.35, coerce: percentToUnit },

quickshell/Modules/Settings/LauncherTab.qml

@@ -746,6 +746,31 @@ Item {
                 }
             }
 
+            SettingsCard {
+                width: parent.width
+                iconName: "layers"
+                title: I18n.tr("Modal Background")
+                settingKey: "modalBackground"
+                tags: ["modal", "darken", "background", "overlay", "launcher"]
+
+                SettingsControlledByFrame {
+                    visible: SettingsData.frameEnabled
+                    parentModal: root.parentModal
+                    settingLabel: I18n.tr("Darken Modal Background")
+                    reason: I18n.tr("Disabled by Frame Mode")
+                }
+
+                SettingsToggleRow {
+                    settingKey: "modalDarkenBackground"
+                    tags: ["modal", "darken", "background", "overlay", "launcher"]
+                    text: I18n.tr("Darken Modal Background")
+                    description: I18n.tr("Show darkened overlay behind modal dialogs")
+                    visible: !SettingsData.frameEnabled
+                    checked: SettingsData.modalDarkenBackground
+                    onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
+                }
+            }
+
             SettingsCard {
                 width: parent.width
                 iconName: "open_in_new"

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -1733,16 +1733,6 @@ Item {
                         }
                     }
                 }
-                SettingsToggleRow {
-                    tab: "theme"
-                    tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"]
-                    settingKey: "blurForegroundLayers"
-                    text: I18n.tr("Foreground Layers")
-                    description: I18n.tr("Show foreground surfaces on panels for stronger contrast")
-                    checked: SettingsData.blurForegroundLayers ?? true
-                    onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
-                }
-
                 SettingsSliderRow {
                     tab: "theme"
                     tags: ["surface", "popup", "transparency", "opacity", "modal"]
@@ -1758,12 +1748,47 @@ Item {
                     onSliderValueChanged: newValue => SettingsData.set("popupTransparency", newValue / 100)
                 }
 
+                SettingsToggleRow {
+                    tab: "theme"
+                    tags: ["foreground", "layers", "contrast", "surface", "blur", "glass", "frosted"]
+                    settingKey: "blurForegroundLayers"
+                    text: I18n.tr("Foreground Layers")
+                    description: I18n.tr("Show foreground surfaces on panels for stronger contrast")
+                    checked: SettingsData.blurForegroundLayers ?? true
+                    onToggled: checked => SettingsData.set("blurForegroundLayers", checked)
+                }
+
+                SettingsSliderRow {
+                    tab: "theme"
+                    tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
+                    settingKey: "blurLayerOutlineOpacity"
+                    text: I18n.tr("Layer Outline Opacity")
+                    description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards")
+                    value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
+                    minimum: 0
+                    maximum: 40
+                    unit: "%"
+                    defaultValue: 12
+                    onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
+                }
+
+                SettingsToggleRow {
+                    tab: "theme"
+                    tags: ["surface", "popup", "modal", "border", "outline", "edge"]
+                    settingKey: "blurBorderEnabled"
+                    text: I18n.tr("Surface Border Outline")
+                    description: I18n.tr("Outline around shell surfaces")
+                    checked: SettingsData.blurBorderEnabled ?? true
+                    onToggled: checked => SettingsData.set("blurBorderEnabled", checked)
+                }
+
                 SettingsDropdownRow {
                     tab: "theme"
                     tags: ["surface", "popup", "modal", "border", "outline", "edge"]
                     settingKey: "blurBorderColor"
                     text: I18n.tr("Surface Border Color")
                     description: I18n.tr("Border color around popouts, modals, and other shell surfaces")
+                    visible: SettingsData.blurBorderEnabled ?? true
                     options: [I18n.tr("Outline", "surface border color"), I18n.tr("Primary", "surface border color"), I18n.tr("Secondary", "surface border color"), I18n.tr("Text Color", "surface border color"), I18n.tr("Custom", "surface border color")]
                     optionColorMap: ({
                             [I18n.tr("Outline", "surface border color")]: Theme.outline,
@@ -1808,6 +1833,7 @@ Item {
                     settingKey: "blurBorderOpacity"
                     text: I18n.tr("Surface Border Opacity")
                     description: I18n.tr("Controls the outline of popouts, modals, and other shell surfaces")
+                    visible: SettingsData.blurBorderEnabled ?? true
                     value: Math.round((SettingsData.blurBorderOpacity ?? 0.35) * 100)
                     minimum: 0
                     maximum: 100
@@ -1816,20 +1842,6 @@ Item {
                     onSliderValueChanged: newValue => SettingsData.set("blurBorderOpacity", newValue / 100)
                 }
 
-                SettingsSliderRow {
-                    tab: "theme"
-                    tags: ["foreground", "layers", "outline", "border", "cards", "widgets", "notifications", "control center"]
-                    settingKey: "blurLayerOutlineOpacity"
-                    text: I18n.tr("Layer Outline Opacity")
-                    description: I18n.tr("Controls outlines around foreground cards, pills, and notification cards")
-                    value: Math.round((SettingsData.blurLayerOutlineOpacity ?? 0.12) * 100)
-                    minimum: 0
-                    maximum: 40
-                    unit: "%"
-                    defaultValue: 12
-                    onSliderValueChanged: newValue => SettingsData.set("blurLayerOutlineOpacity", newValue / 100)
-                }
-
                 SettingsSliderRow {
                     tab: "theme"
                     tags: ["corner", "radius", "rounded", "square"]
@@ -2102,32 +2114,6 @@ Item {
                 }
             }
 
-            SettingsCard {
-                tab: "theme"
-                tags: ["modal", "darken", "background", "overlay"]
-                title: I18n.tr("Modal Background")
-                settingKey: "modalBackground"
-                iconName: "layers"
-
-                SettingsControlledByFrame {
-                    visible: themeColorsTab.frameModeActive
-                    parentModal: themeColorsTab.parentModal
-                    settingLabel: I18n.tr("Darken Modal Background")
-                    reason: I18n.tr("Disabled by Frame Mode")
-                }
-
-                SettingsToggleRow {
-                    tab: "theme"
-                    tags: ["modal", "darken", "background", "overlay"]
-                    settingKey: "modalDarkenBackground"
-                    text: I18n.tr("Darken Modal Background")
-                    description: I18n.tr("Show darkened overlay behind modal dialogs")
-                    visible: !themeColorsTab.frameModeActive
-                    checked: SettingsData.modalDarkenBackground
-                    onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
-                }
-            }
-
             SettingsCard {
                 tab: "theme"
                 tags: ["applications", "portal", "dark", "terminal"]

quickshell/Services/BlurService.qml

@@ -17,6 +17,8 @@ Singleton {
 
     // These settings predate non-blurred surface borders, so keep their keys for compatibility.
     readonly property color borderColor: {
+        if (!(SettingsData.blurBorderEnabled ?? true))
+            return "transparent";
         const opacity = SettingsData.blurBorderOpacity ?? 0.35;
         switch (SettingsData.blurBorderColor ?? "outline") {
         case "primary":
@@ -26,12 +28,12 @@ Singleton {
         case "surfaceText":
             return Theme.withAlpha(Theme.surfaceText, opacity);
         case "custom":
-            return Theme.withAlpha(SettingsData.blurBorderCustomColor ?? "#ffffff", opacity);
+            return Theme.withAlpha(Qt.color(SettingsData.blurBorderCustomColor ?? "#ffffff"), opacity);
         default:
             return Theme.withAlpha(Theme.outline, opacity);
         }
     }
-    readonly property int borderWidth: 1
+    readonly property int borderWidth: (SettingsData.blurBorderEnabled ?? true) ? 1 : 0
 
     function hoverColor(baseColor, hoverAlpha) {
         if (!enabled)

quickshell/translations/settings_search_index.json

@@ -2334,6 +2334,29 @@
     ],
     "icon": "extension"
   },
+  {
+    "section": "modalDarkenBackground",
+    "label": "Darken Modal Background",
+    "tabIndex": 9,
+    "category": "Launcher",
+    "keywords": [
+      "background",
+      "behind",
+      "dark mode",
+      "darken",
+      "darkened",
+      "dialogs",
+      "drawer",
+      "launcher",
+      "menu",
+      "modal",
+      "night",
+      "overlay",
+      "show",
+      "start"
+    ],
+    "description": "Show darkened overlay behind modal dialogs"
+  },
   {
     "section": "launcherStyle",
     "label": "Default Launcher",
@@ -2570,6 +2593,30 @@
     ],
     "icon": "apps"
   },
+  {
+    "section": "modalBackground",
+    "label": "Modal Background",
+    "tabIndex": 9,
+    "category": "Launcher",
+    "keywords": [
+      "background",
+      "behind",
+      "dark mode",
+      "darken",
+      "darkened",
+      "dialogs",
+      "drawer",
+      "launcher",
+      "menu",
+      "modal",
+      "night",
+      "overlay",
+      "show",
+      "start"
+    ],
+    "icon": "layers",
+    "description": "Show darkened overlay behind modal dialogs"
+  },
   {
     "section": "spotlightCloseNiriOverview",
     "label": "Niri Integration",
@@ -3333,31 +3380,6 @@
     ],
     "description": "Base to derive dark theme from"
   },
-  {
-    "section": "modalDarkenBackground",
-    "label": "Darken Modal Background",
-    "tabIndex": 10,
-    "category": "Theme & Colors",
-    "keywords": [
-      "appearance",
-      "background",
-      "behind",
-      "colors",
-      "dark mode",
-      "darken",
-      "darkened",
-      "dialogs",
-      "look",
-      "modal",
-      "night",
-      "overlay",
-      "scheme",
-      "show",
-      "style",
-      "theme"
-    ],
-    "description": "Show darkened overlay behind modal dialogs"
-  },
   {
     "section": "matugenTemplateEmacs",
     "label": "Emacs",
@@ -3777,32 +3799,6 @@
     "icon": "auto_awesome",
     "conditionKey": "matugenAvailable"
   },
-  {
-    "section": "modalBackground",
-    "label": "Modal Background",
-    "tabIndex": 10,
-    "category": "Theme & Colors",
-    "keywords": [
-      "appearance",
-      "background",
-      "behind",
-      "colors",
-      "dark mode",
-      "darken",
-      "darkened",
-      "dialogs",
-      "look",
-      "modal",
-      "night",
-      "overlay",
-      "scheme",
-      "show",
-      "style",
-      "theme"
-    ],
-    "icon": "layers",
-    "description": "Show darkened overlay behind modal dialogs"
-  },
   {
     "section": "modalElevationEnabled",
     "label": "Modal Shadows",
@@ -4090,6 +4086,30 @@
     ],
     "description": "Controls the outline of popouts, modals, and other shell surfaces"
   },
+  {
+    "section": "blurBorderEnabled",
+    "label": "Surface Border Outline",
+    "tabIndex": 10,
+    "category": "Theme & Colors",
+    "keywords": [
+      "appearance",
+      "around",
+      "border",
+      "colors",
+      "edge",
+      "look",
+      "modal",
+      "outline",
+      "popup",
+      "scheme",
+      "shell",
+      "style",
+      "surface",
+      "surfaces",
+      "theme"
+    ],
+    "description": "Outline around shell surfaces"
+  },
   {
     "section": "popupTransparency",
     "label": "Surface Opacity",