Merge pull request #32204 from nextcloud/fix/invert-logo

4 files changed, 19 insertions, 17 deletions

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 4bd9fb13bb8..a2b4b4c7b60 100644
--- a/apps/theming/css/default.css
+++ b/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;
 }
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index b13e481907a..a98d9099d95 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -89,6 +89,8 @@ class DefaultTheme implements ITheme {
 		$colorBoxShadow = $this->util->darken($colorMainBackground, 70);
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 
+		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') ||  $this->imageManager->hasImage('logoheader');
+
 		$variables = [
 			'--color-main-background' => $colorMainBackground,
 			'--color-main-background-rgb' => $colorMainBackgroundRGB,
@@ -175,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
@@ -185,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';
@@ -194,6 +199,10 @@ class DefaultTheme implements ITheme {
 			}
 		}
 
+		if ($hasCustomLogoHeader) {
+			$variables["--image-logoheader-custom"] = 'true';
+		}
+
 		return $variables;
 	}
 
diff --git a/core/css/header.scss b/core/css/header.scss
index 4c107c0d58f..a5a706ae239 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -182,12 +182,8 @@
 		left: 12px;
 		top: 1px;
 		bottom: 1px;
-
-		img {
-			opacity: 0;
-			max-width: 100%;
-			max-height: 200px;
-		}
+		// Invert non-custom logo if primary is too bright
+		filter: var(--image-logoheader-custom, var(--primary-invert-if-bright))
 	}
 
 	.header-appname-container {
@@ -450,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 */
@@ -512,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 */
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 4efe072a5bb..40fd13a1000 100644
--- a/core/templates/layout.user.php
+++ b/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">