From 2d548e6496e21852097922adeebec2b0e72401d4 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Sat, 3 Feb 2024 13:37:28 +0100 Subject: [PATCH] fix(theming): The background is the primary color and must not be double inverted Signed-off-by: Ferdinand Thiessen --- apps/theming/css/default.css | 2 +- apps/theming/lib/Service/BackgroundService.php | 12 ++++++------ apps/theming/lib/Themes/CommonThemeTrait.php | 18 +++++++++--------- core/css/header.scss | 4 ++-- core/src/components/AppMenu.vue | 1 - 5 files changed, 18 insertions(+), 19 deletions(-) diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css index 7434710555b..dafa5370192 100644 --- a/apps/theming/css/default.css +++ b/apps/theming/css/default.css @@ -85,5 +85,5 @@ --color-primary-element-light-text: #00293f; --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); --image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg'); - --color-background-plain: #0082c9; + --color-background-plain: #00679e; } diff --git a/apps/theming/lib/Service/BackgroundService.php b/apps/theming/lib/Service/BackgroundService.php index b349af73a57..1b948c7300a 100644 --- a/apps/theming/lib/Service/BackgroundService.php +++ b/apps/theming/lib/Service/BackgroundService.php @@ -60,14 +60,14 @@ class BackgroundService { 'description' => 'Abstract background picture in yellow and white color whith a flower on it', 'attribution_url' => 'https://stocksnap.io/photo/soft-floral-XOYWCCW5PA', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#9f652f', + 'primary_color' => '#D8A06C', ], 'ted-moravec-morning-fog.jpg' => [ 'attribution' => 'Morning fog (Ted Moravec, Public Domain)', 'description' => 'Background picture of a forest shrouded in fog', 'attribution_url' => 'https://flickr.com/photos/tmoravec/52392410261', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#114c3b', + 'primary_color' => '#38A084', ], 'stefanus-martanto-setyo-husodo-underwater-ocean.jpg' => [ 'attribution' => 'Underwater ocean (Stefanus Martanto Setyo Husodo, CC0)', @@ -92,7 +92,7 @@ class BackgroundService { 'description' => 'Montage of a cetonia aurata bug that takes off with white background', 'attribution_url' => 'https://commons.wikimedia.org/wiki/File:Cetonia_aurata_take_off_composition_05172009.jpg', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#56633d', + 'primary_color' => '#869171', ], 'dejan-krsmanovic-ribbed-red-metal.jpg' => [ 'attribution' => 'Ribbed red metal (Dejan Krsmanovic, CC BY)', @@ -147,7 +147,7 @@ class BackgroundService { 'description' => 'Abstract background picture of pink tapioca bubbles', 'attribution_url' => 'https://www.flickr.com/photos/byrawpixel/27665140298/in/photostream/', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#7b4e7e', + 'primary_color' => '#b17ab4', ], 'nasa-waxing-crescent-moon.jpg' => [ 'attribution' => 'Waxing crescent moon (NASA, Public Domain)', @@ -166,14 +166,14 @@ class BackgroundService { 'description' => 'Background picture of mountains during sunset or sunrise', 'attribution_url' => 'https://www.flickr.com/photos/90975693@N05/17136440246', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#7f4f70', + 'primary_color' => '#c074a9', ], 'lali-masriera-yellow-bricks.jpg' => [ 'attribution' => 'Yellow bricks (Lali Masriera, CC BY)', 'description' => 'Background picture of yellow bricks with some yellow tubes', 'attribution_url' => 'https://www.flickr.com/photos/visualpanic/3982464447', 'theming' => self::THEMING_MODE_DARK, - 'primary_color' => '#7f5700', + 'primary_color' => '#bc8210', ], ]; diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 42ee6212cee..dd5b25e1a29 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -88,13 +88,13 @@ trait CommonThemeTrait { protected function generateGlobalBackgroundVariables(): array { $backgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor'; $hasCustomLogoHeader = $this->util->isLogoThemed(); - $isDefaultPrimaryBright = $this->util->invertTextColor($this->defaultPrimaryColor); + $isPrimaryBright = $this->util->invertTextColor($this->primaryColor); $variables = []; // Default last fallback values $variables['--image-background-default'] = "url('" . $this->themingDefaults->getBackground() . "')"; - $variables['--color-background-plain'] = $this->defaultPrimaryColor; + $variables['--color-background-plain'] = $this->primaryColor; // Register image variables only if custom-defined foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) { @@ -108,11 +108,11 @@ trait CommonThemeTrait { // If primary as background has been request or if we have a custom primary colour // let's not define the background image if ($backgroundDeleted) { - $variables['--color-background-plain'] = $this->defaultPrimaryColor; + $variables['--color-background-plain'] = $this->primaryColor; $variables['--image-background-plain'] = 'yes'; $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'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no'; + $variables['--background-image-invert-if-bright'] = $isPrimaryBright ? 'invert(100%)' : 'no'; } if ($hasCustomLogoHeader) { @@ -133,14 +133,14 @@ trait CommonThemeTrait { $adminBackgroundDeleted = $this->config->getAppValue(Application::APP_ID, 'backgroundMime', '') === 'backgroundColor'; $backgroundImage = $this->config->getUserValue($user->getUID(), Application::APP_ID, 'background_image', BackgroundService::BACKGROUND_DEFAULT); $currentVersion = (int)$this->config->getUserValue($user->getUID(), Application::APP_ID, 'userCacheBuster', '0'); - $isPrimaryBright = $this->util->invertTextColor($this->themingDefaults->getColorPrimary()); + $isPrimaryBright = $this->util->invertTextColor($this->primaryColor); // The user removed the background if ($backgroundImage === BackgroundService::BACKGROUND_DISABLED) { return [ // Might be defined already by admin theming, needs to be overridden '--image-background' => 'none', - '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + '--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', ]; @@ -151,7 +151,7 @@ trait CommonThemeTrait { $cacheBuster = substr(sha1($user->getUID() . '_' . $currentVersion), 0, 8); return [ '--image-background' => "url('" . $this->urlGenerator->linkToRouteAbsolute('theming.userTheme.getBackground') . "?v=$cacheBuster')", - '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + '--color-background-plain' => $this->primaryColor, ]; } @@ -159,7 +159,7 @@ trait CommonThemeTrait { if ($backgroundImage === BackgroundService::BACKGROUND_DEFAULT && $adminBackgroundDeleted) { return [ // --image-background is not defined in this case - '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + '--color-background-plain' => $this->primaryColor, '--background-image-invert-if-bright' => $isPrimaryBright ? 'invert(100%)' : 'no', ]; } @@ -168,7 +168,7 @@ trait CommonThemeTrait { if (isset(BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage])) { return [ '--image-background' => "url('" . $this->urlGenerator->linkTo(Application::APP_ID, "img/background/$backgroundImage") . "')", - '--color-background-plain' => $this->themingDefaults->getColorPrimary(), + '--color-background-plain' => $this->primaryColor, '--background-image-invert-if-bright' => BackgroundService::SHIPPED_BACKGROUNDS[$backgroundImage]['theming'] ?? null === BackgroundService::THEMING_MODE_DARK ? 'invert(100%)' : 'no', ]; } diff --git a/core/css/header.scss b/core/css/header.scss index ca4a1a6331e..56e8ca3c151 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -174,12 +174,12 @@ > .header-menu:not(.user-menu) { // For general > .header-menu__trigger { - filter: var(--background-image-invert-if-bright) !important; + filter: var(--background-image-invert-if-bright); } // For assistant button > .trigger { - filter: var(--background-image-invert-if-bright) !important; + filter: var(--background-image-invert-if-bright); } // For unified search button diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue index 2213840a7c0..d6e5c9826dc 100644 --- a/core/src/components/AppMenu.vue +++ b/core/src/components/AppMenu.vue @@ -208,7 +208,6 @@ $header-icon-size: 20px; text-overflow: ellipsis; overflow: hidden; letter-spacing: -0.5px; - filter: var(--background-image-invert-if-bright); } &:hover, -- 2.39.5