From 7dcc2e541c867c8558d270b2294f0df0c64ed8be Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Tue, 21 May 2024 22:08:06 +0200
Subject: [PATCH] fix(theming): When selected a background image make header
 color independent of primary color

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/theming/css/default.css                 | 1 +
 apps/theming/lib/Themes/CommonThemeTrait.php | 4 ++++
 apps/theming/lib/Themes/DefaultTheme.php     | 1 +
 core/css/header.scss                         | 1 +
 4 files changed, 7 insertions(+)

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 201ec242912..5ed4b5b2739 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -68,6 +68,7 @@
   --background-invert-if-dark: no;
   --background-invert-if-bright: invert(100%);
   --background-image-invert-if-bright: no;
+  --background-image-color-text: #ffffff;
   --primary-invert-if-bright: no;
   --primary-invert-if-dark: invert(100%);
   --color-primary: #00679e;
diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
index dd5b25e1a29..e55448758ca 100644
--- a/apps/theming/lib/Themes/CommonThemeTrait.php
+++ b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -113,6 +113,7 @@ trait CommonThemeTrait {
 			$variables['--image-background'] = 'no';
 			// If no background image is set, we need to check against the shown primary colour
 			$variables['--background-image-invert-if-bright'] = $isPrimaryBright ? 'invert(100%)' : 'no';
+			$variables['--background-image-color-text'] = $isPrimaryBright ? '#000000' : '#ffffff';
 		}
 
 		if ($hasCustomLogoHeader) {
@@ -143,6 +144,7 @@ trait CommonThemeTrait {
 					'--color-background-plain' => $this->primaryColor,
 					// If no background image is set, we need to check against the shown primary colour
 					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
+					'--background-image-color-text' => $isPrimaryBright ? '#000000' : '#ffffff',
 				];
 			}
 
@@ -161,6 +163,7 @@ trait CommonThemeTrait {
 					// --image-background is not defined in this case
 					'--color-background-plain' => $this->primaryColor,
 					'--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no',
+					'--background-image-color-text' => $isPrimaryBright ? '#000000' : '#ffffff',
 				];
 			}
 
@@ -170,6 +173,7 @@ trait CommonThemeTrait {
 					'--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')",
 					'--color-background-plain' => $this->primaryColor,
 					'--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no',
+					'--background-image-color-text' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? '#000000' : '#ffffff',
 				];
 			}
 		}
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 68038f053e3..38b76d158b4 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -211,6 +211,7 @@ class DefaultTheme implements ITheme {
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',
 			'--background-image-invert-if-bright' => 'no',
+			'--background-image-color-text' => '#ffffff',
 		];
 
 		// Primary variables
diff --git a/core/css/header.scss b/core/css/header.scss
index eb7c4e8dcf4..35a152fba6c 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -93,6 +93,7 @@
 #header {
 	/* Header menu */
 	$header-menu-entry-height: 44px;
+	--color-primary-text: var(--background-image-color-text, #ffffff);
 
 	.header-right > div > .menu {
 		background-color: var(--color-main-background);