fix(theming): When selected a background image make header color inde…

…pendent of primary color

Signed-off-by: Ferdinand Thiessen <[email protected]>

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;

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -113,6 +113,7 @@ protected function generateGlobalBackgroundVariables(): array {
 			$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 @@ protected function generateUserBackgroundVariables(): array {
 					'--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 @@ protected function generateUserBackgroundVariables(): array {
 					// --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 @@ protected function generateUserBackgroundVariables(): array {
 					'--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',
 				];
 			}
 		}

apps/theming/lib/Themes/DefaultTheme.php

@@ -211,6 +211,7 @@ public function getCSSVariables(): array {
 			'--background-invert-if-dark' => 'no',
 			'--background-invert-if-bright' => 'invert(100%)',
 			'--background-image-invert-if-bright' => 'no',
+			'--background-image-color-text' => '#ffffff',
 		];
 
 		// Primary variables

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);