diff --git a/core/css/variables.scss b/core/css/variables.scss
new file mode 100644
index 0000000000..24757f32cc
--- /dev/null
+++ b/core/css/variables.scss
@@ -0,0 +1,8 @@
+$color-main-text: #000000;
+$color-main-text-dimmed: #555555;
+$color-main-background: #ffffff;
+$color-primary: #0082c9;
+$color-primary-text: #ffffff;
+$color-error: #e9322d;
+$color-warning: #ffcc44;
+$color-success: #46ba61;
\ No newline at end of file
diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php
index b55cd0b93b..c02d2c6727 100644
--- a/lib/private/Template/SCSSCacher.php
+++ b/lib/private/Template/SCSSCacher.php
@@ -92,11 +92,10 @@ class SCSSCacher {
 			$folder = $this->appData->newFolder($app);
 		}
 
-		if($this->isCached($fileNameCSS, $fileNameSCSS, $folder, $path)) {
+		if($this->isCached($fileNameCSS, $fileNameSCSS, $folder, $path) && !$this->variablesChanged($fileNameCSS, $folder)) {
 			return true;
-		} else {
-			return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir);
 		}
+		return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir);
 	}
 
 	/**
@@ -108,7 +107,7 @@ class SCSSCacher {
 	 * @return boolean
 	 */
 	private function isCached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $path) {
-		try{
+		try {
 			$cachedFile = $folder->getFile($fileNameCSS);
 			if ($cachedFile->getSize() > 0) {
 				$depFile = $folder->getFile($fileNameCSS . '.deps');
@@ -127,6 +126,27 @@ class SCSSCacher {
 		return false;
 	}
 
+	/**
+	 * Check if the variables file has changed
+	 * @param string $fileNameCSS
+	 * @param ISimpleFolder $folder
+	 * @return bool
+	 */
+	private function variablesChanged($fileNameCSS, ISimpleFolder $folder) {
+		$variablesFile = \OC::$SERVERROOT . '/core/css/variables.scss';
+		try {
+			$cachedFile = $folder->getFile($fileNameCSS);
+			if ($cachedFile->getMTime() < filemtime($variablesFile)
+				|| $cachedFile->getSize() === 0
+			) {
+				return true;
+			}
+		} catch (NotFoundException $e) {
+			return true;
+		}
+		return false;
+	}
+
 	/**
 	 * Cache the file with AppData
 	 * @param string $path
@@ -138,7 +158,10 @@ class SCSSCacher {
 	 */
 	private function cache($path, $fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $webDir) {
 		$scss = new Compiler();
-		$scss->setImportPaths($path);
+		$scss->setImportPaths([
+			$path,
+			\OC::$SERVERROOT . '/core/css/',
+		]);
 		if($this->systemConfig->getValue('debug')) {
 			// Debug mode
 			$scss->setFormatter(Expanded::class);
@@ -163,7 +186,9 @@ class SCSSCacher {
 
 		// Compile
 		try {
-			$compiledScss = $scss->compile('@import "'.$fileNameSCSS.'";');
+			$compiledScss = $scss->compile(
+				'@import "variables.scss";' .
+				'@import "'.$fileNameSCSS.'";');
 		} catch(ParserException $e) {
 			$this->logger->error($e, ['app' => 'core']);
 			return false;