From a46c76b9d54c12797ba8d9ddafc0410dd9e62413 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:45:43 +0800
Subject: [PATCH 01/14] feat(bar): Add capsule opacity setting with conditional
 slider in bar settings

---
 Assets/Translations/en.json                 |  4 +++
 Assets/settings-default.json                |  1 +
 Commons/Settings.qml                        |  1 +
 Modules/Bar/Extras/BarPillHorizontal.qml    |  4 +--
 Modules/Bar/Extras/BarPillVertical.qml      |  4 +--
 Modules/Bar/Widgets/ActiveWindow.qml        |  2 +-
 Modules/Bar/Widgets/AudioVisualizer.qml     |  2 +-
 Modules/Bar/Widgets/Clock.qml               |  2 +-
 Modules/Bar/Widgets/ControlCenter.qml       |  2 +-
 Modules/Bar/Widgets/DarkMode.qml            |  2 +-
 Modules/Bar/Widgets/LockKeys.qml            |  2 +-
 Modules/Bar/Widgets/MediaMini.qml           |  2 +-
 Modules/Bar/Widgets/NightLight.qml          |  2 +-
 Modules/Bar/Widgets/NoctaliaPerformance.qml |  2 +-
 Modules/Bar/Widgets/NotificationHistory.qml |  2 +-
 Modules/Bar/Widgets/PowerProfile.qml        |  2 +-
 Modules/Bar/Widgets/ScreenRecorder.qml      |  2 +-
 Modules/Bar/Widgets/SessionMenu.qml         |  2 +-
 Modules/Bar/Widgets/SystemMonitor.qml       |  2 +-
 Modules/Bar/Widgets/Taskbar.qml             |  2 +-
 Modules/Bar/Widgets/TaskbarGrouped.qml      |  2 +-
 Modules/Bar/Widgets/Tray.qml                |  6 ++---
 Modules/Bar/Widgets/WallpaperSelector.qml   |  2 +-
 Modules/Bar/Widgets/Workspace.qml           |  2 +-
 Modules/Panels/Settings/Tabs/BarTab.qml     | 30 +++++++++++++++++++++
 25 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/Assets/Translations/en.json b/Assets/Translations/en.json
index e1d7f25b..3b1aee6e 100644
--- a/Assets/Translations/en.json
+++ b/Assets/Translations/en.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Show widget backgrounds.",
           "label": "Show capsule"
+        },
+        "capsule-opacity": {
+          "description": "Set the opacity level for widget backgrounds when capsule is shown.",
+          "label": "Capsule opacity"
         }
       },
       "monitors": {
diff --git a/Assets/settings-default.json b/Assets/settings-default.json
index 01b1188a..f3afbe31 100644
--- a/Assets/settings-default.json
+++ b/Assets/settings-default.json
@@ -7,6 +7,7 @@
     "monitors": [],
     "density": "default",
     "showCapsule": true,
+    "capsuleOpacity": 1.0,
     "floating": false,
     "marginVertical": 0.25,
     "marginHorizontal": 0.25,
diff --git a/Commons/Settings.qml b/Commons/Settings.qml
index 0607b16a..d549f470 100644
--- a/Commons/Settings.qml
+++ b/Commons/Settings.qml
@@ -141,6 +141,7 @@ Singleton {
       property list<string> monitors: []
       property string density: "default" // "compact", "default", "comfortable"
       property bool showCapsule: true
+      property real capsuleOpacity: 1.0
 
       // Floating bar settings
       property bool floating: false
diff --git a/Modules/Bar/Extras/BarPillHorizontal.qml b/Modules/Bar/Extras/BarPillHorizontal.qml
index b799884a..145631b5 100644
--- a/Modules/Bar/Extras/BarPillHorizontal.qml
+++ b/Modules/Bar/Extras/BarPillHorizontal.qml
@@ -82,7 +82,7 @@ Item {
                            (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
 
@@ -135,7 +135,7 @@ Item {
     width: pillHeight
     height: pillHeight
     radius: width * 0.5
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
     anchors.verticalCenter: parent.verticalCenter
 
     x: oppositeDirection ? 0 : (parent.width - width)
diff --git a/Modules/Bar/Extras/BarPillVertical.qml b/Modules/Bar/Extras/BarPillVertical.qml
index db5de028..b30660f0 100644
--- a/Modules/Bar/Extras/BarPillVertical.qml
+++ b/Modules/Bar/Extras/BarPillVertical.qml
@@ -94,7 +94,7 @@ Item {
     y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
 
@@ -158,7 +158,7 @@ Item {
     width: buttonSize
     height: buttonSize
     radius: width * 0.5
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     // Icon positioning based on direction
     x: 0
diff --git a/Modules/Bar/Widgets/ActiveWindow.qml b/Modules/Bar/Widgets/ActiveWindow.qml
index 6d17d4c4..712a537c 100644
--- a/Modules/Bar/Widgets/ActiveWindow.qml
+++ b/Modules/Bar/Widgets/ActiveWindow.qml
@@ -173,7 +173,7 @@ Item {
     width: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : ((!hasFocusedWindow) && (hideMode === "hidden") ? 0 : dynamicWidth)
     height: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     // Smooth width transition
     Behavior on width {
diff --git a/Modules/Bar/Widgets/AudioVisualizer.qml b/Modules/Bar/Widgets/AudioVisualizer.qml
index 2bedeee2..e84c149a 100644
--- a/Modules/Bar/Widgets/AudioVisualizer.qml
+++ b/Modules/Bar/Widgets/AudioVisualizer.qml
@@ -74,7 +74,7 @@ Item {
     id: background
     anchors.fill: parent
     radius: Style.radiusS
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
   }
 
   // Store visualizer type to force re-evaluation
diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml
index 19f6f754..adde48ac 100644
--- a/Modules/Bar/Widgets/Clock.qml
+++ b/Modules/Bar/Widgets/Clock.qml
@@ -46,7 +46,7 @@ Rectangle {
   implicitHeight: isBarVertical ? Math.round(verticalLoader.implicitHeight + Style.marginS * 2) : Style.capsuleHeight
 
   radius: Style.radiusS
-  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
   Item {
     id: clockContainer
diff --git a/Modules/Bar/Widgets/ControlCenter.qml b/Modules/Bar/Widgets/ControlCenter.qml
index 8859b23e..de5599e8 100644
--- a/Modules/Bar/Widgets/ControlCenter.qml
+++ b/Modules/Bar/Widgets/ControlCenter.qml
@@ -45,7 +45,7 @@ NIconButton {
   baseSize: Style.capsuleHeight
   applyUiScale: false
   density: Settings.data.bar.density
-  colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: Color.mOnSurface
   colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mHover
   colorBorder: Color.transparent
diff --git a/Modules/Bar/Widgets/DarkMode.qml b/Modules/Bar/Widgets/DarkMode.qml
index 79bd99f4..9dbe6201 100644
--- a/Modules/Bar/Widgets/DarkMode.qml
+++ b/Modules/Bar/Widgets/DarkMode.qml
@@ -14,7 +14,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent) : Color.mPrimary
+  colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
   colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/LockKeys.qml b/Modules/Bar/Widgets/LockKeys.qml
index 834473f4..840c1864 100644
--- a/Modules/Bar/Widgets/LockKeys.qml
+++ b/Modules/Bar/Widgets/LockKeys.qml
@@ -45,7 +45,7 @@ Rectangle {
   Layout.alignment: Qt.AlignVCenter
 
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
   Item {
     id: layout
diff --git a/Modules/Bar/Widgets/MediaMini.qml b/Modules/Bar/Widgets/MediaMini.qml
index 255db3b8..5d0aac89 100644
--- a/Modules/Bar/Widgets/MediaMini.qml
+++ b/Modules/Bar/Widgets/MediaMini.qml
@@ -170,7 +170,7 @@ Item {
     width: isVerticalBar ? ((shouldHideIdle || isEmptyForHideMode) ? 0 : calculatedVerticalDimension()) : ((shouldHideIdle || isEmptyForHideMode) ? 0 : dynamicWidth)
     height: isVerticalBar ? ((shouldHideIdle || isEmptyForHideMode) ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     // Smooth width transition
     Behavior on width {
diff --git a/Modules/Bar/Widgets/NightLight.qml b/Modules/Bar/Widgets/NightLight.qml
index 3d126784..a535544c 100644
--- a/Modules/Bar/Widgets/NightLight.qml
+++ b/Modules/Bar/Widgets/NightLight.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: Settings.data.nightLight.forced ? Color.mPrimary : (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: Settings.data.nightLight.forced ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/NoctaliaPerformance.qml b/Modules/Bar/Widgets/NoctaliaPerformance.qml
index 1cd2d033..9acbcfd6 100644
--- a/Modules/Bar/Widgets/NoctaliaPerformance.qml
+++ b/Modules/Bar/Widgets/NoctaliaPerformance.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: PowerProfileService.noctaliaPerformanceMode ? Color.mPrimary : (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: PowerProfileService.noctaliaPerformanceMode ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: PowerProfileService.noctaliaPerformanceMode ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/NotificationHistory.qml b/Modules/Bar/Widgets/NotificationHistory.qml
index 2c39d356..6cf49f14 100644
--- a/Modules/Bar/Widgets/NotificationHistory.qml
+++ b/Modules/Bar/Widgets/NotificationHistory.qml
@@ -51,7 +51,7 @@ NIconButton {
   icon: NotificationService.doNotDisturb ? "bell-off" : "bell"
   tooltipText: NotificationService.doNotDisturb ? I18n.tr("tooltips.open-notification-history-disable-dnd") : I18n.tr("tooltips.open-notification-history-enable-dnd")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/PowerProfile.qml b/Modules/Bar/Widgets/PowerProfile.qml
index 724d7a4d..822304ad 100644
--- a/Modules/Bar/Widgets/PowerProfile.qml
+++ b/Modules/Bar/Widgets/PowerProfile.qml
@@ -21,7 +21,7 @@ NIconButton {
                          "profile": PowerProfileService.getName()
                        })
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (PowerProfileService.profile === PowerProfile.Balanced) ? (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent) : Color.mPrimary
+  colorBg: (PowerProfileService.profile === PowerProfile.Balanced) ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
   colorFg: (PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/ScreenRecorder.qml b/Modules/Bar/Widgets/ScreenRecorder.qml
index dcd05846..f2ce1724 100644
--- a/Modules/Bar/Widgets/ScreenRecorder.qml
+++ b/Modules/Bar/Widgets/ScreenRecorder.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: ScreenRecorderService.isRecording ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/SessionMenu.qml b/Modules/Bar/Widgets/SessionMenu.qml
index d6971af5..9d03a0b7 100644
--- a/Modules/Bar/Widgets/SessionMenu.qml
+++ b/Modules/Bar/Widgets/SessionMenu.qml
@@ -51,7 +51,7 @@ NIconButton {
   icon: "power"
   tooltipText: I18n.tr("tooltips.session-menu")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: root.iconColor
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml
index 76444409..71a5fe0e 100644
--- a/Modules/Bar/Widgets/SystemMonitor.qml
+++ b/Modules/Bar/Widgets/SystemMonitor.qml
@@ -108,7 +108,7 @@ Rectangle {
   implicitWidth: isVertical ? Style.capsuleHeight : Math.round(mainGrid.implicitWidth + Style.marginM * 2)
   implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2) : Style.capsuleHeight
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
   // Status indicator component definition
   Component {
diff --git a/Modules/Bar/Widgets/Taskbar.qml b/Modules/Bar/Widgets/Taskbar.qml
index 8891f64a..88de12fd 100644
--- a/Modules/Bar/Widgets/Taskbar.qml
+++ b/Modules/Bar/Widgets/Taskbar.qml
@@ -90,7 +90,7 @@ Rectangle {
   implicitWidth: visible ? (isVerticalBar ? Style.capsuleHeight : Math.round(taskbarLayout.implicitWidth + Style.marginM * 2)) : 0
   implicitHeight: visible ? (isVerticalBar ? Math.round(taskbarLayout.implicitHeight + Style.marginM * 2) : Style.capsuleHeight) : 0
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
   GridLayout {
     id: taskbarLayout
diff --git a/Modules/Bar/Widgets/TaskbarGrouped.qml b/Modules/Bar/Widgets/TaskbarGrouped.qml
index 17ea3a90..f8bdaf1f 100644
--- a/Modules/Bar/Widgets/TaskbarGrouped.qml
+++ b/Modules/Bar/Widgets/TaskbarGrouped.qml
@@ -211,7 +211,7 @@ Item {
       border.width: 1
       width: (hasWindows ? iconsFlow.implicitWidth : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginXS : Style.marginL)
       height: (hasWindows ? iconsFlow.implicitHeight : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginL : Style.marginXS)
-      color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+      color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
       MouseArea {
         anchors.fill: parent
diff --git a/Modules/Bar/Widgets/Tray.qml b/Modules/Bar/Widgets/Tray.qml
index 10a0da58..cc140bf3 100644
--- a/Modules/Bar/Widgets/Tray.qml
+++ b/Modules/Bar/Widgets/Tray.qml
@@ -225,7 +225,7 @@ Rectangle {
   implicitWidth: isVertical ? Style.capsuleHeight : Math.round(trayFlow.implicitWidth)
   implicitHeight: isVertical ? Math.round(trayFlow.implicitHeight) : Style.capsuleHeight
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
   Flow {
     id: trayFlow
@@ -241,7 +241,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent) : Color.mPrimary
+      colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
       colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent
@@ -396,7 +396,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+      colorBg: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
       colorFg: Color.mOnSurface
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/WallpaperSelector.qml b/Modules/Bar/Widgets/WallpaperSelector.qml
index 1593cbc5..2b8455d7 100644
--- a/Modules/Bar/Widgets/WallpaperSelector.qml
+++ b/Modules/Bar/Widgets/WallpaperSelector.qml
@@ -16,7 +16,7 @@ NIconButton {
   icon: "wallpaper-selector"
   tooltipText: I18n.tr("tooltips.open-wallpaper-selector")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent)
+  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/Workspace.qml b/Modules/Bar/Widgets/Workspace.qml
index 37a97cf1..bc09f266 100644
--- a/Modules/Bar/Widgets/Workspace.qml
+++ b/Modules/Bar/Widgets/Workspace.qml
@@ -225,7 +225,7 @@ Item {
     width: isVertical ? Style.capsuleHeight : parent.width
     height: isVertical ? parent.height : Style.capsuleHeight
     radius: Style.radiusM
-    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
+    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
diff --git a/Modules/Panels/Settings/Tabs/BarTab.qml b/Modules/Panels/Settings/Tabs/BarTab.qml
index 5ba61a05..01ef0378 100644
--- a/Modules/Panels/Settings/Tabs/BarTab.qml
+++ b/Modules/Panels/Settings/Tabs/BarTab.qml
@@ -89,6 +89,36 @@ ColumnLayout {
     onToggled: checked => Settings.data.bar.showCapsule = checked
   }
 
+  ColumnLayout {
+    Layout.fillWidth: true
+    spacing: Style.marginXXS
+    visible: Settings.data.bar.showCapsule
+
+    NText {
+      text: I18n.tr("settings.bar.appearance.capsule-opacity.label")
+      pointSize: Style.fontSizeS
+      font.weight: Style.fontWeightMedium
+      color: Color.mOnSurface
+    }
+
+    NText {
+      text: I18n.tr("settings.bar.appearance.capsule-opacity.description")
+      pointSize: Style.fontSizeXS
+      color: Color.mOnSurfaceVariant
+      wrapMode: Text.WordWrap
+    }
+
+    NValueSlider {
+      Layout.fillWidth: true
+      from: 0
+      to: 1
+      stepSize: 0.01
+      value: Settings.data.bar.capsuleOpacity
+      onMoved: value => Settings.data.bar.capsuleOpacity = value
+      text: Math.floor(Settings.data.bar.capsuleOpacity * 100) + "%"
+    }
+  }
+
   NToggle {
     Layout.fillWidth: true
     label: I18n.tr("settings.bar.appearance.floating.label")

From aee415e82e9378be003d4c2ba2af1bcc462e519a Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:47:20 +0800
Subject: [PATCH 02/14] Add French translation for capsule opacity setting

---
 Assets/Translations/fr.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/fr.json b/Assets/Translations/fr.json
index 7b2c5e19..70b11ec6 100644
--- a/Assets/Translations/fr.json
+++ b/Assets/Translations/fr.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Afficher les arrière-plans des widgets.",
           "label": "Afficher la capsule"
+        },
+        "capsule-opacity": {
+          "description": "Définir le niveau d'opacité des arrière-plans des widgets quand la capsule est affichée.",
+          "label": "Opacité de la capsule"
         }
       },
       "monitors": {

From 8f6d1e06d2c24368990afb0033a933a1be934043 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:47:41 +0800
Subject: [PATCH 03/14] Add German translation for capsule opacity setting

---
 Assets/Translations/de.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/de.json b/Assets/Translations/de.json
index 7d9e0078..59aafe49 100644
--- a/Assets/Translations/de.json
+++ b/Assets/Translations/de.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Widget-Hintergründe anzeigen.",
           "label": "Kapsel anzeigen"
+        },
+        "capsule-opacity": {
+          "description": "Deckkraft der Widget-Hintergründe festlegen, wenn Kapsel angezeigt wird.",
+          "label": "Kapsel-Deckkraft"
         }
       },
       "monitors": {

From 1f5b7ab3a1e540d43c4b908742fb7273e21cee45 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:48:02 +0800
Subject: [PATCH 04/14] Add Spanish translation for capsule opacity setting

---
 Assets/Translations/es.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/es.json b/Assets/Translations/es.json
index e68a082f..2e8239c0 100644
--- a/Assets/Translations/es.json
+++ b/Assets/Translations/es.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Mostrar fondos de los widgets.",
           "label": "Mostrar cápsula"
+        },
+        "capsule-opacity": {
+          "description": "Establecer el nivel de opacidad para los fondos de los widgets cuando se muestra la cápsula.",
+          "label": "Opacidad de la cápsula"
         }
       },
       "monitors": {

From 83edb704a16a1df06716029a27b4dfa00eed076b Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:48:18 +0800
Subject: [PATCH 05/14] Add Dutch translation for capsule opacity setting

---
 Assets/Translations/nl.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/nl.json b/Assets/Translations/nl.json
index ace8d2f6..b711e1b1 100644
--- a/Assets/Translations/nl.json
+++ b/Assets/Translations/nl.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Widget-achtergronden tonen.",
           "label": "Capsules tonen"
+        },
+        "capsule-opacity": {
+          "description": "Stel het doorzichtigheidsniveau in voor widget-achtergronden wanneer capsule wordt getoond.",
+          "label": "Capsule-doorzichtigheid"
         }
       },
       "monitors": {

From 89a5efe6d169fae9a3848919fda59333a46c52f6 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:49:12 +0800
Subject: [PATCH 06/14] Add Portuguese translation for capsule opacity setting

---
 Assets/Translations/pt.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/pt.json b/Assets/Translations/pt.json
index 2c693e6c..5f071fe0 100644
--- a/Assets/Translations/pt.json
+++ b/Assets/Translations/pt.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Mostra o fundo dos widgets.",
           "label": "Mostrar cápsula"
+        },
+        "capsule-opacity": {
+          "description": "Define o nível de opacidade para fundos dos widgets quando a cápsula é mostrada.",
+          "label": "Opacidade da cápsula"
         }
       },
       "monitors": {

From ada3d7abf21fe270da3606f71a6488d735b8392f Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:49:39 +0800
Subject: [PATCH 07/14] Add Russian translation for capsule opacity setting

---
 Assets/Translations/ru.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/ru.json b/Assets/Translations/ru.json
index 1151e314..6c25c87e 100644
--- a/Assets/Translations/ru.json
+++ b/Assets/Translations/ru.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Показывать фон виджетов.",
           "label": "Показывать капсулу"
+        },
+        "capsule-opacity": {
+          "description": "Установить уровень непрозрачности для фона виджетов, когда капсула отображается.",
+          "label": "Непрозрачность капсулы"
         }
       },
       "monitors": {

From 660287c7a1267f07a463ea71d8f69ea5965aa30e Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:49:54 +0800
Subject: [PATCH 08/14] Add Ukrainian translation for capsule opacity setting

---
 Assets/Translations/uk-UA.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/uk-UA.json b/Assets/Translations/uk-UA.json
index 446d8795..7089e65c 100644
--- a/Assets/Translations/uk-UA.json
+++ b/Assets/Translations/uk-UA.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Показувати фон віджетів.",
           "label": "Показувати капсулу"
+        },
+        "capsule-opacity": {
+          "description": "Встановити рівень непрозорості для фону віджетів, коли показано капсулу.",
+          "label": "Непрозорість капсули"
         }
       },
       "monitors": {

From f2ffed74be2a971ebae6f96f4d0180ef1d2347bb Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:50:08 +0800
Subject: [PATCH 09/14] Add Turkish translation for capsule opacity setting

---
 Assets/Translations/tr.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/tr.json b/Assets/Translations/tr.json
index fa661ec9..4bf5a8b2 100644
--- a/Assets/Translations/tr.json
+++ b/Assets/Translations/tr.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "Widget arka planlarını göster.",
           "label": "Kapsülü göster"
+        },
+        "capsule-opacity": {
+          "description": "Kapsül gösterildiğinde widget arka planlarının saydamlık seviyesini ayarla.",
+          "label": "Kapsül saydamlığı"
         }
       },
       "monitors": {

From 609c9900f760801bbf4773398ff03283917c39ea Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 09:51:37 +0800
Subject: [PATCH 10/14] Add Chinese translation for capsule opacity setting

---
 Assets/Translations/zh-CN.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Assets/Translations/zh-CN.json b/Assets/Translations/zh-CN.json
index 536ab1e0..b6a1e7c5 100644
--- a/Assets/Translations/zh-CN.json
+++ b/Assets/Translations/zh-CN.json
@@ -818,6 +818,10 @@
         "show-capsule": {
           "description": "为每个小部件添加背景。",
           "label": "显示组件背景"
+        },
+        "capsule-opacity": {
+          "description": "设置显示胶囊时小部件背景的不透明度。",
+          "label": "胶囊不透明度"
         }
       },
       "monitors": {

From a201b8a2c81ef69612139dff689f223782b47698 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 10:08:12 +0800
Subject: [PATCH 11/14] fix: Fix overlapping opacity in BarPill components

---
 Modules/Bar/Extras/BarPillHorizontal.qml | 30 +++++++++++++++++-------
 Modules/Bar/Extras/BarPillVertical.qml   | 29 ++++++++++++++++-------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/Modules/Bar/Extras/BarPillHorizontal.qml b/Modules/Bar/Extras/BarPillHorizontal.qml
index 145631b5..230eb0fe 100644
--- a/Modules/Bar/Extras/BarPillHorizontal.qml
+++ b/Modules/Bar/Extras/BarPillHorizontal.qml
@@ -72,6 +72,25 @@ Item {
     }
   }
 
+  // Unified background for the entire pill area to avoid overlapping opacity
+  Rectangle {
+    id: pillBackground
+    width: root.width
+    height: pillHeight
+    radius: halfPillHeight
+    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    anchors.verticalCenter: parent.verticalCenter
+
+    readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
+
+    Behavior on color {
+      ColorAnimation {
+        duration: Style.animationNormal
+        easing.type: Easing.InOutQuad
+      }
+    }
+  }
+
   Rectangle {
     id: pill
 
@@ -82,7 +101,7 @@ Item {
                            (iconCircle.x + iconCircle.width / 2) - width // Opens left
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Color.transparent // Make pill background transparent to avoid double opacity
 
     readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
 
@@ -135,18 +154,11 @@ Item {
     width: pillHeight
     height: pillHeight
     radius: width * 0.5
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Color.transparent // Make icon background transparent to avoid double opacity
     anchors.verticalCenter: parent.verticalCenter
 
     x: oppositeDirection ? 0 : (parent.width - width)
 
-    Behavior on color {
-      ColorAnimation {
-        duration: Style.animationNormal
-        easing.type: Easing.InOutQuad
-      }
-    }
-
     NIcon {
       icon: root.icon
       pointSize: iconSize
diff --git a/Modules/Bar/Extras/BarPillVertical.qml b/Modules/Bar/Extras/BarPillVertical.qml
index b30660f0..fc5f2ecc 100644
--- a/Modules/Bar/Extras/BarPillVertical.qml
+++ b/Modules/Bar/Extras/BarPillVertical.qml
@@ -83,6 +83,24 @@ Item {
     }
   }
 
+  // Unified background for the entire pill area to avoid overlapping opacity
+  Rectangle {
+    id: pillBackground
+    width: buttonSize
+    height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
+    radius: halfButtonSize
+    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+
+    readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
+
+    Behavior on color {
+      ColorAnimation {
+        duration: Style.animationNormal
+        easing.type: Easing.InOutQuad
+      }
+    }
+  }
+
   Rectangle {
     id: pill
 
@@ -94,7 +112,7 @@ Item {
     y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
 
     opacity: revealed ? Style.opacityFull : Style.opacityNone
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Color.transparent // Make pill background transparent to avoid double opacity
 
     readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
 
@@ -158,20 +176,13 @@ Item {
     width: buttonSize
     height: buttonSize
     radius: width * 0.5
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Color.transparent // Make icon background transparent to avoid double opacity
 
     // Icon positioning based on direction
     x: 0
     y: openUpward ? (parent.height - height) : 0
     anchors.horizontalCenter: parent.horizontalCenter
 
-    Behavior on color {
-      ColorAnimation {
-        duration: Style.animationNormal
-        easing.type: Easing.InOutQuad
-      }
-    }
-
     NIcon {
       icon: root.icon
       pointSize: iconSize

From 24b8eeb1f4cb334e6908c33811d2917e26b1888d Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 10:16:33 +0800
Subject: [PATCH 12/14] feat: Optimize capsule color computation by using
 Style.qml property

---
 Commons/Style.qml                           | 3 +++
 Modules/Bar/Extras/BarPillHorizontal.qml    | 2 +-
 Modules/Bar/Extras/BarPillVertical.qml      | 2 +-
 Modules/Bar/Widgets/ActiveWindow.qml        | 2 +-
 Modules/Bar/Widgets/AudioVisualizer.qml     | 2 +-
 Modules/Bar/Widgets/Clock.qml               | 2 +-
 Modules/Bar/Widgets/ControlCenter.qml       | 2 +-
 Modules/Bar/Widgets/DarkMode.qml            | 2 +-
 Modules/Bar/Widgets/LockKeys.qml            | 2 +-
 Modules/Bar/Widgets/MediaMini.qml           | 2 +-
 Modules/Bar/Widgets/NightLight.qml          | 2 +-
 Modules/Bar/Widgets/NoctaliaPerformance.qml | 2 +-
 Modules/Bar/Widgets/NotificationHistory.qml | 2 +-
 Modules/Bar/Widgets/PowerProfile.qml        | 2 +-
 Modules/Bar/Widgets/ScreenRecorder.qml      | 2 +-
 Modules/Bar/Widgets/SessionMenu.qml         | 2 +-
 Modules/Bar/Widgets/SystemMonitor.qml       | 2 +-
 Modules/Bar/Widgets/Taskbar.qml             | 2 +-
 Modules/Bar/Widgets/TaskbarGrouped.qml      | 2 +-
 Modules/Bar/Widgets/Tray.qml                | 6 +++---
 Modules/Bar/Widgets/WallpaperSelector.qml   | 2 +-
 Modules/Bar/Widgets/Workspace.qml           | 2 +-
 22 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/Commons/Style.qml b/Commons/Style.qml
index 64e4e22b..b27e4e65 100644
--- a/Commons/Style.qml
+++ b/Commons/Style.qml
@@ -104,4 +104,7 @@ Singleton {
       return Math.round(barHeight * 0.82);
     }
   }
+  readonly property color capsuleColor: Settings.data.bar.showCapsule ?
+    Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) :
+    Color.transparent
 }
diff --git a/Modules/Bar/Extras/BarPillHorizontal.qml b/Modules/Bar/Extras/BarPillHorizontal.qml
index 230eb0fe..cb4b6e83 100644
--- a/Modules/Bar/Extras/BarPillHorizontal.qml
+++ b/Modules/Bar/Extras/BarPillHorizontal.qml
@@ -78,7 +78,7 @@ Item {
     width: root.width
     height: pillHeight
     radius: halfPillHeight
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: hovered ? Color.mHover : Style.capsuleColor
     anchors.verticalCenter: parent.verticalCenter
 
     readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
diff --git a/Modules/Bar/Extras/BarPillVertical.qml b/Modules/Bar/Extras/BarPillVertical.qml
index fc5f2ecc..66f32fdd 100644
--- a/Modules/Bar/Extras/BarPillVertical.qml
+++ b/Modules/Bar/Extras/BarPillVertical.qml
@@ -89,7 +89,7 @@ Item {
     width: buttonSize
     height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
     radius: halfButtonSize
-    color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: hovered ? Color.mHover : Style.capsuleColor
 
     readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
 
diff --git a/Modules/Bar/Widgets/ActiveWindow.qml b/Modules/Bar/Widgets/ActiveWindow.qml
index 712a537c..cbd95315 100644
--- a/Modules/Bar/Widgets/ActiveWindow.qml
+++ b/Modules/Bar/Widgets/ActiveWindow.qml
@@ -173,7 +173,7 @@ Item {
     width: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : ((!hasFocusedWindow) && (hideMode === "hidden") ? 0 : dynamicWidth)
     height: isVerticalBar ? ((!hasFocusedWindow) && hideMode === "hidden" ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Style.capsuleColor
 
     // Smooth width transition
     Behavior on width {
diff --git a/Modules/Bar/Widgets/AudioVisualizer.qml b/Modules/Bar/Widgets/AudioVisualizer.qml
index e84c149a..8623ca06 100644
--- a/Modules/Bar/Widgets/AudioVisualizer.qml
+++ b/Modules/Bar/Widgets/AudioVisualizer.qml
@@ -74,7 +74,7 @@ Item {
     id: background
     anchors.fill: parent
     radius: Style.radiusS
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Style.capsuleColor
   }
 
   // Store visualizer type to force re-evaluation
diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml
index adde48ac..6e9e183b 100644
--- a/Modules/Bar/Widgets/Clock.qml
+++ b/Modules/Bar/Widgets/Clock.qml
@@ -46,7 +46,7 @@ Rectangle {
   implicitHeight: isBarVertical ? Math.round(verticalLoader.implicitHeight + Style.marginS * 2) : Style.capsuleHeight
 
   radius: Style.radiusS
-  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+  color: Style.capsuleColor
 
   Item {
     id: clockContainer
diff --git a/Modules/Bar/Widgets/ControlCenter.qml b/Modules/Bar/Widgets/ControlCenter.qml
index de5599e8..484e6bc1 100644
--- a/Modules/Bar/Widgets/ControlCenter.qml
+++ b/Modules/Bar/Widgets/ControlCenter.qml
@@ -45,7 +45,7 @@ NIconButton {
   baseSize: Style.capsuleHeight
   applyUiScale: false
   density: Settings.data.bar.density
-  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: Style.capsuleColor
   colorFg: Color.mOnSurface
   colorBgHover: useDistroLogo ? Color.mSurfaceVariant : Color.mHover
   colorBorder: Color.transparent
diff --git a/Modules/Bar/Widgets/DarkMode.qml b/Modules/Bar/Widgets/DarkMode.qml
index 9dbe6201..28045f8b 100644
--- a/Modules/Bar/Widgets/DarkMode.qml
+++ b/Modules/Bar/Widgets/DarkMode.qml
@@ -14,7 +14,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
+  colorBg: Settings.data.colorSchemes.darkMode ? Style.capsuleColor : Color.mPrimary
   colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/LockKeys.qml b/Modules/Bar/Widgets/LockKeys.qml
index 840c1864..272953f9 100644
--- a/Modules/Bar/Widgets/LockKeys.qml
+++ b/Modules/Bar/Widgets/LockKeys.qml
@@ -45,7 +45,7 @@ Rectangle {
   Layout.alignment: Qt.AlignVCenter
 
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+  color: Style.capsuleColor
 
   Item {
     id: layout
diff --git a/Modules/Bar/Widgets/MediaMini.qml b/Modules/Bar/Widgets/MediaMini.qml
index 5d0aac89..8a5fa212 100644
--- a/Modules/Bar/Widgets/MediaMini.qml
+++ b/Modules/Bar/Widgets/MediaMini.qml
@@ -170,7 +170,7 @@ Item {
     width: isVerticalBar ? ((shouldHideIdle || isEmptyForHideMode) ? 0 : calculatedVerticalDimension()) : ((shouldHideIdle || isEmptyForHideMode) ? 0 : dynamicWidth)
     height: isVerticalBar ? ((shouldHideIdle || isEmptyForHideMode) ? 0 : calculatedVerticalDimension()) : Style.capsuleHeight
     radius: isVerticalBar ? width / 2 : Style.radiusM
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Style.capsuleColor
 
     // Smooth width transition
     Behavior on width {
diff --git a/Modules/Bar/Widgets/NightLight.qml b/Modules/Bar/Widgets/NightLight.qml
index a535544c..7346e06d 100644
--- a/Modules/Bar/Widgets/NightLight.qml
+++ b/Modules/Bar/Widgets/NightLight.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: Settings.data.nightLight.forced ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Style.capsuleColor
   colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/NoctaliaPerformance.qml b/Modules/Bar/Widgets/NoctaliaPerformance.qml
index 9acbcfd6..64e93b5a 100644
--- a/Modules/Bar/Widgets/NoctaliaPerformance.qml
+++ b/Modules/Bar/Widgets/NoctaliaPerformance.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: PowerProfileService.noctaliaPerformanceMode ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: PowerProfileService.noctaliaPerformanceMode ? Color.mPrimary : Style.capsuleColor
   colorFg: PowerProfileService.noctaliaPerformanceMode ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/NotificationHistory.qml b/Modules/Bar/Widgets/NotificationHistory.qml
index 6cf49f14..08d13830 100644
--- a/Modules/Bar/Widgets/NotificationHistory.qml
+++ b/Modules/Bar/Widgets/NotificationHistory.qml
@@ -51,7 +51,7 @@ NIconButton {
   icon: NotificationService.doNotDisturb ? "bell-off" : "bell"
   tooltipText: NotificationService.doNotDisturb ? I18n.tr("tooltips.open-notification-history-disable-dnd") : I18n.tr("tooltips.open-notification-history-enable-dnd")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: Style.capsuleColor
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/PowerProfile.qml b/Modules/Bar/Widgets/PowerProfile.qml
index 822304ad..d7711db9 100644
--- a/Modules/Bar/Widgets/PowerProfile.qml
+++ b/Modules/Bar/Widgets/PowerProfile.qml
@@ -21,7 +21,7 @@ NIconButton {
                          "profile": PowerProfileService.getName()
                        })
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (PowerProfileService.profile === PowerProfile.Balanced) ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
+  colorBg: (PowerProfileService.profile === PowerProfile.Balanced) ? Style.capsuleColor : Color.mPrimary
   colorFg: (PowerProfileService.profile === PowerProfile.Balanced) ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/ScreenRecorder.qml b/Modules/Bar/Widgets/ScreenRecorder.qml
index f2ce1724..3bcacc82 100644
--- a/Modules/Bar/Widgets/ScreenRecorder.qml
+++ b/Modules/Bar/Widgets/ScreenRecorder.qml
@@ -17,7 +17,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: ScreenRecorderService.isRecording ? Color.mPrimary : Style.capsuleColor
   colorFg: ScreenRecorderService.isRecording ? Color.mOnPrimary : Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/SessionMenu.qml b/Modules/Bar/Widgets/SessionMenu.qml
index 9d03a0b7..9c3a25f0 100644
--- a/Modules/Bar/Widgets/SessionMenu.qml
+++ b/Modules/Bar/Widgets/SessionMenu.qml
@@ -51,7 +51,7 @@ NIconButton {
   icon: "power"
   tooltipText: I18n.tr("tooltips.session-menu")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: Style.capsuleColor
   colorFg: root.iconColor
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml
index 71a5fe0e..09cd27a3 100644
--- a/Modules/Bar/Widgets/SystemMonitor.qml
+++ b/Modules/Bar/Widgets/SystemMonitor.qml
@@ -108,7 +108,7 @@ Rectangle {
   implicitWidth: isVertical ? Style.capsuleHeight : Math.round(mainGrid.implicitWidth + Style.marginM * 2)
   implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2) : Style.capsuleHeight
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+  color: Style.capsuleColor
 
   // Status indicator component definition
   Component {
diff --git a/Modules/Bar/Widgets/Taskbar.qml b/Modules/Bar/Widgets/Taskbar.qml
index 88de12fd..651a7ff3 100644
--- a/Modules/Bar/Widgets/Taskbar.qml
+++ b/Modules/Bar/Widgets/Taskbar.qml
@@ -90,7 +90,7 @@ Rectangle {
   implicitWidth: visible ? (isVerticalBar ? Style.capsuleHeight : Math.round(taskbarLayout.implicitWidth + Style.marginM * 2)) : 0
   implicitHeight: visible ? (isVerticalBar ? Math.round(taskbarLayout.implicitHeight + Style.marginM * 2) : Style.capsuleHeight) : 0
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+  color: Style.capsuleColor
 
   GridLayout {
     id: taskbarLayout
diff --git a/Modules/Bar/Widgets/TaskbarGrouped.qml b/Modules/Bar/Widgets/TaskbarGrouped.qml
index f8bdaf1f..01254d5e 100644
--- a/Modules/Bar/Widgets/TaskbarGrouped.qml
+++ b/Modules/Bar/Widgets/TaskbarGrouped.qml
@@ -211,7 +211,7 @@ Item {
       border.width: 1
       width: (hasWindows ? iconsFlow.implicitWidth : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginXS : Style.marginL)
       height: (hasWindows ? iconsFlow.implicitHeight : root.itemSize * 0.8) + (root.isVerticalBar ? Style.marginL : Style.marginXS)
-      color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+      color: Style.capsuleColor
 
       MouseArea {
         anchors.fill: parent
diff --git a/Modules/Bar/Widgets/Tray.qml b/Modules/Bar/Widgets/Tray.qml
index cc140bf3..37bdf08b 100644
--- a/Modules/Bar/Widgets/Tray.qml
+++ b/Modules/Bar/Widgets/Tray.qml
@@ -225,7 +225,7 @@ Rectangle {
   implicitWidth: isVertical ? Style.capsuleHeight : Math.round(trayFlow.implicitWidth)
   implicitHeight: isVertical ? Math.round(trayFlow.implicitHeight) : Style.capsuleHeight
   radius: Style.radiusM
-  color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+  color: Style.capsuleColor
 
   Flow {
     id: trayFlow
@@ -241,7 +241,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Settings.data.colorSchemes.darkMode ? (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent) : Color.mPrimary
+      colorBg: Settings.data.colorSchemes.darkMode ? Style.capsuleColor : Color.mPrimary
       colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent
@@ -396,7 +396,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+      colorBg: Style.capsuleColor
       colorFg: Color.mOnSurface
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/WallpaperSelector.qml b/Modules/Bar/Widgets/WallpaperSelector.qml
index 2b8455d7..0e2a0118 100644
--- a/Modules/Bar/Widgets/WallpaperSelector.qml
+++ b/Modules/Bar/Widgets/WallpaperSelector.qml
@@ -16,7 +16,7 @@ NIconButton {
   icon: "wallpaper-selector"
   tooltipText: I18n.tr("tooltips.open-wallpaper-selector")
   tooltipDirection: BarService.getTooltipDirection()
-  colorBg: (Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent)
+  colorBg: Style.capsuleColor
   colorFg: Color.mOnSurface
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent
diff --git a/Modules/Bar/Widgets/Workspace.qml b/Modules/Bar/Widgets/Workspace.qml
index bc09f266..739eb82e 100644
--- a/Modules/Bar/Widgets/Workspace.qml
+++ b/Modules/Bar/Widgets/Workspace.qml
@@ -225,7 +225,7 @@ Item {
     width: isVertical ? Style.capsuleHeight : parent.width
     height: isVertical ? parent.height : Style.capsuleHeight
     radius: Style.radiusM
-    color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
+    color: Style.capsuleColor
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter

From b79ce196a6ac6f4cd040992cf3b9c07a2c5cf7af Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 10:29:44 +0800
Subject: [PATCH 13/14] Unify the tray background color

---
 Modules/Bar/Widgets/Tray.qml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Modules/Bar/Widgets/Tray.qml b/Modules/Bar/Widgets/Tray.qml
index 37bdf08b..0b584ac3 100644
--- a/Modules/Bar/Widgets/Tray.qml
+++ b/Modules/Bar/Widgets/Tray.qml
@@ -241,7 +241,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Settings.data.colorSchemes.darkMode ? Style.capsuleColor : Color.mPrimary
+      colorBg: Color.transparent
       colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent
@@ -396,7 +396,7 @@ Rectangle {
       density: Settings.data.bar.density
       baseSize: Style.capsuleHeight
       applyUiScale: false
-      colorBg: Style.capsuleColor
+      colorBg: Color.transparent
       colorFg: Color.mOnSurface
       colorBorder: Color.transparent
       colorBorderHover: Color.transparent

From b2bfb71a91282ec82bb5f9d3c65f99534d1efad7 Mon Sep 17 00:00:00 2001
From: loner <2788892716@qq.com>
Date: Mon, 17 Nov 2025 10:34:49 +0800
Subject: [PATCH 14/14] fix: DarkMode widget to use unified Style.capsuleColor

---
 Modules/Bar/Widgets/DarkMode.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Modules/Bar/Widgets/DarkMode.qml b/Modules/Bar/Widgets/DarkMode.qml
index 28045f8b..1c713065 100644
--- a/Modules/Bar/Widgets/DarkMode.qml
+++ b/Modules/Bar/Widgets/DarkMode.qml
@@ -14,7 +14,7 @@ NIconButton {
   density: Settings.data.bar.density
   baseSize: Style.capsuleHeight
   applyUiScale: false
-  colorBg: Settings.data.colorSchemes.darkMode ? Style.capsuleColor : Color.mPrimary
+  colorBg: Style.capsuleColor
   colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary
   colorBorder: Color.transparent
   colorBorderHover: Color.transparent