diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss
index 334fc0c8fd8615fa3d1d479af6ec6f386bbe8367..4a3336cdbcff3d11902c1133156277033b7fb0a6 100644
--- a/apps/files/css/detailsView.scss
+++ b/apps/files/css/detailsView.scss
@@ -100,7 +100,7 @@
 }
 
 #app-sidebar .file-details {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 
 #app-sidebar .action-favorite {
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index ca2915a9034ffec1c466c396ffc67902134e25c8..01703df5bf18f600b94c1f07fc8c496ad46b9c85 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -41,8 +41,8 @@
 .newFileMenu .error,
 .newFileMenu .error + .icon-confirm,
 #fileList .error {
-	color: $color-error;
-	border-color: $color-error;
+	color: var(--color-error);
+	border-color: var(--color-error);
 }
 
 /* FILE TABLE */
@@ -71,7 +71,7 @@
 }
 
 .app-files #app-content.dir-drop {
-	background-color: $color-main-background !important;
+	background-color: var(--color-main-background) !important;
 }
 
 .file-drag #filestable tbody tr, .file-drag #filestable tbody tr:hover{
@@ -140,12 +140,12 @@
 #filestable tbody tr.searchresult,
 table tr.mouseOver td {
 	transition: background-color 0.3s ease;
-	background-color: nc-darken($color-main-background, 3%);
+	background-color: var(--color-background-dark);
 }
-tbody a { color: $color-main-text; }
+tbody a { color: var(--color-main-text); }
 
 span.conflict-path, span.extension, span.uploading, td.date {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 span.conflict-path, span.extension {
 	-webkit-transition: opacity 300ms;
@@ -159,11 +159,11 @@ tr:focus span.conflict-path,
 tr:hover span.extension,
 tr:focus span.extension {
 	opacity: 1;
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 
 table th, table th a {
-	color: $color-text-details;
+	color: var(--color-text-maxcontrast);
 }
 table.multiselect th a {
 	color: #000;
@@ -208,7 +208,7 @@ table th:focus .sort-indicator.hidden {
 
 table th,
 table td {
-	border-bottom: 1px solid $color-border;
+	border-bottom: 1px solid var(--color-border);
 	text-align: left;
 	font-weight: normal;
 }
@@ -625,7 +625,7 @@ table.dragshadow td.size {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: $color-main-background;
+	background-color: var(--color-main-background);
 	background-repeat: no-repeat no-repeat;
 	background-position: 50%;
 	opacity: 0.7;
@@ -703,11 +703,11 @@ table.dragshadow td.size {
 
 	.quota-container {
 		height: 5px;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 
 		div {
 			height: 100%;
-			background-color: $color-primary;
+			background-color: var(--color-primary);
 		}
 	}
 }
diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
index 5263a4b0e037fead98577805c0c44fe735262f81..8d54c28eef9d39ecf4502959898b308f965bebdc 100644
--- a/apps/files/css/upload.scss
+++ b/apps/files/css/upload.scss
@@ -51,7 +51,7 @@
 	left: 0px;
 	position: absolute;
 	overflow: hidden;
-	background-color: $color-primary;
+	background-color: var(--color-primary);
 }
 #uploadprogressbar .label {
 	top: 6px;
@@ -61,14 +61,14 @@
 	font-weight: normal;
 }
 #uploadprogressbar .label.inner {
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 	position: absolute;
 	display: block;
 	width: 200px;
 }
 #uploadprogressbar .label.outer {
 	position: relative;
-	color: $color-main-text;
+	color: var(--color-main-text);
 }
 #uploadprogressbar .desktop {
 	display: block;