Dock, Tray, ActiveWindow, Taskbar: add theming for app/tray icons

appicon_colorize: create simple shader to colorize icons by theme color

Modules/Bar/Widgets/ActiveWindow.qml

@@ -149,6 +149,15 @@ Item {
             asynchronous: true
             smooth: true
             visible: source !== ""
+
+            // Apply dock shader to active window icon (always themed)
+            layer.enabled: widgetSettings.colorizeIcons !== false
+            layer.effect: ShaderEffect {
+              property color targetColor: Color.mOnSurface
+              property real colorizeMode: 0.0 // Dock mode (grayscale)
+
+              fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+            }
           }
         }
 
@@ -315,6 +324,15 @@ Item {
             asynchronous: true
             smooth: true
             visible: source !== ""
+
+            // Apply dock shader to active window icon (always themed)
+            layer.enabled: widgetSettings.colorizeIcons !== false
+            layer.effect: ShaderEffect {
+              property color targetColor: Color.mOnSurface
+              property real colorizeMode: 0.0 // Dock mode (grayscale)
+
+              fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+            }
           }
         }
       }

Modules/Bar/Widgets/Taskbar.qml

@@ -81,6 +81,15 @@ Rectangle {
           asynchronous: true
           opacity: modelData.isFocused ? Style.opacityFull : 0.6
 
+          // Apply dock shader to all taskbar icons
+          layer.enabled: widgetSettings.colorizeIcons !== false
+          layer.effect: ShaderEffect {
+            property color targetColor: Color.mOnSurface
+            property real colorizeMode: 0.0 // Dock mode (grayscale)
+
+            fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+          }
+
           Rectangle {
             anchors.bottomMargin: -2 * scaling
             anchors.bottom: parent.bottom

Modules/Bar/Widgets/Tray.qml

@@ -193,6 +193,14 @@ Rectangle {
           }
           opacity: status === Image.Ready ? 1 : 0
 
+          layer.enabled: widgetSettings.colorizeIcons !== false
+          layer.effect: ShaderEffect {
+            property color targetColor: Color.mOnSurface
+            property real colorizeMode: 1.0 // Tray mode (intensity-based)
+
+            fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+          }
+
           MouseArea {
             anchors.fill: parent
             hoverEnabled: true

Modules/Dock/Dock.qml

@@ -401,6 +401,15 @@ Variants {
 
                       scale: appButton.hovered ? 1.15 : 1.0
 
+                      // Apply dock-specific colorization shader only to non-focused apps
+                      layer.enabled: !appButton.isActive && Settings.data.dock.colorizeIcons
+                      layer.effect: ShaderEffect {
+                        property color targetColor: Color.mOnSurface
+                        property real colorizeMode: 0.0 // Dock mode (grayscale)
+
+                        fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
+                      }
+
                       Behavior on scale {
                         NumberAnimation {
                           duration: Style.animationNormal

Modules/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml

@@ -18,6 +18,7 @@ ColumnLayout {
   property bool valueAutoHide: widgetData.autoHide !== undefined ? widgetData.autoHide : widgetMetadata.autoHide
   property string valueScrollingMode: widgetData.scrollingMode || widgetMetadata.scrollingMode
   property int valueWidth: widgetData.width !== undefined ? widgetData.width : widgetMetadata.width
+  property bool valueColorizeIcons: widgetData.colorizeIcons !== undefined ? widgetData.colorizeIcons : widgetMetadata.colorizeIcons
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
@@ -25,6 +26,7 @@ ColumnLayout {
     settings.showIcon = valueShowIcon
     settings.scrollingMode = valueScrollingMode
     settings.width = parseInt(widthInput.text) || widgetMetadata.width
+    settings.colorizeIcons = valueColorizeIcons
     return settings
   }
 
@@ -44,6 +46,14 @@ ColumnLayout {
     onToggled: checked => root.valueShowIcon = checked
   }
 
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.active-window.colorize-icons.label")
+    description: I18n.tr("bar.widget-settings.active-window.colorize-icons.description")
+    checked: root.valueColorizeIcons
+    onToggled: checked => root.valueColorizeIcons = checked
+  }
+
   NTextInput {
     id: widthInput
     Layout.fillWidth: true

Modules/Settings/Bar/WidgetSettings/TaskbarSettings.qml

@@ -16,11 +16,13 @@ ColumnLayout {
   // Local state
   property bool valueOnlyActiveWorkspaces: widgetData.onlyActiveWorkspaces !== undefined ? widgetData.onlyActiveWorkspaces : widgetMetadata.onlyActiveWorkspaces
   property bool valueOnlySameOutput: widgetData.onlySameOutput !== undefined ? widgetData.onlySameOutput : widgetMetadata.onlySameOutput
+  property bool valueColorizeIcons: widgetData.colorizeIcons !== undefined ? widgetData.colorizeIcons : widgetMetadata.colorizeIcons
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
     settings.onlySameOutput = valueOnlySameOutput
     settings.onlyActiveWorkspaces = valueOnlyActiveWorkspaces
+    settings.colorizeIcons = valueColorizeIcons
     return settings
   }
 
@@ -39,4 +41,12 @@ ColumnLayout {
     checked: root.valueOnlyActiveWorkspaces
     onToggled: checked => root.valueOnlyActiveWorkspaces = checked
   }
+
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.taskbar.colorize-icons.label")
+    description: I18n.tr("bar.widget-settings.taskbar.colorize-icons.description")
+    checked: root.valueColorizeIcons
+    onToggled: checked => root.valueColorizeIcons = checked
+  }
 }

Modules/Settings/Bar/WidgetSettings/TraySettings.qml

@@ -5,12 +5,14 @@ import qs.Commons
 import qs.Widgets
 
 ColumnLayout {
+  id: root
   // Properties to receive data from parent
   property var widgetData: ({}) // Expected by BarWidgetSettingsDialog
   property var widgetMetadata: ({}) // Expected by BarWidgetSettingsDialog
 
-  // Local state for the blacklist
+  // Local state
   property var localBlacklist: widgetData.blacklist || []
+  property bool valueColorizeIcons: widgetData.colorizeIcons !== undefined ? widgetData.colorizeIcons : widgetMetadata.colorizeIcons
 
   ListModel {
     id: blacklistModel
@@ -27,6 +29,14 @@ ColumnLayout {
 
   spacing: Style.marginM * scaling
 
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.tray.colorize-icons.label")
+    description: I18n.tr("bar.widget-settings.tray.colorize-icons.description")
+    checked: root.valueColorizeIcons
+    onToggled: checked => root.valueColorizeIcons = checked
+  }
+
   ColumnLayout {
     Layout.fillWidth: true
     spacing: Style.marginS * scaling
@@ -135,6 +145,7 @@ ColumnLayout {
     // Return the updated settings for this widget instance
     var settings = Object.assign({}, widgetData || {})
     settings.blacklist = newBlacklist
+    settings.colorizeIcons = root.valueColorizeIcons
     return settings
   }
 }

Modules/Settings/Tabs/DockTab.qml

@@ -93,6 +93,20 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginXL * scaling
   }
 
+  NToggle {
+    Layout.fillWidth: true
+    label: I18n.tr("settings.dock.appearance.colorize-icons.label")
+    description: I18n.tr("settings.dock.appearance.colorize-icons.description")
+    checked: Settings.data.dock.colorizeIcons
+    onToggled: checked => Settings.data.dock.colorizeIcons = checked
+  }
+
+  NDivider {
+    Layout.fillWidth: true
+    Layout.topMargin: Style.marginXL * scaling
+    Layout.bottomMargin: Style.marginXL * scaling
+  }
+
   // Monitor Configuration
   ColumnLayout {
     spacing: Style.marginM * scaling