Skip to content

Commit 263a691

Browse files
skjnldsvskjnldsv
authored
Merge pull request #38063 from nextcloud/fix/theming
2 parents a1ed1db + 4c71d8f commit 263a691

21 files changed

+70
-46
lines changed

‎apps/theming/css/default.css‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,12 @@
6363
--color-primary-light: #e5f0f5;
6464
--color-primary-light-text: #002a41;
6565
--color-primary-light-hover: #dbe5ea;
66-
--color-primary-text-dark: #ededed;
6766
--color-primary-element: #006aa3;
68-
--color-primary-element-default-hover: #329bd3;
69-
--color-primary-element-text: #ffffff;
7067
--color-primary-element-hover: #3287b5;
68+
--color-primary-element-text: #ffffff;
7169
--color-primary-element-light: #e5f0f5;
72-
--color-primary-element-light-text: #002a41;
7370
--color-primary-element-light-hover: #dbe5ea;
71+
--color-primary-element-light-text: #002a41;
7472
--color-primary-element-text-dark: #ededed;
7573
--gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
7674
--image-background-default: url('/apps/theming/img/background/kamil-porembinski-clouds.jpg');

‎apps/theming/lib/Themes/CommonThemeTrait.php‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ trait CommonThemeTrait {
3838
* will change in between.
3939
*/
4040
protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array {
41-
$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
42-
$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
43-
$colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor);
41+
$isBrightColor = $this->util->isBrightColor($colorMainBackground);
42+
$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor);
43+
$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
4444
$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
4545

4646
// primary related colours
@@ -61,16 +61,17 @@ protected function generatePrimaryVariables(string $colorMainBackground, string
6161
'--color-primary-light' => $colorPrimaryLight,
6262
'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
6363
'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
64-
'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
6564

6665
// used for buttons, inputs...
6766
'--color-primary-element' => $colorPrimaryElement,
68-
'--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60),
69-
'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
7067
'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
68+
'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
69+
70+
// used for hover/focus states
7171
'--color-primary-element-light' => $colorPrimaryElementLight,
72-
'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
7372
'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
73+
'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
74+
// mostly used for disabled states
7475
'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
7576

7677
// to use like this: background-image: var(--gradient-primary-background);
@@ -92,15 +93,6 @@ protected function generateGlobalBackgroundVariables(): array {
9293
$variables['--image-background-default'] = "url('" . $this->themingDefaults->getBackground() . "')";
9394
$variables['--color-background-plain'] = $this->defaultPrimaryColor;
9495

95-
// If primary as background has been request or if we have a custom primary colour
96-
// let's not define the background image
97-
if ($backgroundDeleted) {
98-
$variables['--color-background-plain'] = $this->defaultPrimaryColor;
99-
$variables['--image-background-plain'] = 'yes';
100-
// If no background image is set, we need to check against the shown primary colour
101-
$variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no';
102-
}
103-
10496
// Register image variables only if custom-defined
10597
foreach (ImageManager::SUPPORTED_IMAGE_KEYS as $image) {
10698
if ($this->imageManager->hasImage($image)) {
@@ -110,8 +102,18 @@ protected function generateGlobalBackgroundVariables(): array {
110102
}
111103
}
112104

105+
// If primary as background has been request or if we have a custom primary colour
106+
// let's not define the background image
107+
if ($backgroundDeleted) {
108+
$variables['--color-background-plain'] = $this->defaultPrimaryColor;
109+
$variables['--image-background-plain'] = 'yes';
110+
$variables['--image-background'] = 'no';
111+
// If no background image is set, we need to check against the shown primary colour
112+
$variables['--background-image-invert-if-bright'] = $isDefaultPrimaryBright ? 'invert(100%)' : 'no';
113+
}
114+
113115
if ($hasCustomLogoHeader) {
114-
$variables["--image-logoheader-custom"] = 'true';
116+
$variables['--image-logoheader-custom'] = 'true';
115117
}
116118

117119
return $variables;

‎apps/theming/lib/Util.php‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,20 @@ public function __construct(IConfig $config, IAppManager $appManager, IAppData $
5252
}
5353

5454
/**
55+
* Should we invert the text on this background color?
5556
* @param string $color rgb color value
5657
* @return bool
5758
*/
58-
public function invertTextColor($color) {
59+
public function invertTextColor(string $color): bool {
60+
return $this->isBrightColor($color);
61+
}
62+
63+
/**
64+
* Is this color too bright ?
65+
* @param string $color rgb color value
66+
* @return bool
67+
*/
68+
public function isBrightColor(string $color): bool {
5969
$l = $this->calculateLuma($color);
6070
if ($l > 0.6) {
6171
return true;
@@ -81,7 +91,7 @@ public function elementColor($color, bool $brightBackground = true) {
8191

8292
if (!$brightBackground && $luminance < 0.2) {
8393
// If the color is too dark in dark mode, we fall back to a brighter gray
84-
return '#555555';
94+
return '#8c8c8c';
8595
}
8696

8797
return $color;

‎apps/theming/src/components/BackgroundSettings.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,7 +329,7 @@ export default {
329329
330330
&__default {
331331
background-color: var(--color-primary-default);
332-
background-image: var(--image-background-default);
332+
background-image: var(--image-background-plain, var(--image-background-default));
333333
}
334334
335335
&__filepicker, &__default, &__color {

‎apps/theming/src/components/admin/ColorPickerField.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,22 @@ export default {
115115
width: 230px !important;
116116
border-radius: var(--border-radius-large) !important;
117117
background-color: var(--color-primary-default) !important;
118-
&:hover {
119-
background-color: var(--color-primary-element-default-hover) !important;
118+
119+
// emulated hover state because it would not make sense
120+
// to create a dedicated global variable for the color-primary-default
121+
&:hover::after {
122+
background-color: white;
123+
content: "";
124+
position: absolute;
125+
width: 100%;
126+
height: 100%;
127+
opacity: .2;
128+
filter: var(--primary-invert-if-bright);
129+
}
130+
131+
// Above the ::after
132+
&::v-deep * {
133+
z-index: 1;
120134
}
121135
}
122136
}

‎apps/theming/tests/CapabilitiesTest.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ public function dataGetCapabilities() {
111111
'color-text' => '#ffffff',
112112
'color-element' => '#000000',
113113
'color-element-bright' => '#000000',
114-
'color-element-dark' => '#555555',
114+
'color-element-dark' => '#8c8c8c',
115115
'logo' => 'http://localhost/logo5',
116116
'background' => '#000000',
117117
'background-plain' => true,
@@ -127,7 +127,7 @@ public function dataGetCapabilities() {
127127
'color-text' => '#ffffff',
128128
'color-element' => '#000000',
129129
'color-element-bright' => '#000000',
130-
'color-element-dark' => '#555555',
130+
'color-element-dark' => '#8c8c8c',
131131
'logo' => 'http://localhost/logo5',
132132
'background' => '#000000',
133133
'background-plain' => true,

‎apps/theming/tests/UtilTest.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ public function testElementColorDefault() {
112112

113113
public function testElementColorOnDarkBackground() {
114114
$elementColor = $this->util->elementColor("#000000", false);
115-
$this->assertEquals('#555555', $elementColor);
115+
$this->assertEquals('#8c8c8c', $elementColor);
116116
}
117117

118118
public function testElementColorOnBrightBackground() {

‎core/css/apps.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ html {
4646
body {
4747
// color-background-plain should always be defined. It is the primary user colour
4848
background-color: var(--color-background-plain, var(--color-main-background));
49-
// color-background-plain should always be defined. It is the primary user colour
49+
// image-background-plain means the admin has disabled the background image
5050
background-image: var(--image-background, var(--image-background-default));
5151
background-size: cover;
5252
background-position: center;

‎core/css/inputs.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/css/inputs.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)