Fix header apps icons

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/theming/css/default.css

@@ -52,6 +52,6 @@
   --header-menu-item-height: 44px;
   --header-menu-profile-item-height: 66px;
   --breakpoint-mobile: 1024px;
-  --primary-invert-if-bright: unset;
-  --background-invert-if-dark: unset;
+  --primary-invert-if-bright: no;
+  --background-invert-if-dark: no;
 }

apps/theming/lib/Themes/DefaultTheme.php

@@ -177,8 +177,11 @@ class DefaultTheme implements ITheme {
 			// to be used for legacy reasons only. Use inline
 			// svg with proper css variable instead or material
 			// design icons.
-			'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'unset',
-			'--background-invert-if-dark' => 'unset',
+			// ⚠️ Using 'no' as a value to make sure we specify an
+			// 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',
+			'--background-invert-if-dark' => 'no',
 		];
 
 		// Register image variables only if custom-defined
@@ -187,7 +190,7 @@ class DefaultTheme implements ITheme {
 			if ($this->imageManager->hasImage($image)) {
 				// If primary as background has been request, let's not define the background image
 				if ($image === 'background' && $backgroundDeleted) {
-					$variables["--image-background-plain"] = true;
+					$variables["--image-background-plain"] = 'true';
 					continue;
 				} else if ($image === 'background') {
 					$variables['--image-background-size'] = 'cover';
@@ -197,7 +200,7 @@ class DefaultTheme implements ITheme {
 		}
 
 		if ($hasCustomLogoHeader) {
-			$variables["--image-logoheader-custom"] = true;
+			$variables["--image-logoheader-custom"] = 'true';
 		}
 
 		return $variables;

core/css/header.scss

@@ -182,7 +182,7 @@
 		left: 12px;
 		top: 1px;
 		bottom: 1px;
-		// Invert custom logo if primary too bright
+		// Invert non-custom logo if primary is too bright
 		filter: var(--image-logoheader-custom, var(--primary-invert-if-bright))
 	}
 
@@ -446,11 +446,6 @@ nav[role='navigation'] {
 			// Make sure most app names don’t ellipsize
 			letter-spacing: -0.5px;
 			font-size: 12px;
-
-			// If the primary is too bright, invert the app icons
-			svg image {
-				filter: var(--primary-invert-if-bright);
-			}
 		}
 
 		/* focused app visual feedback */
@@ -508,6 +503,8 @@ nav[role='navigation'] {
 		svg,
 		.icon-more-white {
 			transition: transform var(--animation-quick) ease;
+			// If the primary is too bright, invert the app icons
+			filter: var(--primary-invert-if-bright);
 		}
 
 		/* Triangle */

core/templates/layout.user.php

@@ -109,7 +109,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
 										<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
 										<?php if ($entry['active']): ?> class="active"<?php endif; ?>
 										aria-label="<?php p($entry['name']); ?>">
-										<svg width="20" height="20" viewBox="0 0 20 20" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
+										<svg width="20" height="20" viewBox="0 0 16 16" alt=""<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
 											<defs>
 												<filter id="invertMenuMore-<?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"></feColorMatrix></filter>
 												<mask id="hole">