Multiple widget color opts

Common/SettingsData.qml

@@ -119,6 +119,7 @@ Singleton {
     property bool topBarGothCornersEnabled: false
     property bool lockScreenShowPowerActions: true
     property bool hideBrightnessSlider: false
+    property string widgetBackgroundColor: "sth"
     property int notificationTimeoutLow: 5000
     property int notificationTimeoutNormal: 5000
     property int notificationTimeoutCritical: 0
@@ -299,6 +300,7 @@ Singleton {
                 topBarGothCornersEnabled = settings.topBarGothCornersEnabled !== undefined ? settings.topBarGothCornersEnabled : false
                 lockScreenShowPowerActions = settings.lockScreenShowPowerActions !== undefined ? settings.lockScreenShowPowerActions : true
                 hideBrightnessSlider = settings.hideBrightnessSlider !== undefined ? settings.hideBrightnessSlider : false
+                widgetBackgroundColor = settings.widgetBackgroundColor !== undefined ? settings.widgetBackgroundColor : "sth"
                 screenPreferences = settings.screenPreferences !== undefined ? settings.screenPreferences : ({})
                 applyStoredTheme()
                 detectAvailableIconThemes()
@@ -405,6 +407,7 @@ Singleton {
                                                 "topBarGothCornersEnabled": topBarGothCornersEnabled,
                                                 "lockScreenShowPowerActions": lockScreenShowPowerActions,
                                                 "hideBrightnessSlider": hideBrightnessSlider,
+                                                "widgetBackgroundColor": widgetBackgroundColor,
                                                 "notificationTimeoutLow": notificationTimeoutLow,
                                                 "notificationTimeoutNormal": notificationTimeoutNormal,
                                                 "notificationTimeoutCritical": notificationTimeoutCritical,
@@ -998,6 +1001,11 @@ Singleton {
         saveSettings()
     }
 
+    function setWidgetBackgroundColor(color) {
+        widgetBackgroundColor = color
+        saveSettings()
+    }
+
     function setScreenPreferences(prefs) {
         screenPreferences = prefs
         saveSettings()

Common/Theme.qml

@@ -337,8 +337,40 @@ Singleton {
 
     property real notepadTransparency: SettingsData.notepadTransparencyOverride >= 0 ? SettingsData.notepadTransparencyOverride : popupTransparency
 
-    function widgetBackground() {
+    property var widgetBaseBackgroundColor: {
-        return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
+        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sth"
+        switch (colorMode) {
+            case "s":
+                return surface
+            case "sc":
+                return surfaceContainer
+            case "sch":
+                return surfaceContainerHigh
+            case "sth":
+            default:
+                return surfaceTextHover
+        }
+    }
+
+    property var widgetBaseHoverColor: {
+        const baseColor = widgetBaseBackgroundColor
+        const factor = 1.2
+        return isLightMode ? Qt.darker(baseColor, factor) : Qt.lighter(baseColor, factor)
+    }
+
+    property var widgetBackground: {
+        const colorMode = typeof SettingsData !== "undefined" ? SettingsData.widgetBackgroundColor : "sth"
+        switch (colorMode) {
+            case "s":
+                return Qt.rgba(surface.r, surface.g, surface.b, widgetTransparency)
+            case "sc":
+                return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
+            case "sch":
+                return Qt.rgba(surfaceContainerHigh.r, surfaceContainerHigh.g, surfaceContainerHigh.b, widgetTransparency)
+            case "sth":
+            default:
+                return Qt.rgba(surfaceContainer.r, surfaceContainer.g, surfaceContainer.b, widgetTransparency)
+        }
     }
 
     function getPopupBackgroundAlpha() {

Modules/Lock/Keyboard.qml

@@ -8,7 +8,7 @@ Rectangle {
     anchors.bottom: parent.bottom
     anchors.left: parent.left
     anchors.right: parent.right
-    color: Theme.widgetBackground()
+    color: Theme.widgetBackground
 
     property double rowSpacing: 0.01 * width  // horizontal spacing between keyboard
     property double columnSpacing: 0.02 * height // vertical   spacing between keyboard

Modules/Settings/ThemeColorsTab.qml

@@ -727,11 +727,51 @@ Item {
                         width: parent.width
                         spacing: Theme.spacingS
 
-                        StyledText {
+                        Item {
-                            text: "Top Bar Widget Transparency"
+                            width: parent.width
-                            font.pixelSize: Theme.fontSizeSmall
+                            height: Math.max(transparencyLabel.height, widgetColorGroup.height)
-                            color: Theme.surfaceText
+
-                            font.weight: Font.Medium
+                            StyledText {
+                                id: transparencyLabel
+                                text: "Top Bar Widget Transparency"
+                                font.pixelSize: Theme.fontSizeSmall
+                                color: Theme.surfaceText
+                                font.weight: Font.Medium
+                                anchors.left: parent.left
+                                anchors.verticalCenter: parent.verticalCenter
+                            }
+
+                            DankButtonGroup {
+                                id: widgetColorGroup
+                                property int currentColorIndex: {
+                                    switch (SettingsData.widgetBackgroundColor) {
+                                        case "sth": return 0
+                                        case "s": return 1
+                                        case "sc": return 2
+                                        case "sch": return 3
+                                        default: return 0
+                                    }
+                                }
+
+                                model: ["sth", "s", "sc", "sch"]
+                                currentIndex: currentColorIndex
+                                selectionMode: "single"
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+
+                                buttonHeight: 20
+                                minButtonWidth: 32
+                                buttonPadding: Theme.spacingS
+                                checkIconSize: Theme.iconSizeSmall - 2
+                                textSize: Theme.fontSizeSmall - 2
+                                spacing: 1
+
+                                onSelectionChanged: (index, selected) => {
+                                    if (!selected) return
+                                    const colorOptions = ["sth", "s", "sc", "sch"]
+                                    SettingsData.setWidgetBackgroundColor(colorOptions[index])
+                                }
+                            }
                         }
 
                         DankSlider {

Modules/TopBar/Battery.qml

@@ -21,10 +21,11 @@ Rectangle {
     height: widgetHeight
     radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
     color: {
-        if (SettingsData.topBarNoBackground)
+        if (SettingsData.topBarNoBackground) {
             return "transparent";
+        }
 
-        const baseColor = batteryArea.containsMouse || batteryPopupVisible ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = batteryArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     visible: true
@@ -191,7 +192,7 @@ Rectangle {
         width: Math.max(120, tooltipText.contentWidth + Theme.spacingM * 2)
         height: tooltipText.contentHeight + Theme.spacingS * 2
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.widgetBaseBackgroundColor
         border.color: Theme.surfaceVariantAlpha
         border.width: 1
         visible: batteryArea.containsMouse && !batteryPopupVisible
@@ -248,12 +249,5 @@ Rectangle {
 
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/Clock.qml

@@ -21,11 +21,11 @@ Rectangle {
     radius: SettingsData.topBarNoBackground ? 0 : Theme.cornerRadius
     color: {
         if (SettingsData.topBarNoBackground) {
-            return "transparent"
+            return "transparent";
         }
 
-        const baseColor = clockMouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover
+        const baseColor = clockMouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
     Row {
@@ -90,10 +90,4 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
 }

Modules/TopBar/ColorPicker.qml

@@ -23,7 +23,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = colorPickerArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = colorPickerArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -51,10 +51,4 @@ Rectangle {
     // Signal to notify TopBar to open color picker
     signal colorPickerRequested()
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
 }

Modules/TopBar/ControlCenterButton.qml

@@ -28,7 +28,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = controlCenterArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = controlCenterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -173,12 +173,5 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/CpuMonitor.qml

@@ -25,7 +25,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = cpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = cpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     Component.onCompleted: {

Modules/TopBar/CpuTemperature.qml

@@ -25,7 +25,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = cpuTempArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = cpuTempArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     Component.onCompleted: {
@@ -114,12 +114,5 @@ Rectangle {
 
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/FocusedApp.qml

@@ -29,7 +29,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = mouseArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     clip: true
@@ -110,13 +110,6 @@ Rectangle {
         hoverEnabled: true
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
     Behavior on width {
         NumberAnimation {

Modules/TopBar/GpuTemperature.qml

@@ -73,7 +73,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = gpuArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = gpuArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     Component.onCompleted: {
@@ -205,12 +205,5 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/IdleInhibitor.qml

@@ -22,7 +22,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : (SessionService.idleInhibited ? Theme.primaryHover : Theme.secondaryHover);
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -46,12 +46,5 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/KeyboardLayoutName.qml

@@ -22,7 +22,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = mouseArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = mouseArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -62,13 +62,6 @@ Rectangle {
 
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
     Process {
         id: hyprlandLayoutProcess

Modules/TopBar/LauncherButton.qml

@@ -48,7 +48,7 @@ Item {
                 return "transparent";
             }
 
-            const baseColor = launcherArea.containsMouse ? Theme.primaryPressed : (SessionService.idleInhibited ? Theme.primaryHover : Theme.secondaryHover);
+            const baseColor = launcherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
             return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
         }
 
@@ -69,15 +69,5 @@ Item {
             size: Theme.iconSize - 6
             color: Theme.surfaceText
         }
-
-        Behavior on color {
-            ColorAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-
-        }
-
     }
-
 }

Modules/TopBar/Media.qml

@@ -45,7 +45,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = Theme.surfaceTextHover;
+        const baseColor = Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     states: [
@@ -324,13 +324,6 @@ Rectangle {
 
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
     Behavior on width {
         NumberAnimation {

Modules/TopBar/NetworkMonitor.qml

@@ -33,7 +33,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = networkArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = networkArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     Component.onCompleted: {
@@ -142,12 +142,5 @@ Rectangle {
 
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/NotepadButton.qml

@@ -24,7 +24,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = notepadArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = notepadArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -61,12 +61,5 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/NotificationCenterButton.qml

@@ -24,7 +24,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = notificationArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = notificationArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -67,12 +67,5 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
 }

Modules/TopBar/RamMonitor.qml

@@ -25,7 +25,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = ramArea.containsMouse ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = ramArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     Component.onCompleted: {

Modules/TopBar/RunningApps.qml

@@ -46,13 +46,13 @@ Rectangle {
         if (windowCount === 0) {
             return "transparent";
         }
-        
+
         if (SettingsData.topBarNoBackground) {
             return "transparent";
         }
-        const baseColor = Theme.secondaryHover;
+
-        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b,
+        const baseColor = Theme.widgetBaseBackgroundColor;
-                       baseColor.a * Theme.widgetTransparency);
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
     MouseArea {
@@ -197,12 +197,6 @@ Rectangle {
                         }
                     }
 
-                    Behavior on color {
-                        ColorAnimation {
-                            duration: Theme.shortDuration
-                            easing.type: Theme.standardEasing
-                        }
-                    }
                 }
 
                 // App icon

Modules/TopBar/RunningAppsTooltip.qml

@@ -44,7 +44,7 @@ PanelWindow {
 
     Rectangle {
         anchors.fill: parent
-        color: Theme.surfaceContainer
+        color: Theme.widgetBaseBackgroundColor
         radius: Theme.cornerRadius
         border.width: 1
         border.color: Theme.outlineMedium

Modules/TopBar/SystemTrayBar.qml

@@ -25,7 +25,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = Theme.secondaryHover;
+        const baseColor = Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
     visible: SystemTray.items.values.length > 0
@@ -68,15 +68,6 @@ Rectangle {
                     radius: Theme.cornerRadius
                     color: trayItemArea.containsMouse ? Theme.primaryHover : "transparent"
 
-                    Behavior on color {
-                        enabled: trayItemArea.containsMouse !== undefined
-
-                        ColorAnimation {
-                            duration: Theme.shortDuration
-                            easing.type: Theme.standardEasing
-                        }
-
-                    }
 
                 }
 

Modules/TopBar/SystemUpdate.qml

@@ -26,7 +26,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = updaterArea.containsMouse || root.isActive ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = updaterArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -101,10 +101,4 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-    }
 }

Modules/TopBar/TopBar.qml

@@ -670,7 +670,7 @@ PanelWindow {
                                     if (SettingsData.topBarNoBackground) {
                                         return "transparent"
                                     }
-                                    const baseColor = clipboardArea.containsMouse ? Theme.primaryHover : Theme.secondaryHover
+                                    const baseColor = clipboardArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
                                     return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
                                 }
 
@@ -693,12 +693,6 @@ PanelWindow {
                                     }
                                 }
 
-                                Behavior on color {
-                                    ColorAnimation {
-                                        duration: Theme.shortDuration
-                                        easing.type: Theme.standardEasing
-                                    }
-                                }
                             }
                         }
 

Modules/TopBar/Vpn.qml

@@ -25,8 +25,8 @@ Rectangle {
             return "transparent";
         }
 
-        const base = clickArea.containsMouse || (popupTarget && popupTarget.shouldBeVisible) ? Theme.primaryPressed : Theme.secondaryHover;
+        const baseColor = clickArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-        return Qt.rgba(base.r, base.g, base.b, base.a * Theme.widgetTransparency);
+        return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
     DankIcon {
@@ -71,7 +71,7 @@ Rectangle {
         width: Math.max(120, tooltipText.contentWidth + Theme.spacingM * 2)
         height: tooltipText.contentHeight + Theme.spacingS * 2
         radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
+        color: Theme.widgetBaseBackgroundColor
         border.color: Theme.surfaceVariantAlpha
         border.width: 1
         visible: clickArea.containsMouse && !(popupTarget && popupTarget.shouldBeVisible)

Modules/TopBar/Weather.qml

@@ -24,7 +24,7 @@ Rectangle {
             return "transparent";
         }
 
-        const baseColor = weatherArea.containsMouse ? Theme.primaryHover : Theme.surfaceTextHover;
+        const baseColor = weatherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
     }
 
@@ -79,13 +79,6 @@ Rectangle {
         }
     }
 
-    Behavior on color {
-        ColorAnimation {
-            duration: Theme.shortDuration
-            easing.type: Theme.standardEasing
-        }
-
-    }
 
     Behavior on width {
         NumberAnimation {

Modules/TopBar/WorkspaceSwitcher.qml

@@ -227,7 +227,7 @@ Rectangle {
     color: {
         if (SettingsData.topBarNoBackground)
             return "transparent"
-        const baseColor = Theme.surfaceTextHover
+        const baseColor = Theme.widgetBaseBackgroundColor
         return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
     }
     visible: CompositorService.isNiri || CompositorService.isHyprland
@@ -444,14 +444,6 @@ Rectangle {
                     }
                 }
 
-                Behavior on color {
-		    // When having more icons, animation becomes clunky
-		    enabled: (!SettingsData.showWorkspaceApps || SettingsData.maxWorkspaceIcons <= 3)
-                    ColorAnimation {
-                        duration: Theme.mediumDuration
-                        easing.type: Theme.emphasizedEasing
-                    }
-                }
             }
         }
     }

Widgets/DankButtonGroup.qml

@@ -10,6 +10,11 @@ Row {
     property string selectionMode: "single"
     property bool multiSelect: selectionMode === "multi"
     property bool checkEnabled: true
+    property int buttonHeight: 40
+    property int minButtonWidth: 64
+    property int buttonPadding: Theme.spacingL
+    property int checkIconSize: Theme.iconSizeSmall
+    property int textSize: Theme.fontSizeMedium
 
     signal selectionChanged(int index, bool selected)
 
@@ -54,8 +59,8 @@ Row {
             property bool prevSelected: index > 0 ? root.isSelected(index - 1) : false
             property bool nextSelected: index < repeater.count - 1 ? root.isSelected(index + 1) : false
 
-            width: Math.max(contentItem.implicitWidth + Theme.spacingL * 2, 64) + (selected ? 4 : 0)
+            width: Math.max(contentItem.implicitWidth + root.buttonPadding * 2, root.minButtonWidth) + (selected ? 4 : 0)
-            height: 40
+            height: root.buttonHeight
 
             color: selected ? Theme.primaryContainer : Theme.primary
             border.color: "transparent"
@@ -142,11 +147,12 @@ Row {
                     DankIcon {
                         id: checkIcon
                         name: "check"
-                        size: Theme.iconSizeSmall
+                        size: root.checkIconSize
                         color: segment.selected ? Theme.surfaceText : Theme.primaryText
                         visible: root.checkEnabled && segment.selected
                         opacity: segment.selected ? 1 : 0
                         scale: segment.selected ? 1 : 0.6
+                        anchors.verticalCenter: parent.verticalCenter
 
                         Behavior on opacity {
                             NumberAnimation {
@@ -166,10 +172,10 @@ Row {
                     StyledText {
                         id: buttonText
                         text: typeof modelData === "string" ? modelData : modelData.text || ""
-                        font.pixelSize: Theme.fontSizeMedium
+                        font.pixelSize: root.textSize
                         font.weight: segment.selected ? Font.Medium : Font.Normal
                         color: segment.selected ? Theme.surfaceText : Theme.primaryText
-                        verticalAlignment: Text.AlignVCenter
+                        anchors.verticalCenter: parent.verticalCenter
                     }
                 }
             }