Switches the default logo color depending on the primary color

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

apps/theming/css/theming.scss

@@ -98,20 +98,21 @@
 	background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
 }
 
+#theming-preview-logo,
+#header .logo {
+	background-image: $image-logo;
+}
+
 /* override styles for login screen in guest.css */
 @if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
 	#theming-preview-logo,
 	#header .logo {
-		background-image: $image-logo;
 		background-size: contain;
 	}
+
 	#body-login #header .logo {
 		margin-bottom: 22px;
 	}
-} @else {
-	#theming-preview-logo {
-		background-image: $image-logo;
-	}
 }
 
 @if variable_exists('theming-background-mime') and $theming-background-mime != ''  {

apps/theming/lib/ImageManager.php

@@ -84,6 +84,8 @@ class ImageManager {
 			case 'logoheader':
 			case 'favicon':
 				return $this->urlGenerator->imagePath('core', 'logo.png') . '?v=' . $cacheBusterCounter;
+			case 'logo-blue':
+				return $this->urlGenerator->imagePath('core', 'logo-blue.png') . '?v=' . $cacheBusterCounter;
 			case 'background':
 				return $this->urlGenerator->imagePath('core', 'background.png') . '?v=' . $cacheBusterCounter;
 		}

apps/theming/lib/ThemingDefaults.php

@@ -275,7 +275,7 @@ class ThemingDefaults extends \OC_Defaults {
 			'theming-favicon-mime' => "'" . $this->config->getAppValue('theming', 'faviconMime') . "'"
 		];
 
-		$variables['image-logo'] = "url('".$this->imageManager->getImageUrl('logo')."')";
+		$variables['image-logo'] = "url('". $this->getLogoUrl() ."')";
 		$variables['image-logoheader'] = "'".$this->imageManager->getImageUrl('logoheader')."'";
 		$variables['image-favicon'] = "'".$this->imageManager->getImageUrl('favicon')."'";
 		$variables['image-login-background'] = "url('".$this->imageManager->getImageUrl('background')."')";
@@ -300,6 +300,24 @@ class ThemingDefaults extends \OC_Defaults {
 		return $variables;
 	}
 
+	/**
+	 * Returns the logo url.
+	 * If there is a custom logo, it just returns it.
+	 * For the default logo it returns the white or blue one depending on the color luminance.
+	 *
+	 * @return string
+	 */
+	private function getLogoUrl() {
+		$logoMime = $this->config->getAppValue('theming', 'logoMime');
+		$primaryColor = $this->getColorPrimary();
+		$luminance = $this->util->calculateLuminance($primaryColor);
+		if ($logoMime === '' & $luminance > 0.8) {
+			return $this->imageManager->getImageUrl('logo-blue');
+		} else {
+			return $this->imageManager->getImageUrl('logo');
+		}
+	}
+
 	/**
 	 * Check if the image should be replaced by the theming app
 	 * and return the new image location then

apps/theming/tests/ThemingDefaultsTest.php

@@ -632,6 +632,66 @@ class ThemingDefaultsTest extends TestCase {
 		$this->assertEquals(['foo'=>'bar'], $this->template->getScssVariables());
 	}
 
+	/**
+	 * Provides test data for the get logo scss variable test.
+	 *
+	 * @return array
+	 */
+	public function provideTestGetImageLogoScssVariableTestData(): array {
+		return [
+			// default logo
+			['', '#000000', 0.0, 'logo'],
+			['', '#cccccc', 0.8, 'logo'],
+			['', '#dddddd', 0.81, 'logo-blue'],
+			['', '#ffffff', 1.0, 'logo-blue'],
+
+			// custom logo
+			['image/png', '#000000', 0.0, 'logo'],
+			['image/png', '#cccccc', 0.8, 'logo'],
+			['image/png', '#dddddd', 0.81, 'logo'],
+			['image/png', '#ffffff', 1.0, 'logo'],
+		];
+	}
+
+	/**
+	 * Tests chat the logo url scss variable has the expected value
+	 * depending on color and custom logo presence.
+	 *
+	 * @dataProvider provideTestGetImageLogoScssVariableTestData
+	 * @param string $themingLogoMime The custom logo mime type
+	 * @param string $primaryColor The primary theme color
+	 * @param float $luminance The calculated luminance
+	 * @param string $expected The expected requested logo
+	 * @return void
+	 */
+	public function testGetImageLogoScssVariable(
+		string $themingLogoMime,
+		string $primaryColor,
+		float $luminance,
+		string $expected
+	) {
+		$this->config->expects($this->at(5))
+			->method('getAppValue')
+			->with('theming', 'logoMime')
+			->willReturn($themingLogoMime);
+		$this->config->expects($this->at(6))
+			->method('getAppValue')
+			->with('theming', 'color', $this->defaults->getColorPrimary())
+			->willReturn($primaryColor);
+
+		$this->util
+			->method('calculateLuminance')
+			->with($primaryColor)
+			->willReturn($luminance);
+
+		$this->imageManager->expects($this->at(0))
+			->method('getImageUrl')
+			->with($expected)
+			->willReturn('custom-logo?v=0');
+
+		$this->template->getScssVariables();
+	}
+
 	public function testGetScssVariables() {
 		$this->config->expects($this->at(0))->method('getAppValue')->with('theming', 'cachebuster', '0')->willReturn('0');
 		$this->config->expects($this->at(1))->method('getAppValue')->with('theming', 'logoMime', false)->willReturn('jpeg');
@@ -639,10 +699,13 @@ class ThemingDefaultsTest extends TestCase {
 		$this->config->expects($this->at(3))->method('getAppValue')->with('theming', 'logoheaderMime', false)->willReturn('jpeg');
 		$this->config->expects($this->at(4))->method('getAppValue')->with('theming', 'faviconMime', false)->willReturn('jpeg');
 
-		$this->config->expects($this->at(5))->method('getAppValue')->with('theming', 'color', null)->willReturn($this->defaults->getColorPrimary());
+		$this->config->expects($this->at(5))->method('getAppValue')->with('theming', 'logoMime', false)->willReturn('jpeg');
 		$this->config->expects($this->at(6))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
-		$this->config->expects($this->at(7))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
+
+		$this->config->expects($this->at(7))->method('getAppValue')->with('theming', 'color', null)->willReturn($this->defaults->getColorPrimary());
 		$this->config->expects($this->at(8))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
+		$this->config->expects($this->at(9))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
+		$this->config->expects($this->at(10))->method('getAppValue')->with('theming', 'color', $this->defaults->getColorPrimary())->willReturn($this->defaults->getColorPrimary());
 
 		$this->util->expects($this->any())->method('invertTextColor')->with($this->defaults->getColorPrimary())->willReturn(false);
 		$this->util->expects($this->any())->method('elementColor')->with($this->defaults->getColorPrimary())->willReturn('#aaaaaa');

core/img/logo-blue.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   height="128"
+   width="256"
+   viewBox="0 0 256 128"
+   id="svg10"
+   sodipodi:docname="logo-blue.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="1.4296875"
+     inkscape:cx="128"
+     inkscape:cy="64"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <g
+     stroke="#fff"
+     stroke-width="22"
+     fill="none"
+     id="g8"
+     style="stroke:#0082c9;stroke-opacity:1">
+    <circle
+       cy="64"
+       cx="40"
+       r="26"
+       id="circle2"
+       style="stroke:#0082c9;stroke-opacity:1" />
+    <circle
+       cy="64"
+       cx="216"
+       r="26"
+       id="circle4"
+       style="stroke:#0082c9;stroke-opacity:1" />
+    <circle
+       cy="64"
+       cx="128"
+       r="46"
+       id="circle6"
+       style="stroke:#0082c9;stroke-opacity:1" />
+  </g>
+</svg>