Recolor placeholder icon for packages/plugins correctly in dark-mode

As we don't want to recolor the icon if the package has a custom icon
a `Image` or `UM.RecolorImage` is shown conditionally.

CURA-8975

1 files changed, 29 insertions, 12 deletions

diff --git a/plugins/Marketplace/resources/qml/PackageCardHeader.qml b/plugins/Marketplace/resources/qml/PackageCardHeader.qml
index 013704793f..1c39d4b063 100644
--- a/plugins/Marketplace/resources/qml/PackageCardHeader.qml
+++ b/plugins/Marketplace/resources/qml/PackageCardHeader.qml
@@ -24,7 +24,7 @@ Item
     height: UM.Theme.getSize("card").height
 
     // card icon
-    Image
+    Item
     {
         id: packageItem
         anchors
@@ -35,19 +35,36 @@ Item
         }
         width: UM.Theme.getSize("card_icon").width
         height: width
-        sourceSize.height: height
-        sourceSize.width: width
-        source:
+
+        property bool packageHasIcon: packageData.iconUrl != ""
+
+        Image
         {
-            if (packageData.iconUrl != "")
-            {
-                return packageData.iconUrl
-            }
-            switch (packageData.packageType)
+            visible: parent.packageHasIcon
+            anchors.fill: parent
+            source: packageData.iconUrl
+            sourceSize.height: height
+            sourceSize.width: width
+        }
+
+        UM.RecolorImage
+        {
+            visible: !parent.packageHasIcon
+            anchors.fill: parent
+            sourceSize.height: height
+            sourceSize.width: width
+            color: UM.Theme.getColor("text")
+            source:
             {
-                case "plugin": return "../images/Plugin.svg";
-                case "material": return "../images/Spool.svg";
-                default: return "../images/placeholder.svg";
+                switch (packageData.packageType)
+                {
+                    case "plugin":
+                        return "../images/Plugin.svg";
+                    case "material":
+                        return "../images/Spool.svg";
+                    default:
+                        return "../images/placeholder.svg";
+                }
             }
         }
     }