Svg color api

apps/accessibility/css/themedark.scss

@@ -37,12 +37,16 @@ $color-border-dark: lighten($color-main-background, 14%);
 		}
 	}
 }
-.federation-menu .icon-federation-menu {
-	filter: invert(100%);
-}
 .bubble,
 .app-navigation-entry-menu,
 .popovermenu,
 #header .menu {
 	border: 1px solid var(--color-border);
 }
+
+// since svg icons are inverted, revert to white for the header
+.header-right > * {
+	[class^='icon-'], [class*=' icon-'] {
+		filter: invert(100%);
+	}
+}

apps/accessibility/lib/Controller/AccessibilityController.php

@@ -36,6 +36,7 @@
 use OCP\IURLGenerator;
 use OCP\IUserManager;
 use OCP\IUserSession;
+use OC\Template\IconsCacher;
 
 class AccessibilityController extends Controller {
 
@@ -66,6 +67,9 @@ class AccessibilityController extends Controller {
 	/** @var IAppManager */
 	private $appManager;
 
+	/** @var IconsCacher */
+	protected $iconsCacher;
+
 	/**
 	 * Account constructor.
 	 *
@@ -87,7 +91,8 @@ public function __construct(string $appName,
 								IURLGenerator $urlGenerator,
 								ITimeFactory $timeFactory,
 								IUserSession $userSession,
-								IAppManager $appManager) {
+								IAppManager $appManager,
+								IconsCacher $iconsCacher) {
 		parent::__construct($appName, $request);
 		$this->appName      = $appName;
 		$this->config       = $config;
@@ -97,6 +102,7 @@ public function __construct(string $appName,
 		$this->timeFactory  = $timeFactory;
 		$this->userSession  = $userSession;
 		$this->appManager   = $appManager;
+		$this->iconsCacher  = $iconsCacher;
 
 		$this->serverRoot = \OC::$SERVERROOT;
 		$this->appRoot    = $this->appManager->getAppPath($this->appName);
@@ -147,7 +153,12 @@ public function getCss(): DataDisplayResponse {
 
 		// Rebase all urls
 		$appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT));
-		$css = $this->rebaseUrls($css, $appWebRoot . '/css');
+		$css        = $this->rebaseUrls($css, $appWebRoot . '/css');
+
+		if (in_array('themedark', $userValues) && $this->iconsCacher->getCachedCSS() && $this->iconsCacher->getCachedCSS()->getSize() > 0) {
+			$iconsCss = $this->invertSvgIconsColor($this->iconsCacher->getCachedCSS()->getContent());
+			$css = $css . $iconsCss;
+		}
 
 		$response = new DataDisplayResponse($css, Http::STATUS_OK, ['Content-Type' => 'text/css']);
 
@@ -199,4 +210,14 @@ private function rebaseUrls(string $css, string $webDir): string {
 
 		return preg_replace($re, $subst, $css);
 	}
+
+	/**
+	 * Remove all matches from the $rule regex
+	 *
+	 * @param string $css string to parse
+	 * @return string
+	 */
+	private function invertSvgIconsColor(string $css) {
+		return str_replace(['/000', '/fff', '/***'], ['/***', '/000', '/fff'], $css);
+	}
 }

apps/dav/lib/CalDAV/Activity/Filter/Calendar.php

@@ -72,7 +72,7 @@ public function getPriority() {
 	 * @since 11.0.0
 	 */
 	public function getIcon() {
-		return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/calendar-dark.svg'));
+		return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/calendar.svg'));
 	}
 
 	/**

apps/dav/tests/unit/CalDAV/Activity/Filter/CalendarTest.php

@@ -55,7 +55,7 @@ protected function setUp() {
 	public function testGetIcon() {
 		$this->url->expects($this->once())
 			->method('imagePath')
-			->with('core', 'places/calendar-dark.svg')
+			->with('core', 'places/calendar.svg')
 			->willReturn('path-to-icon');
 
 		$this->url->expects($this->once())

apps/encryption/css/settings-personal.css → apps/encryption/css/settings-personal.scss

@@ -11,5 +11,5 @@
 
 /* icons for sidebar */
 .nav-icon-basic-encryption-module {
-	background-image: url('../img/app.svg?v=1');
+	@include icon-color('app', 'encryption', $color-black);
 }

apps/files/css/files.scss

@@ -84,30 +84,29 @@
 
 /* icons for sidebar */
 .nav-icon-files {
-	background-image: url('../img/folder.svg?v=1');
+	@include icon-color('folder', 'files', $color-black);
 }
 .nav-icon-recent {
-	background-image: url('../img/recent.svg?v=1');
+	@include icon-color('recent', 'files', $color-black);
 }
 .nav-icon-favorites {
-	background-image: url('../img/star.svg?v=1');
+	@include icon-color('star-dark', 'files', $color-black, 2, true);
 }
 .nav-icon-sharingin,
-.nav-icon-sharingout,
-.nav-icon-shareoverview {
-	background-image: url('../img/share.svg?v=1');
+.nav-icon-sharingout {
+	@include icon-color('share', 'files', $color-black);
 }
 .nav-icon-sharinglinks {
-	background-image: url('../img/public.svg?v=1');
+	@include icon-color('public', 'files', $color-black);
 }
 .nav-icon-extstoragemounts {
-	background-image: url('../img/external.svg?v=1');
+	@include icon-color('external', 'files', $color-black);
 }
 .nav-icon-trashbin {
-	background-image: url('../img/delete.svg?v=1');
+	@include icon-color('delete', 'files', $color-black);
 }
 .nav-icon-deletedshares {
-	background-image: url('../img/unshare.svg?v=1');
+	@include icon-color('unshare', 'files', $color-black);
 }
 
 #app-navigation .nav-files a.nav-icon-files {
@@ -668,7 +667,7 @@ table.dragshadow td.size {
 		background-image: none;
 	}
 	& .icon-starred {
-		background-image: url('../../../core/img/actions/starred.svg?v=1');
+		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
 	}
 }
 

apps/files/lib/Activity/Filter/FileChanges.php

@@ -74,7 +74,7 @@ public function getPriority() {
 	 * @since 11.0.0
 	 */
 	public function getIcon() {
-		return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files-dark.svg'));
+		return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files.svg'));
 	}
 
 	/**

apps/files_external/css/settings.scss

@@ -122,5 +122,5 @@ td.mountPoint, td.backend { width:160px; }
 }
 
 .nav-icon-external-storage {
-	background-image: url('../img/app-dark.svg?v=1');
+	@include icon-color('app-dark', 'files_external', $color-black);
 }

apps/systemtags/css/systemtagsfilelist.css → apps/systemtags/css/systemtagsfilelist.scss

@@ -13,7 +13,7 @@
 }
 
 .nav-icon-systemtagsfilter {
-	background-image: url('../img/tag.svg');
+	@include icon-color('tag', 'systemtags', $color-black);
 }
 
 #app-sidebar .mainFileInfoView .tag-label {

autotest-js.sh

@@ -28,7 +28,7 @@ for SCSSFILE in core/css/*.scss
 do
     FILE=$(basename $SCSSFILE)
     FILENAME="${FILE%.*}"
-    printf "@import 'variables.scss'; @import '${FILE}';" | ./build/bin/node-sass --include-path core/css/ > tests/css/${FILE}.css
+    printf "\$webroot:''; @import 'functions.scss'; @import 'variables.scss'; @import '${FILE}';" | ./build/bin/node-sass --include-path core/css/ > tests/css/${FILE}.css
 done
 
 KARMA="$PREFIX/node_modules/karma/bin/karma"

core/Controller/JsController.php

@@ -57,8 +57,8 @@ public function __construct($appName, IRequest $request, Factory $appDataFactory
 	 * @PublicPage
 	 * @NoCSRFRequired
 	 *
-	 * @param string $fileName css filename with extension
-	 * @param string $appName css folder name
+	 * @param string $fileName js filename with extension
+	 * @param string $appName js folder name
 	 * @return FileDisplayResponse|NotFoundResponse
 	 */
 	public function getJs(string $fileName, string $appName): Response {

core/Controller/SvgController.php

@@ -0,0 +1,144 @@
+<?php
+declare (strict_types = 1);
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ ([email protected])
+ *
+ * @author John Molakvoæ (skjnldsv) <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OC\Core\Controller;
+
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\DataDisplayResponse;
+use OCP\AppFramework\Http\NotFoundResponse;
+use OCP\AppFramework\Utility\ITimeFactory;
+use OCP\Files\NotFoundException;
+use OCP\App\IAppManager;
+use OCP\IRequest;
+
+class SvgController extends Controller {
+
+	/** @var string */
+	protected $serverRoot;
+
+	/** @var ITimeFactory */
+	protected $timeFactory;
+
+	/** @var IAppManager */
+	protected $appManager;
+
+	public function __construct(string $appName,
+								IRequest $request,
+								ITimeFactory $timeFactory,
+								IAppManager $appManager) {
+		parent::__construct($appName, $request);
+
+		$this->serverRoot  = \OC::$SERVERROOT;
+		$this->timeFactory = $timeFactory;
+		$this->appManager = $appManager;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * Generate svg from filename with the requested color
+	 *
+	 * @param string $folder
+	 * @param string $fileName
+	 * @param string $color
+	 * @return DataDisplayResponse|NotFoundResponse
+	 */
+	public function getSvgFromCore(string $folder, string $fileName, string $color = 'ffffff') {
+		$path = $this->serverRoot . "/core/img/$folder/$fileName.svg";
+		return $this->getSvg($path, $color, $fileName);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * Generate svg from filename with the requested color
+	 *
+	 * @param string $app
+	 * @param string $fileName
+	 * @param string $color
+	 * @return DataDisplayResponse|NotFoundResponse
+	 */
+	public function getSvgFromApp(string $app, string $fileName, string $color = 'ffffff') {
+
+		if ($app === 'settings') {
+			$path = $this->serverRoot . "/settings/img/$fileName.svg";
+			return $this->getSvg($path, $color, $fileName);
+		}
+
+		$appRootPath = $this->appManager->getAppPath($app);
+		$appPath = substr($appRootPath, strlen($this->serverRoot));
+
+		if (!$appPath) {
+			return new NotFoundResponse();
+		}
+		$path = $this->serverRoot . $appPath ."/img/$fileName.svg";
+		return $this->getSvg($path, $color, $fileName);
+	}
+
+
+	/**
+	 * Generate svg from filename with the requested color
+	 *
+	 * @param string $path
+	 * @param string $color
+	 * @return DataDisplayResponse|NotFoundResponse
+	 */
+	private function getSvg(string $path, string $color, string $fileName) {
+		if (!file_exists($path)) {
+			return new NotFoundResponse();
+		}
+
+		$svg = file_get_contents($path);
+
+		if (is_null($svg)) {
+			return new NotFoundResponse();
+		}
+
+		// add fill (fill is not present on black elements)
+		$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';
+
+		$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);
+
+		// replace any fill or stroke colors
+		$svg = preg_replace('/stroke="#([a-z0-9]{3,6})"/mi', 'stroke="#' . $color . '"', $svg);
+		$svg = preg_replace('/fill="#([a-z0-9]{3,6})"/mi', 'fill="#' . $color . '"', $svg);
+
+		$response = new DataDisplayResponse($svg, Http::STATUS_OK, ['Content-Type' => 'image/svg+xml']);
+
+		// Set cache control
+		$ttl = 31536000;
+		$response->cacheFor($ttl);
+		$response->addHeader('Content-Disposition', 'inline; filename="' . $fileName . '.svg"');
+		$expires = new \DateTime();
+		$expires->setTimestamp($this->timeFactory->getTime());
+		$expires->add(new \DateInterval('PT' . $ttl . 'S'));
+		$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
+		$response->addHeader('Pragma', 'cache');
+
+		return $response;
+	}
+}

core/css/apps.scss

@@ -693,7 +693,7 @@ kbd {
 	padding: 0;
 	margin: 0;
 	background-color: var(--color-main-background);
-	background-image: url('../img/actions/settings-dark.svg?v=1');
+	@include icon-color('settings-dark', 'actions', $color-black, 1, true);
 	background-position: 14px center;
 	background-repeat: no-repeat;
 	box-shadow: none;