fix(theming): The background is the primary color and must not be double inverted

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 7434710555babed5d2ea24f5159e5b7d53ce9fc6..dafa5370192108acccc1b8b68c9198b080aea8d2 100644 (file)
--- 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 b349af73a57f3d9fbd7bb49da19c02c7a7971d6f..1b948c7300a8a5ee13acd9fcc94e4e9eeb154af5 100644 (file)
--- 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 42ee6212cee8450f9a6ee26ffe435334f643bb2e..dd5b25e1a296047df70f19c1dd3e0770f2a202b1 100644 (file)
--- 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 507ccf5e34b3726bbaf0c9c88c0ef2443379f5f2..a9acb90adbd2544d792fa42ed145cc7a3185267b 100644 (file)
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -174,12 +174,12 @@
                > .header-menu:not(.user-menu):not(.unified-search-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);
                        }
                }
                > div,

diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index 2213840a7c0dfa40d0199b966eb38097dde094f2..d6e5c9826dceab168d307f16bf2c902da75556d4 100644 (file)
--- 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,