Merge pull request #7705 from nextcloud/theming-calc-adjust

Adjust theming color calculations using sRGB luma

apps/theming/css/theming.scss

@@ -1,3 +1,12 @@
+/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */
+@function luma($c) {
+	$-local-red: red(rgba($c, 1.0));
+	$-local-green: green(rgba($c, 1.0));
+	$-local-blue: blue(rgba($c, 1.0));
+
+	@return (0.2126 * $-local-red  + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
+}
+
 .nc-theming-main-background {
 	background-color: $color-primary;
 }
@@ -10,7 +19,11 @@
 	color: $color-primary-text;
 }
 
-@if (lightness($color-primary) > 55) {
+@if (luma($color-primary) > 0.6) {
+	#appmenu img,
+	#appmenu image {
+		filter: invert(1);
+	}
 	.searchbox input[type="search"] {
 		background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
 	}
@@ -53,6 +66,11 @@
 			background-color: nc-darken($color-primary-element, 30%) !important;
 		}
 	}
+} @else {
+	  #appmenu img,
+	  #appmenu image {
+		  filter: none;
+	  }
 }
 
 /* Colorized svg images */
@@ -90,8 +108,8 @@ input.primary,
 	color: $color-primary-text;
 }
 
-@if (lightness($color-primary) > 50) {
-	#body-login #submit-icon.icon-confirm-white {
+@if (luma($color-primary) > 0.6) {
+	#body-login #submit-wrapper .icon-confirm-white {
 		background-image: url('../../../core/img/actions/confirm.svg');
 	}
 }

apps/theming/lib/Util.php

@@ -63,8 +63,8 @@ class Util {
 	 * @return bool
 	 */
 	public function invertTextColor($color) {
-		$l = $this->calculateLuminance($color);
-		if($l>0.55) {
+		$l = $this->calculateLuma($color);
+		if($l>0.6) {
 			return true;
 		} else {
 			return false;
@@ -90,6 +90,26 @@ class Util {
 	 * @return float
 	 */
 	public function calculateLuminance($color) {
+		list($red, $green, $blue) = $this->hexToRGB($color);
+		$compiler = new Compiler();
+		$hsl = $compiler->toHSL($red, $green, $blue);
+		return $hsl[3]/100;
+	}
+
+	/**
+	 * @param string $color rgb color value
+	 * @return float
+	 */
+	public function calculateLuma($color) {
+		list($red, $green, $blue) = $this->hexToRGB($color);
+		return (0.2126 * $red  + 0.7152 * $green + 0.0722 * $blue) / 255;
+	}
+
+	/**
+	 * @param string $color rgb color value
+	 * @return int[]
+	 */
+	public function hexToRGB($color) {
 		$hex = preg_replace("/[^0-9A-Fa-f]/", '', $color);
 		if (strlen($hex) === 3) {
 			$hex = $hex{0} . $hex{0} . $hex{1} . $hex{1} . $hex{2} . $hex{2};
@@ -97,12 +117,11 @@ class Util {
 		if (strlen($hex) !== 6) {
 			return 0;
 		}
-		$red = hexdec(substr($hex, 0, 2));
-		$green = hexdec(substr($hex, 2, 2));
-		$blue = hexdec(substr($hex, 4, 2));
-		$compiler = new Compiler();
-		$hsl = $compiler->toHSL($red, $green, $blue);
-		return $hsl[3]/100;
+		return [
+			hexdec(substr($hex, 0, 2)),
+			hexdec(substr($hex, 2, 2)),
+			hexdec(substr($hex, 4, 2))
+		];
 	}
 
 	/**

apps/theming/tests/UtilTest.php

@@ -53,14 +53,20 @@ class UtilTest extends TestCase {
 		$this->util = new Util($this->config, $this->appManager, $this->appData);
 	}
 
-	public function testInvertTextColorLight() {
-		$invert = $this->util->invertTextColor('#ffffff');
-		$this->assertEquals(true, $invert);
+	public function dataInvertTextColor() {
+		return [
+			['#ffffff', true],
+			['#000000', false],
+			['#0082C9', false],
+			['#ffff00', true],
+		];
 	}
-
-	public function testInvertTextColorDark() {
-		$invert = $this->util->invertTextColor('#000000');
-		$this->assertEquals(false, $invert);
+	/**
+	 * @dataProvider dataInvertTextColor
+	 */
+	public function testInvertTextColor($color, $expected) {
+		$invert = $this->util->invertTextColor($color);
+		$this->assertEquals($expected, $invert);
 	}
 
 	public function testCalculateLuminanceLight() {