Merge pull request #7817 from nextcloud/stable12-7767

[stable12] Fix preview when theming changes invertion of icons

Author: rullzer

apps/theming/css/theming.scss

@@ -11,6 +11,12 @@
 }
 
 @if (lightness($color-primary) > 50) {
+	#appmenu:not(.inverted) svg {
+		filter: invert(1);
+	}
+	#appmenu.inverted svg {
+		filter: none;
+	}
 	.searchbox input[type="search"] {
 		background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
 	}
@@ -48,6 +54,13 @@
 			background-color: nc-darken($color-primary-element, 30%) !important;
 		}
 	}
+} @else {
+	#appmenu:not(.inverted) svg {
+		filter: none;
+	}
+	#appmenu.inverted svg {
+		filter: invert(1);
+	}
 }
 
 /* Colorized svg images */

core/templates/layout.user.php

@@ -60,20 +60,18 @@
 					<div class="icon-caret"></div>
 				</a>
 
-				<ul id="appmenu">
+				<ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
 					<?php foreach ($_['navigation'] as $entry): ?>
 						<li data-id="<?php p($entry['id']); ?>" class="hidden">
 							<a href="<?php print_unescaped($entry['href']); ?>"
 							   tabindex="3"
 								<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
-								<?php if ($_['themingInvertMenu']) { ?>
 									<svg width="20" height="20" viewBox="0 0 20 20">
-									<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><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>
-									<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMain-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon" /></svg>
-								<?php } else { ?>
-									<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
-										 class="app-icon" alt="<?php p($entry['name']); ?>" />
-								<?php } ?>
+										<?php if ($_['themingInvertMenu']) { ?>
+										<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><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>
+										<?php } ?>
+										<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet"<?php if ($_['themingInvertMenu']) { ?> filter="url(#invertMenuMain-<?php p($entry['id']); ?>)"<?php } ?> xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon" />
+									</svg>
 								<div class="icon-loading-small-dark"
 									 style="display:none;"></div>
 							</a>