Merge pull request #21594 from nextcloud/bugfix/21586/precalculate-primary-element-color-for-dark-mode-too

Precalculate the primary element color for dark mode too

Author: nickvergessen

apps/theming/lib/Capabilities.php

@@ -78,6 +78,8 @@ public function getCapabilities() {
 				'color' => $color,
 				'color-text' => $this->theming->getTextColorPrimary(),
 				'color-element' => $this->util->elementColor($color),
+				'color-element-bright' => $this->util->elementColor($color),
+				'color-element-dark' => $this->util->elementColor($color, false),
 				'logo' => $this->url->getAbsoluteURL($this->theming->getLogo()),
 				'background' => $backgroundLogo === 'backgroundColor' || ($backgroundLogo === false && $this->theming->getColorPrimary() !== '#0082c9') ?
 					$this->theming->getColorPrimary() :

apps/theming/lib/Util.php

@@ -76,14 +76,23 @@ public function invertTextColor($color) {
 	/**
 	 * get color for on-page elements:
 	 * theme color by default, grey if theme color is to bright
-	 * @param $color
+	 * @param string $color
+	 * @param bool $brightBackground
 	 * @return string
 	 */
-	public function elementColor($color) {
-		$l = $this->calculateLuminance($color);
-		if ($l>0.8) {
+	public function elementColor($color, bool $brightBackground = true) {
+		$luminance = $this->calculateLuminance($color);
+
+		if ($brightBackground && $luminance > 0.8) {
+			// If the color is too bright in bright mode, we fall back to a darker gray
 			return '#aaaaaa';
 		}
+
+		if (!$brightBackground && $luminance < 0.2) {
+			// If the color is too dark in dark mode, we fall back to a brighter gray
+			return '#555555';
+		}
+
 		return $color;
 	}
 

apps/theming/tests/CapabilitiesTest.php

@@ -78,6 +78,8 @@ public function dataGetCapabilities() {
 				'color' => '#FFFFFF',
 				'color-text' => '#000000',
 				'color-element' => '#aaaaaa',
+				'color-element-bright' => '#aaaaaa',
+				'color-element-dark' => '#FFFFFF',
 				'logo' => 'http://absolute/logo',
 				'background' => 'http://absolute/background',
 				'background-plain' => false,
@@ -92,6 +94,8 @@ public function dataGetCapabilities() {
 				'color' => '#01e4a0',
 				'color-text' => '#ffffff',
 				'color-element' => '#01e4a0',
+				'color-element-bright' => '#01e4a0',
+				'color-element-dark' => '#01e4a0',
 				'logo' => 'http://localhost/logo5',
 				'background' => 'http://localhost/background6',
 				'background-plain' => false,
@@ -106,6 +110,8 @@ public function dataGetCapabilities() {
 				'color' => '#000000',
 				'color-text' => '#ffffff',
 				'color-element' => '#000000',
+				'color-element-bright' => '#000000',
+				'color-element-dark' => '#555555',
 				'logo' => 'http://localhost/logo5',
 				'background' => '#000000',
 				'background-plain' => true,
@@ -120,6 +126,8 @@ public function dataGetCapabilities() {
 				'color' => '#000000',
 				'color-text' => '#ffffff',
 				'color-element' => '#000000',
+				'color-element-bright' => '#000000',
+				'color-element-dark' => '#555555',
 				'logo' => 'http://localhost/logo5',
 				'background' => '#000000',
 				'background-plain' => true,
@@ -167,10 +175,12 @@ public function testGetCapabilities($name, $url, $slogan, $color, $textColor, $l
 			->willReturn($textColor);
 
 		$util = new Util($this->config, $this->createMock(IAppManager::class), $this->createMock(IAppData::class));
-		$this->util->expects($this->once())
+		$this->util->expects($this->exactly(3))
 			->method('elementColor')
 			->with($color)
-			->willReturn($util->elementColor($color));
+			->willReturnCallback(static function (string $color, bool $brightBackground = true) use ($util) {
+				return $util->elementColor($color, $brightBackground);
+			});
 
 		$this->util->expects($this->once())
 			->method('isBackgroundThemed')

apps/theming/tests/UtilTest.php

@@ -106,6 +106,11 @@ public function testElementColorDefault() {
 		$this->assertEquals('#000000', $elementColor);
 	}
 
+	public function testElementColorOnDarkBackground() {
+		$elementColor = $this->util->elementColor("#000000", false);
+		$this->assertEquals('#555555', $elementColor);
+	}
+
 	public function testElementColorOnBrightBackground() {
 		$elementColor = $this->util->elementColor('#ffffff');
 		$this->assertEquals('#aaaaaa', $elementColor);