feat(system-tray): add icon tinting (#2266)

quickshell/Common/SettingsData.qml

@@ -215,7 +215,9 @@ Singleton {
     property int selectedGpuIndex: 0
     property var enabledGpuPciIds: []
     property bool showSystemTray: true
-    property bool systemTrayMonochromeIcons: false
+    property string systemTrayIconTintMode: "none"
+    property int systemTrayIconTintSaturation: 50
+    property int systemTrayIconTintStrength: 135
     property bool showClock: true
     property bool showNotificationButton: true
     property bool showBattery: true

quickshell/Common/settings/SettingsSpec.js

@@ -81,7 +81,9 @@ var SPEC = {
     selectedGpuIndex: { def: 0 },
     enabledGpuPciIds: { def: [] },
     showSystemTray: { def: true },
-    systemTrayMonochromeIcons: { def: false },
+    systemTrayIconTintMode: { def: "none" },
+    systemTrayIconTintSaturation: { def: 50 },
+    systemTrayIconTintStrength: { def: 135 },
     showClock: { def: true },
     showNotificationButton: { def: true },
     showBattery: { def: true },

quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml

@@ -152,6 +152,59 @@ BasePill {
                 item: item
             }))
     readonly property var hiddenBarItems: allSortedTrayItems.filter(item => SessionData.isHiddenTrayId(root.getTrayItemKey(item)))
+    readonly property string trayIconTintMode: {
+        const configuredMode = SettingsData.systemTrayIconTintMode || "none";
+        switch (configuredMode) {
+        case "monochrome":
+        case "primary":
+        case "secondary":
+            return configuredMode;
+        default:
+            return "none";
+        }
+    }
+    readonly property bool trayIconTintEnabled: trayIconTintMode !== "none"
+    readonly property real trayIconTintSaturationAmount: {
+        const raw = SettingsData.systemTrayIconTintSaturation;
+        const value = (raw === undefined || raw === null) ? 50 : raw;
+        return Math.max(0, Math.min(100, value)) / 100;
+    }
+    readonly property real trayIconTintStrengthAmount: {
+        const raw = SettingsData.systemTrayIconTintStrength;
+        const value = (raw === undefined || raw === null) ? 135 : raw;
+        return Math.max(0, Math.min(200, value)) / 100;
+    }
+    readonly property real trayIconSaturation: {
+        switch (trayIconTintMode) {
+        case "monochrome":
+            return -1;
+        case "primary":
+        case "secondary":
+            return -root.trayIconTintSaturationAmount;
+        default:
+            return 0;
+        }
+    }
+    readonly property real trayIconColorization: {
+        switch (trayIconTintMode) {
+        case "primary":
+        case "secondary":
+            return root.trayIconTintStrengthAmount;
+        default:
+            return 0;
+        }
+    }
+    readonly property color trayIconTintColor: {
+        switch (trayIconTintMode) {
+        case "primary":
+            return Theme.primary;
+        case "secondary":
+            return Theme.secondary;
+        default:
+            return Theme.surfaceText;
+        }
+    }
+
     readonly property bool reverseInlineHorizontal: !useOverflowPopup && !isVerticalOrientation && section === "right"
     readonly property bool reverseInlineVertical: !useOverflowPopup && isVerticalOrientation && section === "right"
     readonly property var displayedMainBarItems: reverseInlineHorizontal ? [...mainBarItems].reverse() : mainBarItems
@@ -367,9 +420,11 @@ BasePill {
                             smooth: true
                             mipmap: true
                             visible: status === Image.Ready
-                            layer.enabled: SettingsData.systemTrayMonochromeIcons
+                            layer.enabled: root.trayIconTintEnabled
                             layer.effect: MultiEffect {
-                                saturation: -1
+                                saturation: root.trayIconSaturation
+                                colorization: root.trayIconColorization
+                                colorizationColor: root.trayIconTintColor
                             }
                         }
 
@@ -586,9 +641,11 @@ BasePill {
                     smooth: true
                     mipmap: true
                     visible: status === Image.Ready
-                    layer.enabled: SettingsData.systemTrayMonochromeIcons
+                    layer.enabled: root.trayIconTintEnabled
                     layer.effect: MultiEffect {
-                        saturation: -1
+                        saturation: root.trayIconSaturation
+                        colorization: root.trayIconColorization
+                        colorizationColor: root.trayIconTintColor
                     }
                 }
 
@@ -718,9 +775,11 @@ BasePill {
                     smooth: true
                     mipmap: true
                     visible: status === Image.Ready
-                    layer.enabled: SettingsData.systemTrayMonochromeIcons
+                    layer.enabled: root.trayIconTintEnabled
                     layer.effect: MultiEffect {
-                        saturation: -1
+                        saturation: root.trayIconSaturation
+                        colorization: root.trayIconColorization
+                        colorizationColor: root.trayIconTintColor
                     }
                 }
 
@@ -1223,9 +1282,11 @@ BasePill {
                             smooth: true
                             mipmap: true
                             visible: status === Image.Ready
-                            layer.enabled: SettingsData.systemTrayMonochromeIcons
+                            layer.enabled: root.trayIconTintEnabled
                             layer.effect: MultiEffect {
-                                saturation: -1
+                                saturation: root.trayIconSaturation
+                                colorization: root.trayIconColorization
+                                colorizationColor: root.trayIconTintColor
                             }
                         }
 

quickshell/Modules/Settings/DankBarTab.qml

@@ -1066,13 +1066,103 @@ Item {
                     })
             }
 
-            SettingsToggleCard {
+            SettingsCard {
                 iconName: "filter_b_and_w"
-                title: I18n.tr("Monochrome System Tray Icons")
+                title: I18n.tr("System Tray Icon Tint")
-                description: I18n.tr("Desaturate all system tray icons for a uniform monochrome look")
+                settingKey: "trayIconTint"
                 visible: selectedBarConfig?.enabled
-                checked: SettingsData.systemTrayMonochromeIcons
+
-                onToggled: checked => SettingsData.set("systemTrayMonochromeIcons", checked)
+                StyledText {
+                    text: I18n.tr("Choose monochrome or a theme color tint for system tray icons")
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceVariantText
+                    wrapMode: Text.WordWrap
+                    width: parent.width
+                    horizontalAlignment: Text.AlignLeft
+                }
+
+                SettingsButtonGroupRow {
+                    text: I18n.tr("Mode")
+                    model: [I18n.tr("None"), I18n.tr("Monochrome"), I18n.tr("Primary"), I18n.tr("Secondary")]
+                    currentIndex: {
+                        let mode = SettingsData.systemTrayIconTintMode || "none";
+                        switch (mode) {
+                        case "monochrome":
+                            return 1;
+                        case "primary":
+                            return 2;
+                        case "secondary":
+                            return 3;
+                        default:
+                            return 0;
+                        }
+                    }
+                    onSelectionChanged: (index, selected) => {
+                        if (!selected)
+                            return;
+
+                        let mode = "none";
+                        switch (index) {
+                        case 1:
+                            mode = "monochrome";
+                            break;
+                        case 2:
+                            mode = "primary";
+                            break;
+                        case 3:
+                            mode = "secondary";
+                            break;
+                        }
+
+                        SettingsData.set("systemTrayIconTintMode", mode);
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: trayTintSaturationSlider
+                    text: I18n.tr("Tint Saturation")
+                    description: I18n.tr("Controls how much original icon color is removed before applying tint")
+                    visible: {
+                        const mode = SettingsData.systemTrayIconTintMode || "none";
+                        return mode === "primary" || mode === "secondary";
+                    }
+                    value: SettingsData.systemTrayIconTintSaturation ?? 50
+                    minimum: 0
+                    maximum: 100
+                    unit: "%"
+                    defaultValue: 50
+                    onSliderDragFinished: finalValue => SettingsData.set("systemTrayIconTintSaturation", finalValue)
+
+                    Binding {
+                        target: trayTintSaturationSlider
+                        property: "value"
+                        value: SettingsData.systemTrayIconTintSaturation ?? 50
+                        restoreMode: Binding.RestoreBinding
+                    }
+                }
+
+                SettingsSliderRow {
+                    id: trayTintStrengthSlider
+                    text: I18n.tr("Tint Strength")
+                    description: I18n.tr("Controls how strongly the selected tint color is applied")
+                    visible: {
+                        const mode = SettingsData.systemTrayIconTintMode || "none";
+                        return mode === "primary" || mode === "secondary";
+                    }
+                    value: SettingsData.systemTrayIconTintStrength ?? 135
+                    minimum: 0
+                    maximum: 200
+                    unit: "%"
+                    defaultValue: 135
+                    onSliderDragFinished: finalValue => SettingsData.set("systemTrayIconTintStrength", finalValue)
+
+                    Binding {
+                        target: trayTintStrengthSlider
+                        property: "value"
+                        value: SettingsData.systemTrayIconTintStrength ?? 135
+                        restoreMode: Binding.RestoreBinding
+                    }
+                }
             }
 
             SettingsToggleCard {

quickshell/translations/settings_search_index.json

@@ -914,6 +914,31 @@
     ],
     "icon": "visibility_off"
   },
+  {
+    "section": "trayIconTint",
+    "label": "System Tray Icon Tint",
+    "tabIndex": 3,
+    "category": "Dank Bar",
+    "keywords": [
+      "bar",
+      "dank",
+      "icon",
+      "icons",
+      "monochrome",
+      "panel",
+      "primary",
+      "secondary",
+      "saturation",
+      "status",
+      "statusbar",
+      "strength",
+      "taskbar",
+      "tint",
+      "tray"
+    ],
+    "icon": "filter_b_and_w",
+    "description": "Choose monochrome or a theme color tint for system tray icons"
+  },
   {
     "section": "workspaceDragReorder",
     "label": "Drag to Reorder",