From 86fb59406290950334e37b0eb447bde19fb843dc Mon Sep 17 00:00:00 2001
From: A1ca7raz <7345998+A1ca7raz@users.noreply.github.com>
Date: Sun, 28 Jun 2026 17:55:50 +0800
Subject: [PATCH] feat(Settings): add Settings window opacity option

- New "Settings Window opacity" slider in Theme & Colors > Modal Background
- Adds settingsModalOpacity setting (default 100%, 0-100% range)
- Settings modal background honors the opacity value
- Make sidebar transparent so window opacity shows through
- Remove redundant title bar Rectangle that caused opacity desync
---
 quickshell/Common/SettingsData.qml             |  1 +
 quickshell/Common/settings/SettingsSpec.js     |  1 +
 quickshell/Modals/Settings/SettingsModal.qml   | 13 ++++++-------
 quickshell/Modals/Settings/SettingsSidebar.qml |  2 +-
 quickshell/Modules/Settings/ThemeColorsTab.qml | 14 ++++++++++++++
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/quickshell/Common/SettingsData.qml b/quickshell/Common/SettingsData.qml
index 5619f7543..21e6c034b 100644
--- a/quickshell/Common/SettingsData.qml
+++ b/quickshell/Common/SettingsData.qml
@@ -165,6 +165,7 @@ Singleton {
     property bool runUserMatugenTemplates: true
     property string matugenTargetMonitor: ""
     property real popupTransparency: 1.0
+    property real settingsModalOpacity: 1.0
     property real dockTransparency: 1
     property string widgetBackgroundColor: "sch"
     property string widgetBackgroundCustomColor: "#6750A4"
diff --git a/quickshell/Common/settings/SettingsSpec.js b/quickshell/Common/settings/SettingsSpec.js
index 97570e2fc..c3d9f7581 100644
--- a/quickshell/Common/settings/SettingsSpec.js
+++ b/quickshell/Common/settings/SettingsSpec.js
@@ -16,6 +16,7 @@ var SPEC = {
     matugenTargetMonitor: { def: "", onChange: "regenSystemThemes" },
 
     popupTransparency: { def: 1.0, coerce: percentToUnit },
+    settingsModalOpacity: { def: 1.0, coerce: percentToUnit },
     dockTransparency: { def: 1.0, coerce: percentToUnit },
 
     widgetBackgroundColor: { def: "sch" },
diff --git a/quickshell/Modals/Settings/SettingsModal.qml b/quickshell/Modals/Settings/SettingsModal.qml
index f2d07dd5e..7e7162c27 100644
--- a/quickshell/Modals/Settings/SettingsModal.qml
+++ b/quickshell/Modals/Settings/SettingsModal.qml
@@ -90,7 +90,7 @@ FloatingWindow {
     minimumSize: Qt.size(500, 400)
     implicitWidth: 900
     implicitHeight: screen ? Math.min(940, screen.height - 100) : 940
-    color: Theme.surfaceContainer
+    color: "transparent"
     visible: false
 
     onIsCompactModeChanged: {
@@ -170,6 +170,11 @@ FloatingWindow {
         }
     }
 
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.withAlpha(Theme.surfaceContainer, SettingsData.settingsModalOpacity)
+    }
+
     FocusScope {
         id: contentFocusScope
 
@@ -194,12 +199,6 @@ FloatingWindow {
                     onDoubleClicked: windowControls.tryToggleMaximize()
                 }
 
-                Rectangle {
-                    anchors.fill: parent
-                    color: Theme.surfaceContainer
-                    opacity: 0.5
-                }
-
                 Row {
                     anchors.left: parent.left
                     anchors.leftMargin: Theme.spacingL
diff --git a/quickshell/Modals/Settings/SettingsSidebar.qml b/quickshell/Modals/Settings/SettingsSidebar.qml
index 08a8de23b..e6063bfea 100644
--- a/quickshell/Modals/Settings/SettingsSidebar.qml
+++ b/quickshell/Modals/Settings/SettingsSidebar.qml
@@ -631,7 +631,7 @@ Rectangle {
     implicitWidth: __calculatedWidth
     width: __calculatedWidth
     height: parent.height
-    color: Theme.surfaceContainer
+    color: "transparent"
     radius: Theme.cornerRadius
 
     Component.onCompleted: {
diff --git a/quickshell/Modules/Settings/ThemeColorsTab.qml b/quickshell/Modules/Settings/ThemeColorsTab.qml
index 6b15ba55d..c5e8df55a 100644
--- a/quickshell/Modules/Settings/ThemeColorsTab.qml
+++ b/quickshell/Modules/Settings/ThemeColorsTab.qml
@@ -2033,6 +2033,20 @@ Item {
                     checked: SettingsData.modalDarkenBackground
                     onToggled: checked => SettingsData.set("modalDarkenBackground", checked)
                 }
+
+                SettingsSliderRow {
+                    tab: "theme"
+                    tags: ["modal", "settings", "transparency", "opacity", "background"]
+                    settingKey: "settingsModalOpacity"
+                    text: I18n.tr("Settings Window Opacity")
+                    description: I18n.tr("Controls opacity of the Settings window background")
+                    value: Math.round(SettingsData.settingsModalOpacity * 100)
+                    minimum: 0
+                    maximum: 100
+                    unit: "%"
+                    defaultValue: 100
+                    onSliderValueChanged: newValue => SettingsData.set("settingsModalOpacity", newValue / 100)
+                }
             }
 
             SettingsCard {