Uses javascript to invert the SVGs.

settings/js/apps.js

@@ -196,14 +196,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		if (app.preview && !OC.Util.isIE()) {
 			var currentImage = new Image();
 			currentImage.src = app.preview;
-
-			currentImage.onload = function() {
-				page.find('.app-image')
-					.append(this)
-					.fadeIn();
-			};
 		}
 
+		currentImage.onload = function() {
+			page.find('.app-image')
+				.append(OC.Settings.Apps.imageUrl(app.preview))
+				.fadeIn();
+		};
+
 		// set group select properly
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
 			OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging') ||
@@ -226,6 +226,17 @@ OC.Settings.Apps = OC.Settings.Apps || {
 		}
 	},
 
+	/**
+	 * Returns the image for apps listing
+	 */
+
+	imageUrl : function (url) {
+		var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+		img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
+		img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '"  class="app-icon" /></svg>';
+		return img;
+	},
+
 	isType: function(app, type){
 		return app.types && app.types.indexOf(type) !== -1;
 	},