Implement scss variable injection by OC_Defaults

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Add Scss variables to example theme and theming app

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Use SCSSCacher to build theming css

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Update theming.scss

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Code cleanup

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Fix tests

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Inject SCSSCacher for easier testing

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Fix typehint

Signed-off-by: Lukas Reschke <lukas@statuscode.ch>

Generate absolute URLs

Signed-off-by: Lukas Reschke <lukas@statuscode.ch>

Fix tests to always use absolute urls for theming images

Signed-off-by: Julius Härtl <jus@bitgrid.net>

MailheaderColor -> ColorPrimary

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

apps/theming/css/theming.scss

@@ -0,0 +1,64 @@
+.nc-theming-main-background {
+	background-color: $color-primary;
+}
+
+.nc-theming-main-text {
+	color: $color-primary-text;
+}
+
+.nc-theming-contrast {
+	color: $color-primary-text;
+}
+
+/* invert header icons on bright background */
+@if (lightness($color-primary) > 50) {
+	#header .icon-caret {
+		background-image: url(../../../core/img/actions/caret-dark.svg);
+	}
+	.searchbox input[type="search"] {
+		background: transparent url(../../../core/img/actions/search.svg) no-repeat 6px center;
+	}
+	#appmenu li a img {
+		-webkit-filter: invert(1);
+		filter: invert(1);
+		filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
+	}
+}
+
+/* Colorized svg images */
+.icon-file, .icon-filetype-text {
+	background-image: url(../img/core/filetypes/text.svg?v=#{$theming-cachebuster});
+}
+
+.icon-folder, .icon-filetype-folder {
+	background-image: url(./img/core/filetypes/folder.svg?v=#{$theming-cachebuster});
+}
+
+.icon-filetype-folder-drag-accept {
+	background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
+}
+
+/* override styles for login screen in guest.css */
+#header .logo,
+#header .logo-icon {
+	background-size: contain;
+	background-image: url(#{$image-logo}?v=#{$theming-cachebuster});
+}
+
+#body-login,
+#firstrunwizard .firstrunwizard-header {
+	background-image: url(#{$image-login-background}?v=#{$theming-cachebuster});
+	background-color: $color-primary;
+}
+
+input.primary {
+	background-color: nc-lighten($color-primary, .9);
+	border: 1px solid $color-primary;
+	color: $color-primary-text;
+}
+
+@if (lightness($color-primary) > 50) {
+	#body-login input.login {
+		background-image: url(../../../core/img/actions/confirm.svg);
+	}
+}

apps/theming/lib/Controller/ThemingController.php

@@ -27,6 +27,8 @@
 
 namespace OCA\Theming\Controller;
 
+use OC\Files\AppData\Factory;
+use OC\Template\SCSSCacher;
 use OCA\Theming\ThemingDefaults;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http;
@@ -40,9 +42,11 @@ use OCP\Files\IAppData;
 use OCP\Files\NotFoundException;
 use OCP\IConfig;
 use OCP\IL10N;
+use OCP\ILogger;
 use OCP\IRequest;
 use OCA\Theming\Util;
 use OCP\ITempManager;
+use OCP\IURLGenerator;
 
 /**
  * Class ThemingController
@@ -53,19 +57,21 @@ use OCP\ITempManager;
  */
 class ThemingController extends Controller {
 	/** @var ThemingDefaults */
-	private $template;
+	private $themingDefaults;
 	/** @var Util */
 	private $util;
 	/** @var ITimeFactory */
 	private $timeFactory;
 	/** @var IL10N */
-	private $l;
+	private $l10n;
 	/** @var IConfig */
 	private $config;
 	/** @var ITempManager */
 	private $tempManager;
 	/** @var IAppData */
 	private $appData;
+	/** @var SCSSCacher */
+	private $scssCacher;
 
 	/**
 	 * ThemingController constructor.
@@ -73,33 +79,36 @@ class ThemingController extends Controller {
 	 * @param string $appName
 	 * @param IRequest $request
 	 * @param IConfig $config
-	 * @param ThemingDefaults $template
+	 * @param ThemingDefaults $themingDefaults
 	 * @param Util $util
 	 * @param ITimeFactory $timeFactory
 	 * @param IL10N $l
 	 * @param ITempManager $tempManager
 	 * @param IAppData $appData
+	 * @param SCSSCacher $scssCacher
 	 */
 	public function __construct(
 		$appName,
 		IRequest $request,
 		IConfig $config,
-		ThemingDefaults $template,
+		ThemingDefaults $themingDefaults,
 		Util $util,
 		ITimeFactory $timeFactory,
 		IL10N $l,
 		ITempManager $tempManager,
-		IAppData $appData
+		IAppData $appData,
+		SCSSCacher $scssCacher
 	) {
 		parent::__construct($appName, $request);
 
-		$this->template = $template;
+		$this->themingDefaults = $themingDefaults;
 		$this->util = $util;
 		$this->timeFactory = $timeFactory;
-		$this->l = $l;
+		$this->l10n = $l;
 		$this->config = $config;
 		$this->tempManager = $tempManager;
 		$this->appData = $appData;
+		$this->scssCacher = $scssCacher;
 	}
 
 	/**
@@ -115,7 +124,7 @@ class ThemingController extends Controller {
 				if (strlen($value) > 250) {
 					return new DataResponse([
 						'data' => [
-							'message' => $this->l->t('The given name is too long'),
+							'message' => $this->l10n->t('The given name is too long'),
 						],
 						'status' => 'error'
 					]);
@@ -125,7 +134,7 @@ class ThemingController extends Controller {
 				if (strlen($value) > 500) {
 					return new DataResponse([
 						'data' => [
-							'message' => $this->l->t('The given web address is too long'),
+							'message' => $this->l10n->t('The given web address is too long'),
 						],
 						'status' => 'error'
 					]);
@@ -135,7 +144,7 @@ class ThemingController extends Controller {
 				if (strlen($value) > 500) {
 					return new DataResponse([
 						'data' => [
-							'message' => $this->l->t('The given slogan is too long'),
+							'message' => $this->l10n->t('The given slogan is too long'),
 						],
 						'status' => 'error'
 					]);
@@ -145,7 +154,7 @@ class ThemingController extends Controller {
 				if (!preg_match('/^\#([0-9a-f]{3}|[0-9a-f]{6})$/i', $value)) {
 					return new DataResponse([
 						'data' => [
-							'message' => $this->l->t('The given color is invalid'),
+							'message' => $this->l10n->t('The given color is invalid'),
 						],
 						'status' => 'error'
 					]);
@@ -153,12 +162,12 @@ class ThemingController extends Controller {
 				break;
 		}
 
-		$this->template->set($setting, $value);
+		$this->themingDefaults->set($setting, $value);
 		return new DataResponse(
 			[
 				'data' =>
 					[
-						'message' => $this->l->t('Saved')
+						'message' => $this->l10n->t('Saved')
 					],
 				'status' => 'success'
 			]
@@ -177,7 +186,7 @@ class ThemingController extends Controller {
 			return new DataResponse(
 				[
 					'data' => [
-						'message' => $this->l->t('No file uploaded')
+						'message' => $this->l10n->t('No file uploaded')
 					]
 				],
 				Http::STATUS_UNPROCESSABLE_ENTITY
@@ -191,20 +200,20 @@ class ThemingController extends Controller {
 			$folder = $this->appData->newFolder('images');
 		}
 
-		if(!empty($newLogo)) {
+		if (!empty($newLogo)) {
 			$target = $folder->newFile('logo');
 			$target->putContent(file_get_contents($newLogo['tmp_name'], 'r'));
-			$this->template->set('logoMime', $newLogo['type']);
+			$this->themingDefaults->set('logoMime', $newLogo['type']);
 			$name = $newLogo['name'];
 		}
-		if(!empty($newBackgroundLogo)) {
+		if (!empty($newBackgroundLogo)) {
 			$target = $folder->newFile('background');
 			$image = @imagecreatefromstring(file_get_contents($newBackgroundLogo['tmp_name'], 'r'));
-			if($image === false) {
+			if ($image === false) {
 				return new DataResponse(
 					[
 						'data' => [
-							'message' => $this->l->t('Unsupported image type'),
+							'message' => $this->l10n->t('Unsupported image type'),
 						],
 						'status' => 'failure',
 					],
@@ -215,10 +224,10 @@ class ThemingController extends Controller {
 			// Optimize the image since some people may upload images that will be
 			// either to big or are not progressive rendering.
 			$tmpFile = $this->tempManager->getTemporaryFile();
-			if(function_exists('imagescale')) {
+			if (function_exists('imagescale')) {
 				// FIXME: Once PHP 5.5.0 is a requirement the above check can be removed
 				// Workaround for https://bugs.php.net/bug.php?id=65171
-				$newHeight = imagesy($image)/(imagesx($image)/1920);
+				$newHeight = imagesy($image) / (imagesx($image) / 1920);
 				$image = imagescale($image, 1920, $newHeight);
 			}
 			imageinterlace($image, 1);
@@ -226,7 +235,7 @@ class ThemingController extends Controller {
 			imagedestroy($image);
 
 			$target->putContent(file_get_contents($tmpFile, 'r'));
-			$this->template->set('backgroundMime', $newBackgroundLogo['type']);
+			$this->themingDefaults->set('backgroundMime', $newBackgroundLogo['type']);
 			$name = $newBackgroundLogo['name'];
 		}
 
@@ -235,7 +244,7 @@ class ThemingController extends Controller {
 				'data' =>
 					[
 						'name' => $name,
-						'message' => $this->l->t('Saved')
+						'message' => $this->l10n->t('Saved')
 					],
 				'status' => 'success'
 			]
@@ -249,13 +258,13 @@ class ThemingController extends Controller {
 	 * @return DataResponse
 	 */
 	public function undo($setting) {
-		$value = $this->template->undo($setting);
+		$value = $this->themingDefaults->undo($setting);
 		return new DataResponse(
 			[
 				'data' =>
 					[
 						'value' => $value,
-						'message' => $this->l->t('Saved')
+						'message' => $this->l10n->t('Saved')
 					],
 				'status' => 'success'
 			]
@@ -316,128 +325,34 @@ class ThemingController extends Controller {
 	 * @NoCSRFRequired
 	 * @PublicPage
 	 *
-	 * @return DataDownloadResponse
+	 * @return FileDisplayResponse|NotFoundResponse
 	 */
 	public function getStylesheet() {
-		$cacheBusterValue = $this->config->getAppValue('theming', 'cachebuster', '0');
+		$appPath = substr(\OC::$server->getAppManager()->getAppPath('theming'), strlen(\OC::$SERVERROOT) + 1);
-		$responseCss = '';
+		/* SCSSCacher is required here
-		$color = $this->config->getAppValue($this->appName, 'color');
+		 * We cannot rely on automatic caching done by \OC_Util::addStyle,
-		$elementColor = $this->util->elementColor($color);
+		 * since we need to add the cacheBuster value to the url
-
+		 */
-		if($this->util->invertTextColor($color)) {
+		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, $appPath . '/css/theming.scss', 'theming');
-			$textColor = '#000000';
+		if(!$cssCached) {
-		} else {
+			return new NotFoundResponse();
-			$textColor = '#ffffff';
 		}
 
-		if($color !== '') {
+		try {
-			$responseCss .= sprintf(
+			$cssFile = $this->scssCacher->getCachedCSS('theming', 'theming.css');
-				'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
+			$response = new FileDisplayResponse($cssFile, Http::STATUS_OK, ['Content-Type' => 'text/css']);
-				$color
+			$response->cacheFor(86400);
-			);
+			$expires = new \DateTime();
-			$responseCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
+			$expires->setTimestamp($this->timeFactory->getTime());
-				'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
+			$expires->add(new \DateInterval('PT24H'));
-				'background-color: %s; background-position: center center; background-size:contain;' .
+			$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
-				'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
-				"}\n",
-				\OC::$WEBROOT,
-				$elementColor
-			);
-			$responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
-				'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($elementColor).'\');' .
-				"}\n";
-			$responseCss .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
-				'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {' .
-				'border: 1px solid '.$elementColor.';'.
-				'background-color: '.$elementColor.';'.
-				'color: ' . $textColor . ';'.
-				"}\n" .
-				'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
-				'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
-				'border: 1px solid '.$elementColor.';'.
-				'background-color: '.$elementColor.';'.
-				'color: ' . $textColor . ';'.
-				"}\n" .
-				'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
-				'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
-				'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
-				'border: 1px solid '.$elementColor.';'.
-				'background-color: '.$elementColor.';'.
-				'opacity: 0.4;' .
-				'color: '.$textColor.';'.
-				"}\n";
-			$responseCss .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
-			$responseCss .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
-				'border: 1px solid ' . $color . ';' .
-				'color: ' . $elementColor . ';' .
-				"}\n";
-			$responseCss .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
-				'color: ' . $elementColor . ';' .
-				"}\n";
-			$responseCss .= '
-				#firstrunwizard .firstrunwizard-header {
-					background-color: ' . $color . ';
-				}
-				#firstrunwizard p a {
-					color: ' . $color . ';
-				}
-				';
-			$responseCss .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
-			$responseCss .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
-			$responseCss .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
-
-		}
-		$logo = $this->config->getAppValue($this->appName, 'logoMime');
-		if($logo !== '') {
-			$responseCss .= sprintf(
-				'#header .logo {' .
-				'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
-				'background-size: contain;' .
-				'}' . "\n" .
-				'#header .logo-icon {' .
-				'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
-				'background-size: contain;' .
-				'}' . "\n" .
-				'#firstrunwizard .firstrunwizard-header .logo {' .
-				'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
-				'background-size: contain;' .
-				'}' . "\n"
-			);
-		}
-		$backgroundLogo = $this->config->getAppValue($this->appName, 'backgroundMime');
-		if($backgroundLogo !== '') {
-			$responseCss .= '#body-login {background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');}' . "\n";
-			$responseCss .= '#firstrunwizard .firstrunwizard-header {' .
-				'background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');' .
-			'}' . "\n";
-		}
-		if($this->util->invertTextColor($color)) {
-			$responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
-			$responseCss .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
-			$responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
-			$responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
-			$responseCss .= '#body-login input.login { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/confirm.svg?v=2\'); }' . "\n";
-			$responseCss .= '.nc-theming-contrast {color: #000000}' . "\n";
-			$responseCss .= '.ui-widget-header { color: #000000; }' . "\n";
-		} else {
-			$responseCss .= '.nc-theming-contrast {color: #ffffff}' . "\n";
-		}
-
-		if($logo !== '' or $color !== '') {
-			$responseCss .= '.icon-file,.icon-filetype-text {' .
-				'background-image: url(\'./img/core/filetypes/text.svg?v='.$cacheBusterValue.'\');' . "}\n" .
-				'.icon-folder, .icon-filetype-folder {' .
-				'background-image: url(\'./img/core/filetypes/folder.svg?v='.$cacheBusterValue.'\');' . "}\n" .
-				'.icon-filetype-folder-drag-accept {' .
-				'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v='.$cacheBusterValue.'\')!important;' . "}\n";
-		}
-
-		$response = new DataDownloadResponse($responseCss, 'style', 'text/css');
-		$response->addHeader('Expires', date(\DateTime::RFC2822, $this->timeFactory->getTime()));
 			$response->addHeader('Pragma', 'cache');
-		$response->cacheFor(3600);
 			return $response;
+		} catch (NotFoundException $e) {
+			return new NotFoundResponse();
 		}
+	}
+
 	/**
 	 * @NoCSRFRequired
 	 * @PublicPage
@@ -448,12 +363,12 @@ class ThemingController extends Controller {
 		$cacheBusterValue = $this->config->getAppValue('theming', 'cachebuster', '0');
 		$responseJS = '(function() {
 	OCA.Theming = {
-		name: ' . json_encode($this->template->getName()) . ',
+		name: ' . json_encode($this->themingDefaults->getName()) . ',
-		url: ' . json_encode($this->template->getBaseUrl()) . ',
+		url: ' . json_encode($this->themingDefaults->getBaseUrl()) . ',
-		slogan: ' . json_encode($this->template->getSlogan()) . ',
+		slogan: ' . json_encode($this->themingDefaults->getSlogan()) . ',
-		color: ' . json_encode($this->template->getColorPrimary()) . ',
+		color: ' . json_encode($this->themingDefaults->getColorPrimary()) . ',
-		inverted: ' . json_encode($this->util->invertTextColor($this->template->getColorPrimary())) . ',
+		inverted: ' . json_encode($this->util->invertTextColor($this->themingDefaults->getColorPrimary())) . ',
-		cacheBuster: ' . json_encode($cacheBusterValue). '
+		cacheBuster: ' . json_encode($cacheBusterValue) . '
 	};
 })();';
 		$response = new DataDownloadResponse($responseJS, 'javascript', 'text/javascript');

apps/theming/lib/ThemingDefaults.php

@@ -28,7 +28,6 @@ use OCP\ICacheFactory;
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
-use OCP\Util;
 
 class ThemingDefaults extends \OC_Defaults {
 
@@ -50,6 +49,8 @@ class ThemingDefaults extends \OC_Defaults {
 	private $slogan;
 	/** @var string */
 	private $color;
+	/** @var Util */
+	private $util;
 
 	/**
 	 * ThemingDefaults constructor.
@@ -60,20 +61,22 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @param \OC_Defaults $defaults
 	 * @param IAppData $appData
 	 * @param ICacheFactory $cacheFactory
+	 * @param Util $util
 	 */
 	public function __construct(IConfig $config,
 								IL10N $l,
 								IURLGenerator $urlGenerator,
 								\OC_Defaults $defaults,
 								IAppData $appData,
-								ICacheFactory $cacheFactory
+								ICacheFactory $cacheFactory,
+								Util $util
 	) {
-		parent::__construct();
 		$this->config = $config;
 		$this->l = $l;
 		$this->urlGenerator = $urlGenerator;
 		$this->appData = $appData;
 		$this->cacheFactory = $cacheFactory;
+		$this->util = $util;
 
 		$this->name = $defaults->getName();
 		$this->url = $defaults->getBaseUrl();
@@ -102,7 +105,7 @@ class ThemingDefaults extends \OC_Defaults {
 	}
 
 	public function getSlogan() {
-		return Util::sanitizeHTML($this->config->getAppValue('theming', 'slogan', $this->slogan));
+		return \OCP\Util::sanitizeHTML($this->config->getAppValue('theming', 'slogan', $this->slogan));
 	}
 
 	public function getShortFooter() {
@@ -129,7 +132,7 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @return string
 	 */
 	public function getLogo() {
-		$logo = $this->config->getAppValue('theming', 'logoMime');
+		$logo = $this->config->getAppValue('theming', 'logoMime', false);
 
 		$logoExists = true;
 		try {
@@ -141,10 +144,10 @@ class ThemingDefaults extends \OC_Defaults {
 		$cacheBusterCounter = $this->config->getAppValue('theming', 'cachebuster', '0');
 
 		if(!$logo || !$logoExists) {
-			return $this->urlGenerator->imagePath('core','logo.svg') . '?v=' . $cacheBusterCounter;
+			return $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core','logo.svg') . '?v=' . $cacheBusterCounter);
 		}
 
-		return $this->urlGenerator->linkToRoute('theming.Theming.getLogo') . '?v=' . $cacheBusterCounter;
+		return $this->urlGenerator->linkToRouteAbsolute('theming.Theming.getLogo') . '?v=' . $cacheBusterCounter;
 	}
 
 	/**
@@ -153,7 +156,7 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @return string
 	 */
 	public function getBackground() {
-		$backgroundLogo = $this->config->getAppValue('theming', 'backgroundMime');
+		$backgroundLogo = $this->config->getAppValue('theming', 'backgroundMime',false);
 
 		$backgroundExists = true;
 		try {
@@ -169,6 +172,36 @@ class ThemingDefaults extends \OC_Defaults {
 		return $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground');
 	}
 
+
+	/**
+	 * @return array scss variables to overwrite
+	 */
+	public function getScssVariables() {
+		$cache = $this->cacheFactory->create('theming');
+		if ($value = $cache->get('getScssVariables')) {
+			return $value;
+		}
+
+		$variables = [
+			'theming-cachebuster' => "'" . $this->config->getAppValue('theming', 'cachebuster', '0') . "'",
+		];
+
+		$variables['image-logo'] = "'".$this->getLogo()."'";
+		$variables['image-login-background'] = "'".$this->getBackground()."'";
+
+		if ($this->config->getAppValue('theming', 'color', null) !== null) {
+			if ($this->util->invertTextColor($this->getColorPrimary())) {
+				$colorPrimaryText = '#000000';
+			} else {
+				$colorPrimaryText = '#ffffff';
+			}
+			$variables['color-primary'] = $this->getColorPrimary();
+			$variables['color-primary-text'] = $colorPrimaryText;
+		}
+		$cache->set('getScssVariables', $variables);
+		return $variables;
+	}
+
 	/**
 	 * Check if Imagemagick is enabled and if SVG is supported
 	 * otherwise we can't render custom icons
@@ -198,6 +231,7 @@ class ThemingDefaults extends \OC_Defaults {
 	private function increaseCacheBuster() {
 		$cacheBusterKey = $this->config->getAppValue('theming', 'cachebuster', '0');
 		$this->config->setAppValue('theming', 'cachebuster', (int)$cacheBusterKey+1);
+		$this->cacheFactory->create('theming')->clear('getScssVariables');
 	}
 
 	/**

apps/theming/tests/Controller/ThemingControllerTest.php

@@ -24,7 +24,9 @@
  */
 namespace OCA\Theming\Tests\Controller;
 
+use OC\Files\AppData\Factory;
 use OC\L10N\L10N;
+use OC\Template\SCSSCacher;
 use OCA\Theming\Controller\ThemingController;
 use OCA\Theming\Util;
 use OCP\App\IAppManager;
@@ -38,8 +40,10 @@ use OCP\Files\SimpleFS\ISimpleFile;
 use OCP\Files\SimpleFS\ISimpleFolder;
 use OCP\IConfig;
 use OCP\IL10N;
+use OCP\ILogger;
 use OCP\IRequest;
 use OCP\ITempManager;
+use OCP\IURLGenerator;
 use Test\TestCase;
 use OCA\Theming\ThemingDefaults;
 
@@ -49,7 +53,7 @@ class ThemingControllerTest extends TestCase {
 	/** @var IConfig|\PHPUnit_Framework_MockObject_MockObject */
 	private $config;
 	/** @var ThemingDefaults|\PHPUnit_Framework_MockObject_MockObject */
-	private $template;
+	private $themingDefaults;
 	/** @var Util */
 	private $util;
 	/** @var \OCP\AppFramework\Utility\ITimeFactory */
@@ -66,11 +70,13 @@ class ThemingControllerTest extends TestCase {
 	private $appManager;
 	/** @var IAppData|\PHPUnit_Framework_MockObject_MockObject */
 	private $appData;
+	/** @var SCSSCacher */
+	private $scssCacher;
 
 	public function setUp() {
 		$this->request = $this->createMock(IRequest::class);
 		$this->config = $this->createMock(IConfig::class);
-		$this->template = $this->createMock(ThemingDefaults::class);
+		$this->themingDefaults = $this->createMock(ThemingDefaults::class);
 		$this->timeFactory = $this->createMock(ITimeFactory::class);
 		$this->l10n = $this->createMock(L10N::class);
 		$this->rootFolder = $this->createMock(IRootFolder::class);
@@ -81,17 +87,19 @@ class ThemingControllerTest extends TestCase {
 			->willReturn(123);
 		$this->tempManager = \OC::$server->getTempManager();
 		$this->appData = $this->createMock(IAppData::class);
+		$this->scssCacher = $this->createMock(SCSSCacher::class);
 
 		$this->themingController = new ThemingController(
 			'theming',
 			$this->request,
 			$this->config,
-			$this->template,
+			$this->themingDefaults,
 			$this->util,
 			$this->timeFactory,
 			$this->l10n,
 			$this->tempManager,
-			$this->appData
+			$this->appData,
+			$this->scssCacher
 		);
 
 		return parent::setUp();
@@ -122,7 +130,7 @@ class ThemingControllerTest extends TestCase {
 	 * @param string $message
 	 */
 	public function testUpdateStylesheet($setting, $value, $status, $message) {
-		$this->template
+		$this->themingDefaults
 			->expects($status === 'success' ? $this->once() : $this->never())
 			->method('set')
 			->with($setting, $value);
@@ -358,7 +366,7 @@ class ThemingControllerTest extends TestCase {
 			->method('t')
 			->with('Saved')
 			->willReturn('Saved');
-		$this->template
+		$this->themingDefaults
 			->expects($this->once())
 			->method('undo')
 			->with('MySetting')
@@ -455,533 +463,53 @@ class ThemingControllerTest extends TestCase {
 		@$this->assertEquals($expected, $this->themingController->getLoginBackground());
 	}
 
-	public function testGetStylesheetWithOnlyColor() {
 
-		$color = '#000';
+	public function testGetStylesheet() {
 
-		$this->config
+		$file = $this->createMock(ISimpleFile::class);
-			->expects($this->at(0))
+		$file->expects($this->any())->method('getName')->willReturn('theming.css');
-			->method('getAppValue')
+		$file->expects($this->any())->method('getContent')->willReturn('compiled');
-			->with('theming', 'cachebuster', '0')
+		$this->scssCacher->expects($this->once())->method('process')->willReturn(true);
-			->willReturn('0');
+		$this->scssCacher->expects($this->once())->method('getCachedCSS')->willReturn($file);
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn($color);
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('');
 
-		$expectedData = sprintf(
+		$response = new Http\FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => 'text/css']);
-			'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
+		$response->cacheFor(86400);
-			$color
+		$expires = new \DateTime();
-		);
+		$expires->setTimestamp($this->timeFactory->getTime());
-		$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
+		$expires->add(new \DateInterval('PT24H'));
-			'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
+		$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
-			'background-color: %s; background-position: center center; background-size:contain;' .
+		$response->addHeader('Pragma', 'cache');
-			'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
-			"}\n",
-			\OC::$WEBROOT,
-			$color
-		);
-		$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
-			'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' .
-			"}\n";
-		$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
-			'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'color: #ffffff;'.
-			"}\n" .
-			'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
-			'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'color: #ffffff;'.
-			"}\n" .
-			'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
-			'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
-			'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'opacity: 0.4;' .
-			'color: #ffffff;'.
-			"}\n";
-		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
-		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
-			'border: 1px solid ' . $color . ';' .
-			'color: ' . $color . ';' .
-			"}\n";
-		$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
-			'color: ' . $color . ';' .
-			"}\n";
-		$expectedData .= '
-				#firstrunwizard .firstrunwizard-header {
-					background-color: ' . $color . ';
-				}
-				#firstrunwizard p a {
-					color: ' . $color . ';
-				}
-				';
-		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
-		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
-		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
-		$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
-		$expectedData .= '.icon-file,.icon-filetype-text {' .
-			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
-			'.icon-folder, .icon-filetype-folder {' .
-			'background-image: url(\'./img/core/filetypes/folder.svg?v=0\');' . "}\n" .
-			'.icon-filetype-folder-drag-accept {' .
-			'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v=0\')!important;' . "}\n";
 
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
+		$actual = $this->themingController->getStylesheet();
-
+		$this->assertEquals($response, $actual);
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
 	}
 
-	public function testGetStylesheetWithOnlyColorInvert() {
+	public function testGetStylesheetFails() {
+		$file = $this->createMock(ISimpleFile::class);
+		$file->expects($this->any())->method('getName')->willReturn('theming.css');
+		$file->expects($this->any())->method('getContent')->willReturn('compiled');
+		$this->scssCacher->expects($this->once())->method('process')->willReturn(true);
+		$this->scssCacher->expects($this->once())->method('getCachedCSS')->willThrowException(new NotFoundException());
+		$response = new Http\NotFoundResponse();
 
-		$color = '#fff';
+		$actual = $this->themingController->getStylesheet();
-		$elementColor = '#555555';
+		$this->assertEquals($response, $actual);
-
-		$this->config
-			->expects($this->at(0))
-			->method('getAppValue')
-			->with('theming', 'cachebuster', '0')
-			->willReturn('0');
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn($color);
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('');
-
-		$expectedData = sprintf(
-			'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
-			$color
-		);
-		$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
-			'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
-			'background-color: #555555; background-position: center center; background-size:contain;' .
-			'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
-			"}\n",
-			\OC::$WEBROOT
-		);
-		$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
-			'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' .
-			"}\n";
-		$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
-			'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'color: #000000;'.
-			"}\n" .
-			'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
-			'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'color: #000000;'.
-			"}\n" .
-			'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
-			'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
-			'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'opacity: 0.4;' .
-			'color: #000000;'.
-			"}\n";
-		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
-		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
-			'border: 1px solid ' . $color . ';' .
-			'color: ' . $elementColor . ';' .
-			"}\n";
-		$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
-			'color: ' . $elementColor . ';' .
-			"}\n";
-		$expectedData .= '
-				#firstrunwizard .firstrunwizard-header {
-					background-color: ' . $color . ';
-				}
-				#firstrunwizard p a {
-					color: ' . $color . ';
-				}
-				';
-		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
-		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
-		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
-		$expectedData .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
-		$expectedData .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
-		$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
-		$expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
-		$expectedData .= '#body-login input.login { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/confirm.svg?v=2\'); }' . "\n";
-		$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";
-		$expectedData .= '.ui-widget-header { color: #000000; }' . "\n";
-		$expectedData .= '.icon-file,.icon-filetype-text {' .
-			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
-			'.icon-folder, .icon-filetype-folder {' .
-			'background-image: url(\'./img/core/filetypes/folder.svg?v=0\');' . "}\n" .
-			'.icon-filetype-folder-drag-accept {' .
-			'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v=0\')!important;' . "}\n";
-
-
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
-
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
-	}
-
-	public function testGetStylesheetWithOnlyHeaderLogo() {
-		$this->config
-			->expects($this->at(0))
-			->method('getAppValue')
-			->with('theming', 'cachebuster', '0')
-			->willReturn('0');
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn('');
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('image/png');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('');
-
-		$expectedData = '#header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#header .logo-icon {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#firstrunwizard .firstrunwizard-header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n";
-		$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
-		$expectedData .= '.icon-file,.icon-filetype-text {' .
-			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
-			'.icon-folder, .icon-filetype-folder {' .
-			'background-image: url(\'./img/core/filetypes/folder.svg?v=0\');' . "}\n" .
-			'.icon-filetype-folder-drag-accept {' .
-			'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v=0\')!important;' . "}\n";
-
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
-
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
-	}
-
-	public function testGetStylesheetWithOnlyBackgroundLogin() {
-		$this->config
-			->expects($this->at(0))
-			->method('getAppValue')
-			->with('theming', 'cachebuster', '0')
-			->willReturn('0');
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn('');
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('text/svg');
-
-		$expectedData = '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
-		$expectedData .= '#firstrunwizard .firstrunwizard-header {' .
-			'background-image: url(\'./loginbackground?v=0\');' .
-			'}' . "\n";
-		$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
-
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
-
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
-	}
-
-	public function testGetStylesheetWithAllCombined() {
-
-		$color = '#000';
-
-		$this->config
-			->expects($this->at(0))
-			->method('getAppValue')
-			->with('theming', 'cachebuster', '0')
-			->willReturn('0');
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn($color);
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('text/svg');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('image/png');
-
-		$expectedData = sprintf(
-			'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
-			$color);
-
-		$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
-			'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
-			'background-color: %s; background-position: center center; background-size:contain;' .
-			'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
-			"}\n",
-			\OC::$WEBROOT,
-			$color
-		);
-		$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
-			'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton($color).'\');' .
-			"}\n";
-		$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
-			'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'color: #ffffff;'.
-			"}\n" .
-			'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
-			'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'color: #ffffff;'.
-			"}\n" .
-			'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
-			'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
-			'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
-			'border: 1px solid '.$color.';'.
-			'background-color: '.$color.';'.
-			'opacity: 0.4;' .
-			'color: #ffffff;'.
-			"}\n";
-		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
-		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
-			'border: 1px solid ' . $color . ';' .
-			'color: ' . $color . ';' .
-			"}\n";
-		$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
-			'color: ' . $color . ';' .
-			"}\n";
-		$expectedData .= '
-				#firstrunwizard .firstrunwizard-header {
-					background-color: ' . $color . ';
-				}
-				#firstrunwizard p a {
-					color: ' . $color . ';
-				}
-				';
-		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
-		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
-		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
-		$expectedData .= sprintf(
-			'#header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#header .logo-icon {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#firstrunwizard .firstrunwizard-header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n"
-		);
-		$expectedData .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
-		$expectedData .= '#firstrunwizard .firstrunwizard-header {' .
-			'background-image: url(\'./loginbackground?v=0\');' .
-			'}' . "\n";
-		$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
-		$expectedData .= '.icon-file,.icon-filetype-text {' .
-			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
-			'.icon-folder, .icon-filetype-folder {' .
-			'background-image: url(\'./img/core/filetypes/folder.svg?v=0\');' . "}\n" .
-			'.icon-filetype-folder-drag-accept {' .
-			'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v=0\')!important;' . "}\n";
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
-
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
-	}
-
-	public function testGetStylesheetWithAllCombinedInverted() {
-
-		$color = '#fff';
-		$elementColor = '#555555';
-
-		$this->config
-			->expects($this->at(0))
-			->method('getAppValue')
-			->with('theming', 'cachebuster', '0')
-			->willReturn('0');
-		$this->config
-			->expects($this->at(1))
-			->method('getAppValue')
-			->with('theming', 'color', '')
-			->willReturn('#fff');
-		$this->config
-			->expects($this->at(2))
-			->method('getAppValue')
-			->with('theming', 'logoMime', '')
-			->willReturn('text/svg');
-		$this->config
-			->expects($this->at(3))
-			->method('getAppValue')
-			->with('theming', 'backgroundMime', '')
-			->willReturn('image/png');
-
-		$expectedData = sprintf(
-			'#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n",
-			$color);
-
-		$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
-			'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
-			'background-color: #555555; background-position: center center; background-size:contain;' .
-			'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
-			"}\n",
-			\OC::$WEBROOT
-		);
-		$expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
-			'background-image: url(\'data:image/svg+xml;base64,'.$this->util->generateRadioButton('#555555').'\');' .
-			"}\n";
-		$expectedData .= '.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary,' .
-			'.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'color: #000000;'.
-			"}\n" .
-			'.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,' .
-			'.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'color: #000000;'.
-			"}\n" .
-			'.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,' .
-			'.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,' .
-			'.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {' .
-			'border: 1px solid '.$elementColor.';'.
-			'background-color: '.$elementColor.';'.
-			'opacity: 0.4;' .
-			'color: #000000;'.
-			"}\n";
-		$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
-		$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
-			'border: 1px solid ' . $color . ';' .
-			'color: ' . $elementColor . ';' .
-			"}\n";
-		$expectedData .= '.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {' .
-			'color: ' . $elementColor . ';' .
-			"}\n";
-		$expectedData .= '
-				#firstrunwizard .firstrunwizard-header {
-					background-color: ' . $color . ';
-				}
-				#firstrunwizard p a {
-					color: ' . $color . ';
-				}
-				';
-		$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
-		$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
-		$expectedData .= sprintf('#app-navigation li:hover > a, #app-navigation li:focus > a, #app-navigation a:focus, #app-navigation .selected, #app-navigation .selected a, #app-navigation .active, #app-navigation .active a {box-shadow: inset 2px 0 %s}' . "\n", $color);
-		$expectedData .= sprintf(
-			'#header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#header .logo-icon {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n" .
-			'#firstrunwizard .firstrunwizard-header .logo {' .
-			'background-image: url(\'./logo?v=0\');' .
-			'background-size: contain;' .
-			'}' . "\n"
-		);
-		$expectedData .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
-		$expectedData .= '#firstrunwizard .firstrunwizard-header {' .
-			'background-image: url(\'./loginbackground?v=0\');' .
-			'}' . "\n";
-		$expectedData .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
-		$expectedData .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
-		$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
-		$expectedData .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n";
-		$expectedData .= '#body-login input.login { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/confirm.svg?v=2\'); }' . "\n";
-		$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";
-		$expectedData .= '.ui-widget-header { color: #000000; }' . "\n";
-		$expectedData .= '.icon-file,.icon-filetype-text {' .
-			'background-image: url(\'./img/core/filetypes/text.svg?v=0\');' . "}\n" .
-			'.icon-folder, .icon-filetype-folder {' .
-			'background-image: url(\'./img/core/filetypes/folder.svg?v=0\');' . "}\n" .
-			'.icon-filetype-folder-drag-accept {' .
-			'background-image: url(\'./img/core/filetypes/folder-drag-accept.svg?v=0\')!important;' . "}\n";
-
-		$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
-		$expected->cacheFor(3600);
-		$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
-		$expected->addHeader('Pragma', 'cache');
-		@$this->assertEquals($expected, $this->themingController->getStylesheet());
 	}
 
 	public function testGetJavascript() {
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(0))
 			->method('getName')
 			->willReturn("");
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(1))
 			->method('getBaseUrl')
 			->willReturn("");
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(2))
 			->method('getSlogan')
 			->willReturn("");
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(3))
 			->method('getColorPrimary')
 			->willReturn("#000");
@@ -1004,19 +532,19 @@ class ThemingControllerTest extends TestCase {
 		@$this->assertEquals($expected, $this->themingController->getJavascript());
 	}
 	public function testGetJavascriptInverted() {
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(0))
 			->method('getName')
 			->willReturn("Nextcloud");
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(1))
 			->method('getBaseUrl')
 			->willReturn("nextcloudurl");
-		$this->template
+		$this->themingDefaults
 			->expects($this->at(2))
 			->method('getSlogan')
 			->willReturn("awesome");
-		$this->template
+		$this->themingDefaults
 			->expects($this->any())
 			->method('getColorPrimary')
 			->willReturn("#ffffff");

apps/theming/tests/ThemingDefaultsTest.php

@@ -25,7 +25,11 @@ namespace OCA\Theming\Tests;
 
 use OCA\Theming\ThemingDefaults;
 use OCP\Files\IAppData;
+use OCA\Theming\Util;
+use OCP\Files\NotFoundException;
+use OCP\Files\SimpleFS\ISimpleFile;
 use OCP\Files\SimpleFS\ISimpleFolder;
+use OCP\ICache;
 use OCP\ICacheFactory;
 use OCP\IConfig;
 use OCP\IL10N;
@@ -47,14 +51,20 @@ class ThemingDefaultsTest extends TestCase {
 	private $cacheFactory;
 	/** @var ThemingDefaults */
 	private $template;
+	/** @var Util|\PHPUnit_Framework_MockObject_MockObject */
+	private $util;
+	/** @var ICache|\PHPUnit_Framework_MockObject_MockObject */
+	private $cache;
 
 	public function setUp() {
 		parent::setUp();
 		$this->config = $this->getMockBuilder(IConfig::class)->getMock();
 		$this->l10n = $this->getMockBuilder(IL10N::class)->getMock();
-		$this->urlGenerator = $this->getMockBuilder(IURLGenerator::class)->getMock();
+		$this->urlGenerator = \OC::$server->query(IURLGenerator::class);
 		$this->appData = $this->createMock(IAppData::class);
-		$this->cacheFactory = $this->getMockBuilder(ICacheFactory::class)->getMock();
+		$this->cacheFactory = $this->createMock(ICacheFactory::class);
+		$this->cache = $this->createMock(ICache::class);
+		$this->util = $this->createMock(Util::class);
 		$this->defaults = $this->getMockBuilder(\OC_Defaults::class)
 			->disableOriginalConstructor()
 			->getMock();
@@ -74,13 +84,19 @@ class ThemingDefaultsTest extends TestCase {
 			->expects($this->at(3))
 			->method('getColorPrimary')
 			->willReturn('#000');
+		$this->cacheFactory
+			->expects($this->any())
+			->method('create')
+			->with('theming')
+			->willReturn($this->cache);
 		$this->template = new ThemingDefaults(
 			$this->config,
 			$this->l10n,
 			$this->urlGenerator,
 			$this->defaults,
 			$this->appData,
-			$this->cacheFactory
+			$this->cacheFactory,
+			$this->util
 		);
 	}
 
@@ -265,7 +281,10 @@ class ThemingDefaultsTest extends TestCase {
 			->expects($this->at(2))
 			->method('setAppValue')
 			->with('theming', 'cachebuster', 16);
-
+		$this->cache
+			->expects($this->once())
+			->method('clear')
+			->with('getScssVariables');
 		$this->template->set('MySetting', 'MyValue');
 	}
 
@@ -380,6 +399,11 @@ class ThemingDefaultsTest extends TestCase {
 	}
 
 	public function testGetBackgroundDefault() {
+		$folder = $this->createMock(ISimpleFolder::class);
+		$file = $this->createMock(ISimpleFile::class);
+		$this->appData->expects($this->once())
+			->method('getFolder')
+			->willThrowException(new NotFoundException());
 		$this->config
 			->expects($this->once())
 			->method('getAppValue')
@@ -395,6 +419,12 @@ class ThemingDefaultsTest extends TestCase {
 	}
 
 	public function testGetBackgroundCustom() {
+		$folder = $this->createMock(ISimpleFolder::class);
+		$file = $this->createMock(ISimpleFile::class);
+		$folder->expects($this->once())->method('getFile')->willReturn($file);
+		$this->appData->expects($this->once())
+			->method('getFolder')
+			->willReturn($folder);
 		$this->config
 			->expects($this->once())
 			->method('getAppValue')
@@ -411,11 +441,14 @@ class ThemingDefaultsTest extends TestCase {
 			->method('getFile')
 			->with('background')
 			->willReturn('');
-		$expected = $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground');
+		$expected = $this->urlGenerator->linkToRouteAbsolute('theming.Theming.getLoginBackground');
 		$this->assertEquals($expected, $this->template->getBackground());
 	}
 
 	public function testGetLogoDefault() {
+		$this->appData->expects($this->once())
+			->method('getFolder')
+			->willThrowException(new NotFoundException());
 		$this->config
 			->expects($this->at(0))
 			->method('getAppValue')
@@ -431,11 +464,17 @@ class ThemingDefaultsTest extends TestCase {
 			->method('getFolder')
 			->with('images')
 			->willThrowException(new \Exception());
-		$expected = $this->urlGenerator->imagePath('core','logo.svg') . '?v=0';
+		$expected = $this->urlGenerator->getAbsoluteURL('/core/img/logo.svg') . '?v=0';
 		$this->assertEquals($expected, $this->template->getLogo());
 	}
 
 	public function testGetLogoCustom() {
+		$folder = $this->createMock(ISimpleFolder::class);
+		$file = $this->createMock(ISimpleFile::class);
+		$folder->expects($this->once())->method('getFile')->willReturn($file);
+		$this->appData->expects($this->once())
+			->method('getFolder')
+			->willReturn($folder);
 		$this->config
 			->expects($this->at(0))
 			->method('getAppValue')
@@ -457,7 +496,39 @@ class ThemingDefaultsTest extends TestCase {
 			->method('getFile')
 			->with('logo')
 			->willReturn('');
-		$expected = $this->urlGenerator->linkToRoute('theming.Theming.getLogo') . '?v=0';
+		$expected = $this->urlGenerator->getAbsoluteURL('index.php/apps/theming/logo') . '?v=0';
 		$this->assertEquals($expected, $this->template->getLogo());
 	}
+
+	public function testGetScssVariablesCached() {
+		$this->cache->expects($this->once())->method('get')->with('getScssVariables')->willReturn(['foo'=>'bar']);
+		$this->assertEquals(['foo'=>'bar'], $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');
+		$this->config->expects($this->at(2))->method('getAppValue')->with('theming', 'backgroundMime', false)->willReturn('jpeg');
+		$this->config->expects($this->at(3))->method('getAppValue')->with('theming', 'color', null)->willReturn('#000000');
+		$this->config->expects($this->at(4))->method('getAppValue')->with('theming', 'color', '#000')->willReturn('#000000');
+		$this->config->expects($this->at(5))->method('getAppValue')->with('theming', 'color', '#000')->willReturn('#000000');
+
+		$this->util->expects($this->any())->method('invertTextColor')->with('#000000')->willReturn(false);
+		$this->cache->expects($this->once())->method('get')->with('getScssVariables')->willReturn(null);
+		$folder = $this->createMock(ISimpleFolder::class);
+		$file = $this->createMock(ISimpleFile::class);
+		$folder->expects($this->any())->method('getFile')->willReturn($file);
+		$this->appData->expects($this->any())
+			->method('getFolder')
+			->willReturn($folder);
+		$expected = [
+			'theming-cachebuster' => '\'0\'',
+			'image-logo' => '\'' . $this->urlGenerator->getAbsoluteURL('index.php/apps/theming/logo') . '?v=0\'',
+			'image-login-background' => '\'' . $this->urlGenerator->getAbsoluteURL('index.php/apps/theming/loginbackground') . '\'',
+			'color-primary' => '#000000',
+			'color-primary-text' => '#ffffff'
+
+		];
+		$this->assertEquals($expected, $this->template->getScssVariables());
+	}
 }

lib/private/Server.php

@@ -95,9 +95,12 @@ use OC\Security\TrustedDomainHelper;
 use OC\Session\CryptoWrapper;
 use OC\Share20\ShareHelper;
 use OC\Tagging\TagMapper;
+use OC\Template\SCSSCacher;
 use OCA\Theming\ThemingDefaults;
+
 use OCP\App\IAppManager;
 use OCP\Defaults;
+use OCA\Theming\Util;
 use OCP\Federation\ICloudIdManager;
 use OCP\Authentication\LoginCredentials\IStore;
 use OCP\ICacheFactory;
@@ -849,11 +852,25 @@ class Server extends ServerContainer implements IServerContainer {
 					$c->getURLGenerator(),
 					new \OC_Defaults(),
 					$c->getAppDataDir('theming'),
-					$c->getMemCacheFactory()
+					$c->getMemCacheFactory(),
+					new Util($c->getConfig(), $this->getRootFolder(), $this->getAppManager())
 				);
 			}
 			return new \OC_Defaults();
 		});
+		$this->registerService(SCSSCacher::class, function(Server $c) {
+			/** @var Factory $cacheFactory */
+			$cacheFactory = $c->query(Factory::class);
+			return new SCSSCacher(
+				$c->getLogger(),
+				$c->query(\OC\Files\AppData\Factory::class),
+				$c->getURLGenerator(),
+				$c->getConfig(),
+				$c->getThemingDefaults(),
+				\OC::$SERVERROOT,
+				$cacheFactory->createLocal('SCSS')
+			);
+		});
 		$this->registerService(EventDispatcher::class, function () {
 			return new EventDispatcher();
 		});

lib/private/Template/SCSSCacher.php

@@ -25,9 +25,11 @@ use Leafo\ScssPhp\Compiler;
 use Leafo\ScssPhp\Exception\ParserException;
 use Leafo\ScssPhp\Formatter\Crunched;
 use Leafo\ScssPhp\Formatter\Expanded;
+use OC\Files\AppData\Factory;
 use OCP\Files\IAppData;
 use OCP\Files\NotFoundException;
 use OCP\Files\NotPermittedException;
+use OCP\Files\SimpleFS\ISimpleFile;
 use OCP\Files\SimpleFS\ISimpleFolder;
 use OCP\ICache;
 use OCP\IConfig;
@@ -56,22 +58,25 @@ class SCSSCacher {
 
 	/**
 	 * @param ILogger $logger
-	 * @param IAppData $appData
+	 * @param Factory $appDataFactory
 	 * @param IURLGenerator $urlGenerator
 	 * @param IConfig $config
+	 * @param \OC_Defaults $defaults
 	 * @param string $serverRoot
 	 * @param ICache $depsCache
 	 */
 	public function __construct(ILogger $logger,
-								IAppData $appData,
+								Factory $appDataFactory,
 								IURLGenerator $urlGenerator,
 								IConfig $config,
+								\OC_Defaults $defaults,
 								$serverRoot,
 								ICache $depsCache) {
 		$this->logger = $logger;
-		$this->appData = $appData;
+		$this->appData = $appDataFactory->get('css');
 		$this->urlGenerator = $urlGenerator;
 		$this->config = $config;
+		$this->defaults = $defaults;
 		$this->serverRoot = $serverRoot;
 		$this->depsCache = $depsCache;
 	}
@@ -100,12 +105,23 @@ class SCSSCacher {
 			$folder = $this->appData->newFolder($app);
 		}
 
-		if($this->isCached($fileNameCSS, $folder)) {
+
+		if(!$this->variablesChanged() && $this->isCached($fileNameCSS, $folder)) {
 			return true;
 		}
 		return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir);
 	}
 
+	/**
+	 * @param $appName
+	 * @param $fileName
+	 * @return ISimpleFile
+	 */
+	public function getCachedCSS($appName, $fileName) {
+		$folder = $this->appData->getFolder($appName);
+		return $folder->getFile($fileName);
+	}
+
 	/**
 	 * Check if the file is cached or not
 	 * @param string $fileNameCSS
@@ -138,6 +154,20 @@ class SCSSCacher {
 		}
 	}
 
+	/**
+	 * Check if the variables file has changed
+	 * @return bool
+	 */
+	private function variablesChanged() {
+		$injectedVariables = $this->getInjectedVariables();
+		if($this->config->getAppValue('core', 'scss.variables') !== md5($injectedVariables)) {
+			$this->resetCache();
+			$this->config->setAppValue('core', 'scss.variables', md5($injectedVariables));
+			return true;
+		}
+		return false;
+	}
+
 	/**
 	 * Cache the file with AppData
 	 * @param string $path
@@ -179,6 +209,7 @@ class SCSSCacher {
 		try {
 			$compiledScss = $scss->compile(
 				'@import "variables.scss";' .
+				$this->getInjectedVariables() .
 				'@import "'.$fileNameSCSS.'";');
 		} catch(ParserException $e) {
 			$this->logger->error($e, ['app' => 'core']);
@@ -204,6 +235,35 @@ class SCSSCacher {
 		}
 	}
 
+	/**
+	 * Reset scss cache by deleting all generated css files
+	 * We need to regenerate all files when variables change
+	 */
+	private function resetCache() {
+		$appDirectory = $this->appData->getDirectoryListing();
+		if(empty($appDirectory)){
+			return;
+		}
+		foreach ($appDirectory as $folder) {
+			foreach ($folder->getDirectoryListing() as $file) {
+				if (substr($file->getName(), -3) === "css" || substr($file->getName(), -4) === "deps") {
+					$file->delete();
+				}
+			}
+		}
+	}
+
+	/**
+	 * @return string SCSS code for variables from OC_Defaults
+	 */
+	private function getInjectedVariables() {
+		$variables = '';
+		foreach ($this->defaults->getScssVariables() as $key => $value) {
+			$variables .= '$' . $key . ': ' . $value . ';';
+		}
+		return $variables;
+	}
+
 	/**
 	 * Add the correct uri prefix to make uri valid again
 	 * @param string $css

lib/private/TemplateLayout.php

@@ -58,6 +58,7 @@ class TemplateLayout extends \OC_Template {
 		// yes - should be injected ....
 		$this->config = \OC::$server->getConfig();
 
+
 		// Decide which page we show
 		if($renderAs == 'user') {
 			parent::__construct( 'core', 'layout.user' );
@@ -209,16 +210,7 @@ class TemplateLayout extends \OC_Template {
 		$theme = \OC_Util::getTheme();
 
 		if($compileScss) {
-			/** @var \OC\Memcache\Factory $cache */
+			$SCSSCacher = \OC::$server->query(SCSSCacher::class);
-			$cache = \OC::$server->query('MemCacheFactory');
-			$SCSSCacher = new SCSSCacher(
-				\OC::$server->getLogger(),
-				\OC::$server->getAppDataDir('css'),
-				\OC::$server->getURLGenerator(),
-				\OC::$server->getConfig(),
-				\OC::$SERVERROOT,
-				$cache->createLocal('SCSS')
-			);
 		} else {
 			$SCSSCacher = null;
 		}
@@ -228,7 +220,8 @@ class TemplateLayout extends \OC_Template {
 			$theme,
 			array( \OC::$SERVERROOT => \OC::$WEBROOT ),
 			array( \OC::$SERVERROOT => \OC::$WEBROOT ),
-			$SCSSCacher);
+			$SCSSCacher
+		);
 		$locator->find($styles);
 		return $locator->getResources();
 	}

lib/private/legacy/defaults.php

@@ -290,6 +290,16 @@ class OC_Defaults {
 		return $this->defaultColorPrimary;
 	}
 
+	/**
+	 * @return array scss variables to overwrite
+	 */
+	public function getScssVariables() {
+		if($this->themeExist('getScssVariables')) {
+			return $this->theme->getScssVariables();
+		}
+		return [];
+	}
+
 	public function shouldReplaceIcons() {
 		return false;
 	}

tests/lib/Template/SCSSCacherTest.php

@@ -23,7 +23,9 @@
 
 namespace Test\Template;
 
+use OC\Files\AppData\Factory;
 use OC\Template\SCSSCacher;
+use OCA\Theming\ThemingDefaults;
 use OCP\Files\IAppData;
 use OCP\Files\NotFoundException;
 use OCP\Files\SimpleFS\ISimpleFile;
@@ -42,6 +44,8 @@ class SCSSCacherTest extends \Test\TestCase {
 	protected $urlGenerator;
 	/** @var IConfig|\PHPUnit_Framework_MockObject_MockObject */
 	protected $config;
+	/** @var ThemingDefaults|\PHPUnit_Framework_MockObject_MockObject */
+	protected $themingDefaults;
 	/** @var SCSSCacher */
 	protected $scssCacher;
 	/** @var ICache|\PHPUnit_Framework_MockObject_MockObject */
@@ -51,25 +55,33 @@ class SCSSCacherTest extends \Test\TestCase {
 		parent::setUp();
 		$this->logger = $this->createMock(ILogger::class);
 		$this->appData = $this->createMock(IAppData::class);
+		/** @var Factory|\PHPUnit_Framework_MockObject_MockObject $factory */
+		$factory = $this->createMock(Factory::class);
+		$factory->method('get')->with('css')->willReturn($this->appData);
 		$this->urlGenerator = $this->createMock(IURLGenerator::class);
 		$this->config = $this->createMock(IConfig::class);
 		$this->depsCache = $this->createMock(ICache::class);
+		$this->themingDefaults = $this->createMock(ThemingDefaults::class);
 		$this->scssCacher = new SCSSCacher(
 			$this->logger,
-			$this->appData,
+			$factory,
 			$this->urlGenerator,
 			$this->config,
+			$this->themingDefaults,
 			\OC::$SERVERROOT,
 			$this->depsCache
 		);
+		$this->themingDefaults->expects($this->any())->method('getScssVariables')->willReturn([]);
 	}
 
 	public function testProcessUncachedFileNoAppDataFolder() {
 		$folder = $this->createMock(ISimpleFolder::class);
-		$this->appData->expects($this->once())->method('getFolder')->with('core')->willThrowException(new NotFoundException());
-		$this->appData->expects($this->once())->method('newFolder')->with('core')->willReturn($folder);
 		$file = $this->createMock(ISimpleFile::class);
 		$file->expects($this->any())->method('getSize')->willReturn(1);
+
+		$this->appData->expects($this->once())->method('getFolder')->with('core')->willThrowException(new NotFoundException());
+		$this->appData->expects($this->once())->method('newFolder')->with('core')->willReturn($folder);
+
 		$fileDeps = $this->createMock(ISimpleFile::class);
 		$gzfile = $this->createMock(ISimpleFile::class);
 
@@ -127,20 +139,20 @@ class SCSSCacherTest extends \Test\TestCase {
 		$folder = $this->createMock(ISimpleFolder::class);
 		$this->appData->expects($this->once())->method('getFolder')->with('core')->willReturn($folder);
 		$file = $this->createMock(ISimpleFile::class);
-		$file->expects($this->once())->method('getSize')->willReturn(1);
 		$fileDeps = $this->createMock(ISimpleFile::class);
 		$fileDeps->expects($this->any())->method('getSize')->willReturn(1);
-		$fileDeps->expects($this->once())->method('getContent')->willReturn('{}');
+		$gzFile = $this->createMock(ISimpleFile::class);
 
 		$folder->method('getFile')
-			->will($this->returnCallback(function($path) use ($file, $fileDeps) {
+			->will($this->returnCallback(function($name) use ($file, $fileDeps, $gzFile) {
-				if ($path === 'styles.css') {
+				if ($name === 'styles.css') {
 					return $file;
-				} else if ($path === 'styles.css.deps') {
+				} else if ($name === 'styles.css.deps') {
 					return $fileDeps;
-				} else {
+				} else if ($name === 'styles.css.gzip') {
-					$this->fail();
+					return $gzFile;
 				}
+				$this->fail();
 			}));
 
 		$actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core');
@@ -157,23 +169,22 @@ class SCSSCacherTest extends \Test\TestCase {
 			->willReturn('core');
 
 		$file = $this->createMock(ISimpleFile::class);
-		$file->expects($this->once())
-			->method('getSize')
-			->willReturn(1);
 
-		$this->depsCache->method('get')
+		$fileDeps = $this->createMock(ISimpleFile::class);
-			->with('core-styles.css.deps')
+		$fileDeps->expects($this->any())->method('getSize')->willReturn(1);
-			->willReturn('{}');
+
+		$gzFile = $this->createMock(ISimpleFile::class);
 
 		$folder->method('getFile')
-			->will($this->returnCallback(function($path) use ($file) {
+			->will($this->returnCallback(function($name) use ($file, $fileDeps, $gzFile) {
-				if ($path === 'styles.css') {
+				if ($name === 'styles.css') {
 					return $file;
-				} else if ($path === 'styles.css.deps') {
+				} else if ($name === 'styles.css.deps') {
-					$this->fail();
+					return $fileDeps;
-				} else {
+				} else if ($name === 'styles.css.gzip') {
-					$this->fail();
+					return $gzFile;
 				}
+				$this->fail();
 			}));
 
 		$actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core');
@@ -371,5 +382,4 @@ class SCSSCacherTest extends \Test\TestCase {
 		$this->assertEquals(substr($result, 1), $actual);
 	}
 
-
 }

themes/example/defaults.php

@@ -151,4 +151,14 @@ class OC_Theme {
 		return '#745bca';
 	}
 
+	/**
+	 * Returns variables to overload defaults from core/css/variables.scss
+	 * @return array
+	 */
+	public function getScssVariables() {
+		return [
+			'color-primary' => '#745bca'
+		];
+	}
+
 }