theme: allow overriding color center theme

distro/fedora/dms-git.spec

@@ -109,8 +109,6 @@ rm -f %{buildroot}%{_datadir}/quickshell/dms/.gitignore
 rm -rf %{buildroot}%{_datadir}/quickshell/dms/.github
 rm -rf %{buildroot}%{_datadir}/quickshell/dms/distro
 
-echo "%{version}" > %{buildroot}%{_datadir}/quickshell/dms/VERSION
-
 %posttrans
 # Signal running DMS instances to reload
 pkill -USR1 -x dms >/dev/null 2>&1 || :

distro/opensuse/dms-git.spec

@@ -100,8 +100,6 @@ rm -rf %{buildroot}%{_datadir}/quickshell/dms/.github
 rm -rf %{buildroot}%{_datadir}/quickshell/dms/distro
 rm -rf %{buildroot}%{_datadir}/quickshell/dms/core
 
-echo "%{version}" > %{buildroot}%{_datadir}/quickshell/dms/VERSION
-
 %posttrans
 if [ -d "%{_sysconfdir}/xdg/quickshell/dms" ]; then
     rmdir "%{_sysconfdir}/xdg/quickshell/dms" 2>/dev/null || true

quickshell/Common/SettingsData.qml

@@ -133,6 +133,7 @@ Singleton {
     property real dockTransparency: 1
     property string widgetBackgroundColor: "sch"
     property string widgetColorMode: "default"
+    property string controlCenterTileColorMode: "primary"
     property real cornerRadius: 12
     property int niriLayoutGapsOverride: -1
     property int niriLayoutRadiusOverride: -1

quickshell/Common/Theme.qml

@@ -271,10 +271,7 @@ Singleton {
 
         function onLatitudeChanged() {
             if (root.themeModeAutomationActive && SessionData.themeModeAutoMode === "location") {
-                if (!SessionData.nightModeUseIPLocation &&
+                if (!SessionData.nightModeUseIPLocation && SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0 && typeof DMSService !== "undefined") {
-                    SessionData.latitude !== 0.0 &&
-                    SessionData.longitude !== 0.0 &&
-                    typeof DMSService !== "undefined") {
                     DMSService.sendRequest("wayland.gamma.setLocation", {
                         "latitude": SessionData.latitude,
                         "longitude": SessionData.longitude
@@ -287,10 +284,7 @@ Singleton {
 
         function onLongitudeChanged() {
             if (root.themeModeAutomationActive && SessionData.themeModeAutoMode === "location") {
-                if (!SessionData.nightModeUseIPLocation &&
+                if (!SessionData.nightModeUseIPLocation && SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0 && typeof DMSService !== "undefined") {
-                    SessionData.latitude !== 0.0 &&
-                    SessionData.longitude !== 0.0 &&
-                    typeof DMSService !== "undefined") {
                     DMSService.sendRequest("wayland.gamma.setLocation", {
                         "latitude": SessionData.latitude,
                         "longitude": SessionData.longitude
@@ -307,8 +301,7 @@ Singleton {
                     DMSService.sendRequest("wayland.gamma.setUseIPLocation", {
                         "use": SessionData.nightModeUseIPLocation
                     }, response => {
-                        if (!response.error && !SessionData.nightModeUseIPLocation &&
+                        if (!response.error && !SessionData.nightModeUseIPLocation && SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0) {
-                            SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0) {
                             DMSService.sendRequest("wayland.gamma.setLocation", {
                                 "latitude": SessionData.latitude,
                                 "longitude": SessionData.longitude
@@ -325,11 +318,7 @@ Singleton {
     // React to gamma backend's isDay state changes for location-based mode
     Connections {
         target: DisplayService
-        enabled: typeof DisplayService !== "undefined" &&
+        enabled: typeof DisplayService !== "undefined" && typeof SessionData !== "undefined" && SessionData.themeModeAutoEnabled && SessionData.themeModeAutoMode === "location" && !themeAutoBackendAvailable()
-                 typeof SessionData !== "undefined" &&
-                 SessionData.themeModeAutoEnabled &&
-                 SessionData.themeModeAutoMode === "location" &&
-                 !themeAutoBackendAvailable()
 
         function onGammaIsDayChanged() {
             if (root.isLightMode !== DisplayService.gammaIsDay) {
@@ -343,7 +332,8 @@ Singleton {
         enabled: typeof DMSService !== "undefined" && typeof SessionData !== "undefined"
 
         function onLoginctlEvent(event) {
-            if (!SessionData.themeModeAutoEnabled) return;
+            if (!SessionData.themeModeAutoEnabled)
+                return;
             if (event.event === "unlock" || event.event === "resume") {
                 if (!themeAutoBackendAvailable()) {
                     root.evaluateThemeMode();
@@ -564,6 +554,58 @@ Singleton {
     property color errorHover: Qt.rgba(error.r, error.g, error.b, 0.12)
     property color errorPressed: Qt.rgba(error.r, error.g, error.b, 0.16)
 
+    readonly property color ccTileActiveBg: {
+        switch (SettingsData.controlCenterTileColorMode) {
+        case "primaryContainer":
+            return primaryContainer;
+        case "secondary":
+            return secondary;
+        case "surfaceVariant":
+            return surfaceVariant;
+        default:
+            return primary;
+        }
+    }
+
+    readonly property color ccTileActiveText: {
+        switch (SettingsData.controlCenterTileColorMode) {
+        case "primaryContainer":
+            return primary;
+        case "secondary":
+            return surfaceText;
+        case "surfaceVariant":
+            return surfaceText;
+        default:
+            return primaryText;
+        }
+    }
+
+    readonly property color ccTileInactiveIcon: {
+        switch (SettingsData.controlCenterTileColorMode) {
+        case "primaryContainer":
+            return primary;
+        case "secondary":
+            return secondary;
+        case "surfaceVariant":
+            return surfaceText;
+        default:
+            return primary;
+        }
+    }
+
+    readonly property color ccTileRing: {
+        switch (SettingsData.controlCenterTileColorMode) {
+        case "primaryContainer":
+            return Qt.rgba(primary.r, primary.g, primary.b, 0.22);
+        case "secondary":
+            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.22);
+        case "surfaceVariant":
+            return Qt.rgba(surfaceText.r, surfaceText.g, surfaceText.b, 0.22);
+        default:
+            return Qt.rgba(primaryText.r, primaryText.g, primaryText.b, 0.22);
+        }
+    }
+
     property color shadowMedium: Qt.rgba(0, 0, 0, 0.08)
     property color shadowStrong: Qt.rgba(0, 0, 0, 0.3)
 
@@ -790,7 +832,6 @@ Singleton {
             }
             generateSystemThemesFromCurrentTheme();
         }
-
     }
 
     function toggleLightMode(savePrefs = true) {
@@ -1187,7 +1228,7 @@ Singleton {
                     skipTemplates.push("kcolorscheme");
                 if (!SettingsData.matugenTemplateVscode)
                     skipTemplates.push("vscode");
-		if (!SettingsData.matugenTemplateEmacs)
+                if (!SettingsData.matugenTemplateEmacs)
                     skipTemplates.push("emacs");
             }
             if (skipTemplates.length > 0) {
@@ -1695,10 +1736,7 @@ Singleton {
 
     // Theme mode automation functions
     function themeAutoBackendAvailable() {
-        return typeof DMSService !== "undefined" &&
+        return typeof DMSService !== "undefined" && DMSService.isConnected && Array.isArray(DMSService.capabilities) && DMSService.capabilities.includes("theme.auto");
-               DMSService.isConnected &&
-               Array.isArray(DMSService.capabilities) &&
-               DMSService.capabilities.includes("theme.auto");
     }
 
     function applyThemeAutoState(state) {
@@ -1731,7 +1769,9 @@ Singleton {
             return;
         }
 
-        DMSService.sendRequest("theme.auto.setMode", {"mode": "time"});
+        DMSService.sendRequest("theme.auto.setMode", {
+            "mode": "time"
+        });
 
         const shareSettings = SessionData.themeModeShareGammaSettings;
         const startHour = shareSettings ? SessionData.nightModeStartHour : SessionData.themeModeStartHour;
@@ -1750,7 +1790,9 @@ Singleton {
             }
         });
 
-        DMSService.sendRequest("theme.auto.setEnabled", {"enabled": true});
+        DMSService.sendRequest("theme.auto.setEnabled", {
+            "enabled": true
+        });
         DMSService.sendRequest("theme.auto.trigger", {});
     }
 
@@ -1769,12 +1811,18 @@ Singleton {
             return;
         }
 
-        DMSService.sendRequest("theme.auto.setMode", {"mode": "location"});
+        DMSService.sendRequest("theme.auto.setMode", {
+            "mode": "location"
+        });
 
         if (SessionData.nightModeUseIPLocation) {
-            DMSService.sendRequest("theme.auto.setUseIPLocation", {"use": true});
+            DMSService.sendRequest("theme.auto.setUseIPLocation", {
+                "use": true
+            });
         } else {
-            DMSService.sendRequest("theme.auto.setUseIPLocation", {"use": false});
+            DMSService.sendRequest("theme.auto.setUseIPLocation", {
+                "use": false
+            });
             if (SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0) {
                 DMSService.sendRequest("theme.auto.setLocation", {
                     "latitude": SessionData.latitude,
@@ -1783,7 +1831,9 @@ Singleton {
             }
         }
 
-        DMSService.sendRequest("theme.auto.setEnabled", {"enabled": true});
+        DMSService.sendRequest("theme.auto.setEnabled", {
+            "enabled": true
+        });
         DMSService.sendRequest("theme.auto.trigger", {});
     }
 
@@ -1819,13 +1869,8 @@ Singleton {
             return;
         }
 
-        if (!SessionData.nightModeUseIPLocation &&
+        if (!SessionData.nightModeUseIPLocation && SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0) {
-            SessionData.latitude !== 0.0 &&
+            const shouldBeLight = calculateIsDaytime(SessionData.latitude, SessionData.longitude);
-            SessionData.longitude !== 0.0) {
-            const shouldBeLight = calculateIsDaytime(
-                SessionData.latitude,
-                SessionData.longitude
-            );
             if (root.isLightMode !== shouldBeLight) {
                 root.setLightMode(shouldBeLight, true, true);
             }
@@ -1844,14 +1889,10 @@ Singleton {
     function evaluateTimeBasedThemeMode() {
         const shareSettings = SessionData.themeModeShareGammaSettings;
 
-        const startHour = shareSettings ?
+        const startHour = shareSettings ? SessionData.nightModeStartHour : SessionData.themeModeStartHour;
-            SessionData.nightModeStartHour : SessionData.themeModeStartHour;
+        const startMinute = shareSettings ? SessionData.nightModeStartMinute : SessionData.themeModeStartMinute;
-        const startMinute = shareSettings ?
+        const endHour = shareSettings ? SessionData.nightModeEndHour : SessionData.themeModeEndHour;
-            SessionData.nightModeStartMinute : SessionData.themeModeStartMinute;
+        const endMinute = shareSettings ? SessionData.nightModeEndMinute : SessionData.themeModeEndMinute;
-        const endHour = shareSettings ?
-            SessionData.nightModeEndHour : SessionData.themeModeEndHour;
-        const endMinute = shareSettings ?
-            SessionData.nightModeEndMinute : SessionData.themeModeEndMinute;
 
         const now = new Date();
         const currentMinutes = now.getHours() * 60 + now.getMinutes();
@@ -1877,7 +1918,7 @@ Singleton {
         const dayOfYear = Math.floor(diff / 86400000);
         const latRad = lat * Math.PI / 180;
 
-        const declination = 23.45 * Math.sin((360/365) * (dayOfYear - 81) * Math.PI / 180);
+        const declination = 23.45 * Math.sin((360 / 365) * (dayOfYear - 81) * Math.PI / 180);
         const declinationRad = declination * Math.PI / 180;
 
         const cosHourAngle = -Math.tan(latRad) * Math.tan(declinationRad);
@@ -1918,14 +1959,18 @@ Singleton {
         }
 
         if (SessionData.nightModeUseIPLocation) {
-            DMSService.sendRequest("wayland.gamma.setUseIPLocation", {"use": true}, response => {
+            DMSService.sendRequest("wayland.gamma.setUseIPLocation", {
+                "use": true
+            }, response => {
                 if (response?.error) {
                     console.warn("Theme automation: Failed to enable IP location", response.error);
                 }
             });
             return true;
         } else if (SessionData.latitude !== 0.0 && SessionData.longitude !== 0.0) {
-            DMSService.sendRequest("wayland.gamma.setUseIPLocation", {"use": false}, response => {
+            DMSService.sendRequest("wayland.gamma.setUseIPLocation", {
+                "use": false
+            }, response => {
                 if (!response.error) {
                     DMSService.sendRequest("wayland.gamma.setLocation", {
                         "latitude": SessionData.latitude,
@@ -1982,7 +2027,9 @@ Singleton {
     function stopThemeModeAutomation() {
         root.themeModeAutomationActive = false;
         if (typeof DMSService !== "undefined" && DMSService.isConnected) {
-            DMSService.sendRequest("theme.auto.setEnabled", {"enabled": false});
+            DMSService.sendRequest("theme.auto.setEnabled", {
+                "enabled": false
+            });
         }
     }
 }

quickshell/Common/settings/SettingsSpec.js

@@ -19,6 +19,7 @@ var SPEC = {
 
     widgetBackgroundColor: { def: "sch" },
     widgetColorMode: { def: "default" },
+    controlCenterTileColorMode: { def: "primary" },
     cornerRadius: { def: 12, onChange: "updateCompositorLayout" },
     niriLayoutGapsOverride: { def: -1, onChange: "updateCompositorLayout" },
     niriLayoutRadiusOverride: { def: -1, onChange: "updateCompositorLayout" },

quickshell/Modules/ControlCenter/Components/ActionTile.qml

@@ -17,20 +17,19 @@ Rectangle {
     property var widgetData: null
     property bool editMode: false
 
-    signal clicked()
+    signal clicked
 
     width: parent ? parent.width : 200
     height: 60
     radius: {
-        if (Theme.cornerRadius === 0) return 0
+        if (Theme.cornerRadius === 0)
-        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4
+            return 0;
+        return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4;
     }
 
-    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
-    readonly property color _tileBgInactive:
+    readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-        Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+    readonly property color _tileRingActive: Theme.ccTileRing
-    readonly property color _tileRingActive:
-        Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
 
     color: isActive ? _tileBgActive : _tileBgInactive
     border.color: isActive ? _tileRingActive : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
@@ -38,8 +37,8 @@ Rectangle {
     opacity: enabled ? 1.0 : 0.6
 
     function hoverTint(base) {
-        const factor = 1.2
+        const factor = 1.2;
-        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor)
+        return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
     Rectangle {
@@ -49,7 +48,9 @@ Rectangle {
         opacity: mouseArea.containsMouse ? 0.08 : 0.0
 
         Behavior on opacity {
-            NumberAnimation { duration: Theme.shortDuration }
+            NumberAnimation {
+                duration: Theme.shortDuration
+            }
         }
     }
 
@@ -62,7 +63,7 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryText : Theme.primary
+            color: isActive ? Theme.ccTileActiveText : Theme.ccTileInactiveIcon
             anchors.verticalCenter: parent.verticalCenter
         }
 
@@ -80,7 +81,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     style: Typography.Style.Body
-                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    color: isActive ? Theme.ccTileActiveText : Theme.surfaceText
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
                     horizontalAlignment: Text.AlignLeft
@@ -90,7 +91,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     style: Typography.Style.Caption
-                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    color: isActive ? Theme.ccTileActiveText : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap

quickshell/Modules/ControlCenter/Widgets/CompoundPill.qml

@@ -41,16 +41,16 @@ Rectangle {
 
     readonly property color _labelPrimary: Theme.surfaceText
     readonly property color _labelSecondary: Theme.surfaceVariantText
-    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
     readonly property color _tileBgInactive: {
         const transparency = Theme.popupTransparency;
         const surface = Theme.surfaceContainer || Qt.rgba(0.1, 0.1, 0.1, 1);
         return Qt.rgba(surface.r, surface.g, surface.b, transparency);
     }
-    readonly property color _tileRingActive: Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+    readonly property color _tileRingActive: Theme.ccTileRing
     readonly property color _tileRingInactive: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.18)
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.ccTileActiveText
-    readonly property color _tileIconInactive: Theme.primary
+    readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
 
     property int _padH: Theme.spacingS
     property int _tileSize: 48

quickshell/Modules/ControlCenter/Widgets/SmallBatteryButton.qml

@@ -27,11 +27,11 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
     readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    readonly property color _tileRingActive: Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+    readonly property color _tileRingActive: Theme.ccTileRing
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.ccTileActiveText
-    readonly property color _tileIconInactive: Theme.primary
+    readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
 
     color: {
         if (isActive)

quickshell/Modules/ControlCenter/Widgets/SmallDiskUsageButton.qml

@@ -73,7 +73,7 @@ Rectangle {
                     return Theme.error;
                 if (root.usagePercent > 75)
                     return Theme.warning;
-                return Theme.primary;
+                return Theme.ccTileInactiveIcon;
             }
         }
 
@@ -99,7 +99,7 @@ Rectangle {
                         return Theme.error;
                     if (root.usagePercent > 75)
                         return Theme.warning;
-                    return Theme.primary;
+                    return Theme.ccTileInactiveIcon;
                 }
             }
         }

quickshell/Modules/ControlCenter/Widgets/SmallToggleButton.qml

@@ -26,11 +26,11 @@ Rectangle {
         return Theme.isLightMode ? Qt.darker(base, factor) : Qt.lighter(base, factor);
     }
 
-    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
     readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    readonly property color _tileRingActive: Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+    readonly property color _tileRingActive: Theme.ccTileRing
-    readonly property color _tileIconActive: Theme.primaryText
+    readonly property color _tileIconActive: Theme.ccTileActiveText
-    readonly property color _tileIconInactive: Theme.primary
+    readonly property color _tileIconInactive: Theme.ccTileInactiveIcon
 
     color: {
         if (isActive)

quickshell/Modules/ControlCenter/Widgets/ToggleButton.qml

@@ -26,9 +26,9 @@ Rectangle {
         return isActive ? Theme.cornerRadius : Theme.cornerRadius + 4;
     }
 
-    readonly property color _tileBgActive: Theme.primary
+    readonly property color _tileBgActive: Theme.ccTileActiveBg
     readonly property color _tileBgInactive: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
-    readonly property color _tileRingActive: Qt.rgba(Theme.primaryText.r, Theme.primaryText.g, Theme.primaryText.b, 0.22)
+    readonly property color _tileRingActive: Theme.ccTileRing
 
     color: {
         if (isActive)
@@ -69,7 +69,7 @@ Rectangle {
         DankIcon {
             name: root.iconName
             size: Theme.iconSize
-            color: isActive ? Theme.primaryText : Theme.primary
+            color: isActive ? Theme.ccTileActiveText : Theme.ccTileInactiveIcon
             anchors.verticalCenter: parent.verticalCenter
             rotation: root.iconRotation
             onRotationCompleted: root.iconRotationCompleted()
@@ -89,7 +89,7 @@ Rectangle {
                     width: parent.width
                     text: root.text
                     font.pixelSize: Theme.fontSizeMedium
-                    color: isActive ? Theme.primaryText : Theme.surfaceText
+                    color: isActive ? Theme.ccTileActiveText : Theme.surfaceText
                     font.weight: Font.Medium
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
@@ -100,7 +100,7 @@ Rectangle {
                     width: parent.width
                     text: root.secondaryText
                     font.pixelSize: Theme.fontSizeSmall
-                    color: isActive ? Theme.primaryText : Theme.surfaceVariantText
+                    color: isActive ? Theme.ccTileActiveText : Theme.surfaceVariantText
                     visible: text.length > 0
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap

quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml

@@ -917,8 +917,8 @@ Item {
                     return SettingsData.groupWorkspaceApps ? groupedCount : totalCount;
                 }
 
-                readonly property real baseWidth: root.isVertical ? (SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5) : (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7)
+                readonly property real baseWidth: root.isVertical ? (SettingsData.showWorkspaceApps ? Math.max(widgetHeight * 0.7, root.appIconSize + Theme.spacingXS * 2) : widgetHeight * 0.5) : (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7)
-                readonly property real baseHeight: root.isVertical ? (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7) : (SettingsData.showWorkspaceApps ? widgetHeight * 0.7 : widgetHeight * 0.5)
+                readonly property real baseHeight: root.isVertical ? (isActive ? root.widgetHeight * 1.05 : root.widgetHeight * 0.7) : (SettingsData.showWorkspaceApps ? Math.max(widgetHeight * 0.7, root.appIconSize + Theme.spacingXS * 2) : widgetHeight * 0.5)
                 readonly property bool hasWorkspaceName: SettingsData.showWorkspaceName && modelData?.name && modelData.name !== ""
                 readonly property bool workspaceNamesEnabled: SettingsData.showWorkspaceName && CompositorService.isNiri
                 readonly property real contentImplicitWidth: (hasWorkspaceName || loadedHasIcon) ? (appIconsLoader.item?.contentWidth ?? 0) : 0

quickshell/Modules/Settings/ThemeColorsTab.qml

@@ -1484,6 +1484,42 @@ Item {
                     }
                 }
 
+                SettingsDropdownRow {
+                    tab: "theme"
+                    tags: ["control", "center", "tile", "button", "color", "active"]
+                    settingKey: "controlCenterTileColorMode"
+                    text: I18n.tr("Control Center Tile Color")
+                    description: I18n.tr("Active tile background and icon color")
+                    options: ["Primary", "Primary Container", "Secondary", "Surface Variant"]
+                    currentValue: {
+                        switch (SettingsData.controlCenterTileColorMode) {
+                        case "primaryContainer":
+                            return "Primary Container";
+                        case "secondary":
+                            return "Secondary";
+                        case "surfaceVariant":
+                            return "Surface Variant";
+                        default:
+                            return "Primary";
+                        }
+                    }
+                    onValueChanged: value => {
+                        switch (value) {
+                        case "Primary Container":
+                            SettingsData.set("controlCenterTileColorMode", "primaryContainer");
+                            return;
+                        case "Secondary":
+                            SettingsData.set("controlCenterTileColorMode", "secondary");
+                            return;
+                        case "Surface Variant":
+                            SettingsData.set("controlCenterTileColorMode", "surfaceVariant");
+                            return;
+                        default:
+                            SettingsData.set("controlCenterTileColorMode", "primary");
+                        }
+                    }
+                }
+
                 SettingsSliderRow {
                     tab: "theme"
                     tags: ["popup", "transparency", "opacity", "modal"]