Precalculate the primary element color for dark mode too

Signed-off-by: Joas Schilling <coding@schilljs.com>

diff --git a/apps/theming/lib/Capabilities.php b/apps/theming/lib/Capabilities.php
index 56a331482bbe486dd179b0dade20c50fe5eb4fb2..1c191e9ba805fce50a221b22dba7ea29ce364eb5 100644 (file)
--- a/apps/theming/lib/Capabilities.php
+++ b/apps/theming/lib/Capabilities.php
@@ -78,6 +78,8 @@ class Capabilities implements IPublicCapability {
                                '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() :

diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php
index d3c0043b2a35526e0b68b7324f1e9ebf7347c871..5df132f382c25008dbf0a1db5ab843f475556d64 100644 (file)
--- a/apps/theming/lib/Util.php
+++ b/apps/theming/lib/Util.php
@@ -76,14 +76,23 @@ class Util {
        /**
         * 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;
        }
 

diff --git a/apps/theming/tests/CapabilitiesTest.php b/apps/theming/tests/CapabilitiesTest.php
index 60cebb37cf188c15483bbdaac75ed91c65a77edb..216672a881e6a3b8640423082a4e61e0466f2cec 100644 (file)
--- a/apps/theming/tests/CapabilitiesTest.php
+++ b/apps/theming/tests/CapabilitiesTest.php
@@ -78,6 +78,8 @@ class CapabilitiesTest extends TestCase {
                                '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 @@ class CapabilitiesTest extends TestCase {
                                '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 @@ class CapabilitiesTest extends TestCase {
                                '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 @@ class CapabilitiesTest extends TestCase {
                                '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 @@ class CapabilitiesTest extends TestCase {
                        ->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')

diff --git a/apps/theming/tests/UtilTest.php b/apps/theming/tests/UtilTest.php
index 6f7e195e468abaee8606d20c59678ebaf4bd3cd6..10013e7d61cd42c7324b819297c55cc330e85d74 100644 (file)
--- a/apps/theming/tests/UtilTest.php
+++ b/apps/theming/tests/UtilTest.php
@@ -106,6 +106,11 @@ class UtilTest extends TestCase {
                $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);