Optional capsule bg

Modules/Bar/Widgets/ActiveWindow.qml

@@ -146,7 +146,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: width / 2
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     Item {
       id: mainContainer

Modules/Bar/Widgets/Clock.qml

@@ -43,7 +43,7 @@ Rectangle {
   implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill
 
   radius: Math.round(Style.radiusS * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   Item {
     id: clockContainer

Modules/Bar/Widgets/MediaMini.qml

@@ -82,7 +82,7 @@ Item {
     width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (rowLayout.implicitWidth + Style.marginM * 2 * scaling)
     height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : Math.round(Style.capsuleHeight * scaling)
     radius: (barPosition === "left" || barPosition === "right") ? width / 2 : Math.round(Style.radiusM * scaling)
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     // Used to anchor the tooltip, so the tooltip does not move when the content expands
     Item {

Modules/Bar/Widgets/SidePanelToggle.qml

@@ -46,7 +46,7 @@ NIconButton {
   IconImage {
     id: logo
     anchors.centerIn: parent
-    width: root.width * 0.85
+    width: root.width * 0.8
     height: width
     source: useDistroLogo ? DistroLogoService.osLogo : ""
     visible: useDistroLogo && source !== ""

Modules/Bar/Widgets/SystemMonitor.qml

@@ -50,7 +50,7 @@ Rectangle {
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : Math.round(mainGrid.implicitWidth + Style.marginM * 2 * scaling)
   implicitHeight: isVertical ? Math.round(mainGrid.implicitHeight + Style.marginM * 2 * scaling) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   GridLayout {
     id: mainGrid

Modules/Bar/Widgets/Taskbar.qml

@@ -21,7 +21,7 @@ Rectangle {
   implicitWidth: isVerticalBar ? Math.round(Style.capsuleHeight * scaling) : taskbarLayout.implicitWidth + Style.marginM * scaling * 2
   implicitHeight: isVerticalBar ? taskbarLayout.implicitHeight + Style.marginM * scaling * 2 : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   GridLayout {
     id: taskbarLayout

Modules/Bar/Widgets/Tray.qml

@@ -32,7 +32,7 @@ Rectangle {
   implicitWidth: isVertical ? Math.round(Style.capsuleHeight * scaling) : (trayFlow.implicitWidth + Style.marginS * scaling * 2)
   implicitHeight: isVertical ? (trayFlow.implicitHeight + Style.marginS * scaling * 2) : Math.round(Style.capsuleHeight * scaling)
   radius: Math.round(Style.radiusM * scaling)
-  color: compact ? Color.transparent : Color.mSurfaceVariant
+  color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
   Layout.alignment: Qt.AlignVCenter
 

Modules/Bar/Widgets/Workspace.qml

@@ -61,12 +61,11 @@ Item {
   implicitWidth: isVertical ? Math.round(Style.barHeight * scaling) : computeWidth()
   implicitHeight: isVertical ? computeHeight() : Math.round(Style.barHeight * scaling)
 
-
   function getWorkspaceWidth(ws) {
     const d = Style.capsuleHeight * root.baseDimensionRatio
     if (ws.isFocused)
       return d * 2.5
-    else 
+    else
       return d
   }
 
@@ -74,7 +73,7 @@ Item {
     const d = Style.capsuleHeight * root.baseDimensionRatio
     if (ws.isFocused)
       return d * 3
-    else 
+    else
       return d
   }
 
@@ -184,7 +183,7 @@ Item {
     width: isVertical ? Math.round(Style.capsuleHeight * scaling) : parent.width
     height: isVertical ? parent.height : Math.round(Style.capsuleHeight * scaling)
     radius: Math.round(Style.radiusM * scaling)
-    color: compact ? Color.transparent : Color.mSurfaceVariant
+    color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.verticalCenter: parent.verticalCenter
@@ -205,7 +204,7 @@ Item {
         id: workspacePillContainer
         width: root.getWorkspaceWidth(model)
         height: Style.capsuleHeight * root.baseDimensionRatio
-        
+
         Rectangle {
           id: pill
           anchors.fill: parent

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -112,6 +112,15 @@ ColumnLayout {
       text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%"
     }
   }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: "Show Capsule"
+    description: "Adds a capsule behind each widget to improve readability on transparent bars."
+    checked: Settings.data.bar.showCapsule
+    onToggled: checked => Settings.data.bar.showCapsule = checked
+  }
+
   NToggle {
     Layout.fillWidth: true
     label: "Floating Bar"