Merge pull request #41920 from nextcloud/backport/41855/stable28

[stable28] fix(theming): Fix color inverted icons based on theming and dark mode

apps/files/src/views/Navigation.vue

@@ -245,6 +245,10 @@ export default {
 	background-position: center;
 }
 
+.app-navigation::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
+	color: var(--color-primary-element-text);
+}
+
 .app-navigation > ul.app-navigation__list {
 	// Use flex gap value for more elegant spacing
 	padding-bottom: var(--default-grid-baseline, 4px);

apps/theming/css/default.css

@@ -68,6 +68,7 @@
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
   --primary-invert-if-bright: no;
+  --primary-invert-if-dark: invert(100%);
   --color-primary: #00679e;
   --color-primary-default: #0082c9;
   --color-primary-text: #ffffff;

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -54,6 +54,7 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
 			// invalid one with no fallback. 'unset' could here fallback to some
 			// other theme with media queries
 			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
+			'--primary-invert-if-dark' => $this->util->invertTextColor($this->primaryColor) ? 'no' : 'invert(100%)',
 
 			'--color-primary' => $this->primaryColor,
 			'--color-primary-default' => $this->defaultPrimaryColor,

core/css/apps.scss

@@ -237,6 +237,10 @@ kbd {
 				> a {
 					background-color: var(--color-primary-element);
 					color: var(--color-primary-element-text);
+
+					&:first-child > img {
+						filter: var(--primary-invert-if-dark);
+					}
 				}
 			}
 
@@ -281,6 +285,9 @@ kbd {
 						> a {
 							border-radius: var(--border-radius-pill);
 							background-color: var(--color-primary-element-light);
+							&:first-child > img {
+								filter: var(--primary-invert-if-dark);
+							}
 						}
 					}