From 710285d8c29a091b1446cfb6cff0fdb373c73f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Wed, 22 Feb 2023 12:45:02 +0100
Subject: [PATCH] fix: Adapt the menubar to the primary color if a custom
 backgorund image has been set
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/theming/lib/Themes/CommonThemeTrait.php |  5 +++
 cypress/e2e/theming/admin-settings.cy.ts     | 46 ++++++++++++++++++++
 2 files changed, 51 insertions(+)

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
index 42ee6212cee84..d7836e4c120fc 100644
--- a/apps/theming/lib/Themes/CommonThemeTrait.php
+++ b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -115,6 +115,11 @@ protected function generateGlobalBackgroundVariables(): array {
 			$variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no';
 		}
 
+		// Adapt the menubar to the primary color if a custom backgorund image has been set
+		if ($this->imageManager->hasImage('background')) {
+			$variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no';
+		}
+
 		if ($hasCustomLogoHeader) {
 			$variables['--image-logoheader-custom'] = 'true';
 		}
diff --git a/cypress/e2e/theming/admin-settings.cy.ts b/cypress/e2e/theming/admin-settings.cy.ts
index 6825e0045c29b..af5d1999d8b85 100644
--- a/cypress/e2e/theming/admin-settings.cy.ts
+++ b/cypress/e2e/theming/admin-settings.cy.ts
@@ -227,6 +227,52 @@ describe('Remove the default background with a bright color', function() {
 	})
 })
 
+describe('Invert based on primary color if no background image is used', function() {
+	before(function() {
+		// Just in case previous test failed
+		cy.resetAdminTheming()
+		cy.login(admin)
+	})
+
+	it('See the admin theming section', function() {
+		cy.visit('/settings/admin/theming')
+		cy.get('[data-admin-theming-settings]').should('exist').scrollIntoView()
+		cy.get('[data-admin-theming-settings]').should('be.visible')
+	})
+
+	it('Set a bright primary color and custom background', function() {
+		cy.intercept('*/apps/theming/ajax/uploadImage').as('setBackground')
+
+		cy.fixture('image.jpg', null).as('background')
+		cy.get('[data-admin-theming-setting-file="background"] input[type="file"]').selectFile('@background', { force: true })
+
+		cy.wait('@setBackground')
+		cy.waitUntil(() => cy.window().then((win) => {
+			const currentBackgroundDefault = getComputedStyle(win.document.body).getPropertyValue('--image-background-default')
+			return currentBackgroundDefault.includes('/apps/theming/image/background?v=')
+		}))
+
+		cy.intercept('*/apps/theming/ajax/updateStylesheet').as('setColor')
+
+		// Pick one of the bright color preset
+		cy.get('[data-admin-theming-setting-primary-color-picker]').click()
+		cy.get('.color-picker__simple-color-circle:eq(4)').click()
+
+		cy.wait('@setColor')
+		cy.waitUntil(() => validateBodyThemingCss('#ddcb55', '/apps/theming/image/background?v='))
+	})
+
+	it('See the header being inverted', function() {
+		cy.waitUntil(() => cy.window().then((win) => {
+			const firstEntry = win.document.querySelector('.app-menu-main li img')
+			if (!firstEntry) {
+				return false
+			}
+			return getComputedStyle(firstEntry).filter === 'invert(1)'
+		}))
+	})
+})
+
 describe('Change the login fields then reset them', function() {
 	const name = 'ABCdef123'
 	const url = 'https://example.com'