archive
/
nextcloud
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

Browse Source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/43319/head
Ferdinand Thiessen 4 months ago
parent 2f740cdf5b
commit 0f2b9b09ec
No known key found for this signature in database
GPG Key ID: 45FAE7268762B400
5 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File

2
apps/theming/css/default.css
Unescape Escape View File

@ -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;
}

12
apps/theming/lib/Service/BackgroundService.php
Unescape Escape View File

@ -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',
],
];

18
apps/theming/lib/Themes/CommonThemeTrait.php
Unescape Escape View File

@ -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',
];
}

4
core/css/header.scss
Unescape Escape View File

@ -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,

1
core/src/components/AppMenu.vue
Unescape Escape View File

@ -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,

Write Preview
Loading…
Cancel
Save