feat: Add color selection dropdown to CustomButton widget settings

Assets/Translations/en.json

@@ -142,11 +142,19 @@
           "description": "If the output text matches this value, the button will collapse.",
           "label": "Collapse condition"
         },
+        "color-selection": {
+          "description": "Apply theme colors to icon and text.",
+          "label": "Select Color"
+        },
         "display-command-output": {
           "description": "Enter a command to run at a regular interval. The first line of its output will be displayed as text.",
           "label": "Display command output",
           "stream-description": "Enter a command to run continuously."
         },
+        "enable-colorization": {
+          "description": "Enable colorization for the custom button icon and text, applying theme colors.",
+          "label": "Enable Colorization"
+        },
         "dynamic-text": "Dynamic text",
         "hide-mode": {
           "alwaysExpanded": "Always expanded",

Assets/settings-widgets-default.json

@@ -68,7 +68,9 @@
       "maxTextLength": {
         "horizontal": 10,
         "vertical": 10
-      }
+      },
+      "enableColorization": false,
+      "colorizeSystemIcon": "none"
     },
     "KeyboardLayout": {
       "displayMode": "onhover",

Modules/Bar/Widgets/CustomButton.qml

@@ -130,6 +130,48 @@ Item {
     return " ".repeat(currentMaxTextLength);
   }
 
+  readonly property bool enableColorization: widgetSettings.enableColorization || false
+  readonly property string colorizeSystemIcon: {
+    if (widgetSettings.colorizeSystemIcon !== undefined)
+      return widgetSettings.colorizeSystemIcon;
+    return widgetMetadata.colorizeSystemIcon !== undefined ? widgetMetadata.colorizeSystemIcon : "none";
+  }
+
+  readonly property bool isColorizing: enableColorization && colorizeSystemIcon !== "none"
+
+  readonly property color iconColor: {
+    if (!isColorizing)
+      return Color.mOnSurface;
+    switch (colorizeSystemIcon) {
+    case "primary":
+      return Color.mPrimary;
+    case "secondary":
+      return Color.mSecondary;
+    case "tertiary":
+      return Color.mTertiary;
+    case "error":
+      return Color.mError;
+    default:
+      return Color.mOnSurface;
+    }
+  }
+  readonly property color iconHoverColor: {
+    if (!isColorizing)
+      return Color.mOnHover;
+    switch (colorizeSystemIcon) {
+    case "primary":
+      return Qt.darker(Color.mPrimary, 1.2);
+    case "secondary":
+      return Qt.darker(Color.mSecondary, 1.2);
+    case "tertiary":
+      return Qt.darker(Color.mTertiary, 1.2);
+    case "error":
+      return Qt.darker(Color.mError, 1.2);
+    default:
+      return Color.mOnHover;
+    }
+  }
+
   implicitWidth: pill.width
   implicitHeight: pill.height
 
@@ -145,6 +187,7 @@ Item {
     rotateText: isVerticalBar && currentMaxTextLength > 0
     autoHide: false
     forceOpen: _pillForceOpen
+    customTextIconColor: isColorizing ? iconColor : Color.transparent
 
     tooltipText: {
       var tooltipLines = [];

Modules/Panels/Settings/Bar/WidgetSettings/CustomButtonSettings.qml

@@ -20,6 +20,8 @@ ColumnLayout {
   property int valueMaxTextLengthVertical: widgetData?.maxTextLength?.vertical ?? widgetMetadata?.maxTextLength?.vertical
   property string valueHideMode: (widgetData.hideMode !== undefined) ? widgetData.hideMode : widgetMetadata.hideMode
   property bool valueShowIcon: (widgetData.showIcon !== undefined) ? widgetData.showIcon : widgetMetadata.showIcon
+  property bool valueEnableColorization: widgetData.enableColorization || false
+  property string valueColorizeSystemIcon: widgetData.colorizeSystemIcon !== undefined ? widgetData.colorizeSystemIcon : widgetMetadata.colorizeSystemIcon || "none"
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {});
@@ -48,6 +50,8 @@ ColumnLayout {
       "vertical": valueMaxTextLengthVertical
     };
     settings.textIntervalMs = parseInt(textIntervalInput.text || textIntervalInput.placeholderText, 10);
+    settings.enableColorization = valueEnableColorization;
+    settings.colorizeSystemIcon = valueColorizeSystemIcon;
     return settings;
   }
 
@@ -101,6 +105,45 @@ ColumnLayout {
         visible: textCommandInput.text !== ""
       }
 
+      NToggle {
+        label: I18n.tr("bar.widget-settings.custom-button.enable-colorization.label")
+        description: I18n.tr("bar.widget-settings.custom-button.enable-colorization.description")
+        checked: valueEnableColorization
+        onToggled: checked => valueEnableColorization = checked
+      }
+
+      NComboBox {
+        visible: valueEnableColorization
+        label: I18n.tr("bar.widget-settings.custom-button.color-selection.label")
+        description: I18n.tr("bar.widget-settings.custom-button.color-selection.description")
+        model: [
+          {
+            "name": I18n.tr("options.colors.none"),
+            "key": "none"
+          },
+          {
+            "name": I18n.tr("options.colors.primary"),
+            "key": "primary"
+          },
+          {
+            "name": I18n.tr("options.colors.secondary"),
+            "key": "secondary"
+          },
+          {
+            "name": I18n.tr("options.colors.tertiary"),
+            "key": "tertiary"
+          },
+          {
+            "name": I18n.tr("options.colors.error"),
+            "key": "error"
+          }
+        ]
+        currentKey: valueColorizeSystemIcon
+        onSelected: function (key) {
+          valueColorizeSystemIcon = key;
+        }
+      }
+
       RowLayout {
         spacing: Style.marginM
 

Services/UI/BarWidgetRegistry.qml

@@ -138,7 +138,9 @@ Singleton {
                                     "maxTextLength": {
                                       "horizontal": 10,
                                       "vertical": 10
-                                    }
+                                    },
+                                    "enableColorization": false,
+                                    "colorizeSystemIcon": "none"
                                   },
                                   "KeyboardLayout": {
                                     "displayMode": "onhover",