Feature: Add topbar widget transparency appearance settings

Common/Prefs.qml

@@ -14,6 +14,7 @@ Singleton {
     property bool themeIsDynamic: false
     property bool isLightMode: false
     property real topBarTransparency: 0.75
+    property real topBarWidgetTransparency: 0.85
     property real popupTransparency: 0.92
     property var appUsageRanking: {}
     property bool use24HourClock: true
@@ -58,6 +59,7 @@ Singleton {
                 themeIsDynamic = settings.themeIsDynamic !== undefined ? settings.themeIsDynamic : false;
                 isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false;
                 topBarTransparency = settings.topBarTransparency !== undefined ? (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100 : settings.topBarTransparency) : 0.75;
+                topBarWidgetTransparency = settings.topBarWidgetTransparency !== undefined ? (settings.topBarWidgetTransparency > 1 ? settings.topBarWidgetTransparency / 100 : settings.topBarWidgetTransparency) : 0.85;
                 popupTransparency = settings.popupTransparency !== undefined ? (settings.popupTransparency > 1 ? settings.popupTransparency / 100 : settings.popupTransparency) : 0.92;
                 appUsageRanking = settings.appUsageRanking || {};
                 use24HourClock = settings.use24HourClock !== undefined ? settings.use24HourClock : true;
@@ -105,6 +107,7 @@ Singleton {
             "themeIsDynamic": themeIsDynamic,
             "isLightMode": isLightMode,
             "topBarTransparency": topBarTransparency,
+            "topBarWidgetTransparency": topBarWidgetTransparency,
             "popupTransparency": popupTransparency,
             "appUsageRanking": appUsageRanking,
             "use24HourClock": use24HourClock,
@@ -177,6 +180,11 @@ Singleton {
         saveSettings();
     }
 
+    function setTopBarWidgetTransparency(transparency) {
+        topBarWidgetTransparency = transparency;
+        saveSettings();
+    }
+
     function setPopupTransparency(transparency) {
         popupTransparency = transparency;
         saveSettings();

Common/Theme.qml

@@ -431,6 +431,7 @@ Singleton {
     property real opacityFull: 1
     // Transparency system - can be overridden by Prefs
     property real panelTransparency: 0.85
+    property real widgetTransparency: 0.85
     property real popupTransparency: 0.92
 
     // Handle successful color extraction
@@ -518,6 +519,10 @@ Singleton {
         return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, panelTransparency);
     }
 
+    function widgetBackground() {
+        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency);
+    }
+
     function getBatteryIcon(level, isCharging, batteryAvailable) {
         if (!batteryAvailable)
             return _getBatteryPowerProfileIcon();
@@ -634,6 +639,9 @@ Singleton {
             if (Prefs.popupTransparency !== undefined)
                 root.popupTransparency = Prefs.popupTransparency;
             
+            if (Prefs.topBarWidgetTransparency !== undefined)
+                root.widgetTransparency = Prefs.topBarWidgetTransparency;
+
             // Connect to transparency changes
             if (Prefs.popupTransparencyChanged)
                 Prefs.popupTransparencyChanged.connect(function() {
@@ -642,6 +650,13 @@ Singleton {
 
                 });
             
+            if (Prefs.topBarWidgetTransparencyChanged)
+                Prefs.topBarWidgetTransparencyChanged.connect(function() {
+                    if (typeof Prefs !== "undefined" && Prefs.topBarWidgetTransparency !== undefined)
+                        root.widgetTransparency = Prefs.topBarWidgetTransparency;
+
+                });
+
         }
         console.log("Theme initialized, waiting for Prefs to load settings and apply theme");
     }

Modules/Settings/AppearanceTab.qml

@@ -160,6 +160,32 @@ ScrollView {
 
                 }
 
+                Column {
+                    width: parent.width
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        text: "Top Bar Widget Transparency"
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.surfaceText
+                        font.weight: Font.Medium
+                    }
+
+                    DankSlider {
+                        width: parent.width
+                        height: 24
+                        value: Math.round(Prefs.topBarWidgetTransparency * 100)
+                        minimum: 0
+                        maximum: 100
+                        unit: ""
+                        showValue: true
+                        onSliderValueChanged: (newValue) => {
+                            Prefs.setTopBarWidgetTransparency(newValue / 100);
+                        }
+                    }
+
+                }
+
                 Column {
                     width: parent.width
                     spacing: Theme.spacingS

Modules/TopBar/Battery.qml

@@ -14,7 +14,10 @@ Rectangle {
     width: BatteryService.batteryAvailable ? 70 : 40
     height: 30
     radius: Theme.cornerRadius
-    color: batteryArea.containsMouse || batteryPopupVisible ? Theme.primaryPressed : Theme.secondaryHover
+    color: {
+        const baseColor = batteryArea.containsMouse || batteryPopupVisible ? Theme.primaryPressed : Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
     visible: true
 
     Row {

Modules/TopBar/Clock.qml

@@ -13,7 +13,11 @@ Rectangle {
     width: clockRow.implicitWidth + Theme.spacingS * 2
     height: 30
     radius: Theme.cornerRadius
-    color: clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+    color: {
+        const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
     Component.onCompleted: {
         root.currentDate = systemClock.date;
     }

Modules/TopBar/ControlCenterButton.qml

@@ -29,7 +29,10 @@ Rectangle {
     width: Math.max(80, controlIndicators.implicitWidth + Theme.spacingS * 2)
     height: 30
     radius: Theme.cornerRadius
-    color: controlCenterArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover
+    color: {
+        const baseColor = controlCenterArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
 
     Row {
         id: controlIndicators

Modules/TopBar/CpuMonitor.qml

@@ -15,7 +15,11 @@ Rectangle {
     width: 55
     height: 30
     radius: Theme.cornerRadius
-    color: cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
+    color: {
+        const baseColor = cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
     Component.onCompleted: {
         SysMonitorService.addRef();
     }

Modules/TopBar/FocusedApp.qml

@@ -14,7 +14,10 @@ Rectangle {
     width: compactMode ? Math.min(baseWidth, maxCompactWidth) : Math.min(baseWidth, maxNormalWidth)
     height: 30
     radius: Theme.cornerRadius
-    color: mouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+    color: {
+        const baseColor = mouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
     clip: true
     visible: FocusedWindowService.niriAvailable && (FocusedWindowService.focusedAppName || FocusedWindowService.focusedWindowTitle)
 

Modules/TopBar/LauncherButton.qml

@@ -13,7 +13,10 @@ Rectangle {
     width: 40
     height: 30
     radius: Theme.cornerRadius
-    color: launcherArea.containsMouse || isActive ? Theme.surfaceTextPressed : Theme.surfaceTextHover
+    color: {
+        const baseColor = launcherArea.containsMouse || isActive ? Theme.surfaceTextPressed : Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
 
     SystemLogo {
         visible: Prefs.useOSLogo

Modules/TopBar/Media.qml

@@ -18,7 +18,11 @@ Rectangle {
 
     height: 30
     radius: Theme.cornerRadius
-    color: Theme.surfaceTextHover
+    color: {
+        const baseColor = Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
     states: [
         State {
             name: "shown"

Modules/TopBar/NotificationCenterButton.qml

@@ -13,7 +13,10 @@ Rectangle {
     width: 40
     height: 30
     radius: Theme.cornerRadius
-    color: notificationArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover
+    color: {
+        const baseColor = notificationArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
 
     DankIcon {
         anchors.centerIn: parent

Modules/TopBar/RamMonitor.qml

@@ -15,7 +15,11 @@ Rectangle {
     width: 55
     height: 30
     radius: Theme.cornerRadius
-    color: ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover
+    color: {
+        const baseColor = ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
+
     Component.onCompleted: {
         SysMonitorService.addRef();
     }

Modules/TopBar/SystemTrayBar.qml

@@ -10,7 +10,10 @@ Rectangle {
     width: Math.max(40, systemTrayRow.implicitWidth + Theme.spacingS * 2)
     height: 30
     radius: Theme.cornerRadius
-    color: Theme.secondaryHover
+    color: {
+        const baseColor = Theme.secondaryHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
     visible: systemTrayRow.children.length > 0
 
     Row {

Modules/TopBar/TopBar.qml

@@ -236,7 +236,10 @@ PanelWindow {
                     width: 40
                     height: 30
                     radius: Theme.cornerRadius
-                    color: clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
+                    color: {
+                        const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover;
+                        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+                    }
                     anchors.verticalCenter: parent.verticalCenter
                     visible: Prefs.showClipboard
 

Modules/TopBar/Weather.qml

@@ -12,7 +12,10 @@ Rectangle {
     width: visible ? Math.min(100, weatherRow.implicitWidth + Theme.spacingS * 2) : 0
     height: 30
     radius: Theme.cornerRadius
-    color: weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+    color: {
+        const baseColor = weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
 
     Ref {
         service: WeatherService

Modules/TopBar/WorkspaceSwitcher.qml

@@ -56,7 +56,10 @@ Rectangle {
     width: Prefs.showWorkspacePadding ? Math.max(120, workspaceRow.implicitWidth + Theme.spacingL * 2) : workspaceRow.implicitWidth + Theme.spacingL * 2
     height: 30
     radius: Theme.cornerRadiusLarge
-    color: Theme.surfaceTextHover
+    color: {
+        const baseColor = Theme.surfaceTextHover;
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
+    }
     visible: NiriService.niriAvailable
 
     Connections {