Precalculate the primary element color for dark mode too

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

2 files changed, 15 insertions, 4 deletions

diff --git a/apps/theming/lib/Capabilities.php b/apps/theming/lib/Capabilities.php
index 56a331482bb..1c191e9ba80 100644
--- 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 d3c0043b2a3..5df132f382c 100644
--- 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;
 	}