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

Signed-off-by: Joas Schilling <coding@schilljs.com>

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 @@ trait CommonThemeTrait {
 			// 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);
+							}
 						}
 					}