diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index 0a12ac4b2a..b1b7df3115 100644
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -34,5 +34,6 @@
 	--color-border: $color-border;
 	--color-border-dark: $color-border-dark;
 	--border-radius: $border-radius;
-}
 
+	--font-face: $font-face;
+}
diff --git a/core/css/fonts.scss b/core/css/fonts.scss
index f72aa2930c..441b48f385 100644
--- a/core/css/fonts.scss
+++ b/core/css/fonts.scss
@@ -4,7 +4,8 @@
 		font-family: 'Open Sans';
 		font-style: normal;
 		font-weight: normal;
-		src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
+		src: local('Open Sans'), local('OpenSans'),
+			url('../fonts/OpenSans-Regular.woff') format('woff');
 	}
 }
 
@@ -12,12 +13,14 @@
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 300;
-	src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/OpenSans-Light.woff') format('woff');
+	src: local('Open Sans Light'), local('OpenSans-Light'),
+		url('../fonts/OpenSans-Light.woff') format('woff');
 }
 
 @font-face {
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 600;
-	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('../fonts/OpenSans-Semibold.woff') format('woff');
+	src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+		url('../fonts/OpenSans-Semibold.woff') format('woff');
 }
diff --git a/core/css/icons.scss b/core/css/icons.scss
index c7c5bfe0c1..23d35b3742 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -25,7 +25,12 @@
 }
 
 /* LOADING ------------------------------------------------------------------ */
-.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
+.loading,
+.loading-small,
+.icon-loading,
+.icon-loading-dark,
+.icon-loading-small,
+.icon-loading-small-dark {
 	position: relative;
 	&:after {
 		z-index: 2;
@@ -42,15 +47,15 @@
 		-webkit-transform-origin: center;
 		-ms-transform-origin: center;
 		transform-origin: center;
-		border: 2px solid var(--color-loading-dark);
-		border-top-color: var(--color-loading-light);
+		border: 2px solid var(--color-loading-light);
+		border-top-color: var(--color-loading-dark);
 	}
 }
 
 .icon-loading-dark:after,
 .icon-loading-small-dark:after {
-	border: 2px solid var(--color-loading-light);
-	border-top-color: var(--color-loading-dark);
+	border: 2px solid var(--color-loading-dark);
+	border-top-color: var(--color-loading-light);
 }
 
 .icon-loading-small:after,
@@ -61,7 +66,7 @@
 }
 
 /* Css replaced elements don't have ::after nor ::before */
-img, object, video, button, textarea, input, select, div[contenteditable=true] {
+img, object, video, button, textarea, input, select, div[contenteditable='true'] {
 	.icon-loading {
 		background-image: url('../img/loading.gif');
 	}
@@ -176,11 +181,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 .icon-delete {
 	background-image: url('../img/actions/delete.svg?v=1');
 	&.no-permission {
-		&:hover, &:focus {
+		&:hover,
+		&:focus {
 			background-image: url('../img/actions/delete.svg?v=1');
 		}
 	}
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background-image: url('../img/actions/delete-hover.svg?v=1');
 		filter: initial;
 	}
@@ -189,11 +196,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 .icon-delete-white {
 	background-image: url('../img/actions/delete-white.svg?v=1');
 	&.no-permission {
-		&:hover, &:focus {
+		&:hover,
+		&:focus {
 			background-image: url('../img/actions/delete-white.svg?v=1');
 		}
 	}
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background-image: url('../img/actions/delete-hover.svg?v=1');
 	}
 }
@@ -375,14 +384,16 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 }
 
 .icon-starred {
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background-image: url('../img/actions/star.svg?v=1');
 	}
 	background-image: url('../img/actions/starred.svg?v=1');
 }
 
 .icon-star {
-	&:hover, &:focus {
+	&:hover,
+	&:focus {
 		background-image: url('../img/actions/starred.svg?v=1');
 	}
 }
@@ -500,11 +511,13 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 	background-image: url('../img/places/files-dark.svg?v=1');
 }
 
-.icon-file, .icon-filetype-text {
+.icon-file,
+.icon-filetype-text {
 	background-image: url('../img/filetypes/text.svg?v=1');
 }
 
-.icon-folder, .icon-filetype-folder {
+.icon-folder,
+.icon-filetype-folder {
 	background-image: url('../img/filetypes/folder.svg?v=1');
 }
 
@@ -614,4 +627,3 @@ img, object, video, button, textarea, input, select, div[contenteditable=true] {
 .icon-category-search {
 	background-image: url('../img/actions/search.svg?v=1');
 }
-
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 4d916e22f2..a3ff713d81 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -14,10 +14,10 @@
 
  /* Specifically override browser styles */
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+	font-family: var(--font-face)
 }
 .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !important;
+	font-family: var(--font-face) !important;
 }
 
 /* Simple selector to allow easy overriding */
@@ -290,9 +290,11 @@ select,
 }
 
 /* Radio & Checkboxes */
-input {
+input, label {
 	--color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
 	--color-checkbox-radio-border: nc-darken($color-main-background, 47%);
+}
+input {
 	&[type='checkbox'],
 	&[type='radio'] {
 		&.radio,
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 1acae23a54..3affa3d709 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -87,7 +87,7 @@ body {
 	font-weight: 400;
 	font-size: .8em;
 	line-height: 1.6em;
-	font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
+	font-family: var(--font-face);
 	color: var(--color-main-text);
 	height: auto;
 }
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 748ebd6872..c8fcc9f541 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -1,16 +1,20 @@
-// SCSS darken/lighten function override 
-@function nc-darken($color, $value) {
-	@return darken($color, $value);
+// SCSS darken/lighten function override
+// if no exists
+@if function-exists(nc-darken) == false {
+	@function nc-darken($color, $value) {
+		@return darken($color, $value);
+	}
 }
-
-@function nc-lighten($color, $value) {
-	@return lighten($color, $value);
+@if function-exists(nc-lighten) == false {
+	@function nc-lighten($color, $value) {
+		@return lighten($color, $value);
+	}
 }
 
 // SCSS variables
 // DEPRECATED, please use CSS4 vars
-$color-main-text: #000;
-$color-main-background: #fff;
+$color-main-text: #000 !default;
+$color-main-background: #fff !default;
 
 // used for different active/disabled states
 $color-background-dark: nc-darken($color-main-background, 7%);
@@ -18,7 +22,9 @@ $color-background-darker: nc-darken($color-main-background, 14%);
 
 $color-primary: #0082c9;
 $color-primary-text: #ffffff;
-$color-primary-text-dark: nc-darken($color-primary-text, 7%);
+// do not use nc-darken in case of overriding because
+// primary-text is independent of color-main-text
+$color-primary-text-dark: darken($color-primary-text, 7%);
 $color-primary-element: $color-primary;
 $color-primary-element-light: nc-lighten($color-primary-element, 15%);
 
@@ -36,8 +42,8 @@ $color-text-lighter: nc-lighten($color-main-text, 30%);
 $image-logo: url('../img/logo.svg?v=1');
 $image-login-background: url('../img/background.png?v=2');
 
-$color-loading-light: #777;
-$color-loading-dark: #ccc;
+$color-loading-light: #ccc !default;
+$color-loading-dark: #777 !default;
 
 $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
 
@@ -45,4 +51,6 @@ $color-box-shadow: rgba(nc-darken($color-main-background, 70%), 0.75);
 $color-border: nc-darken($color-main-background, 7%);
 // darker border like inputs or very visible elements
 $color-border-dark: nc-darken($color-main-background, 14%);
-$border-radius: 3px;
+$border-radius: 3px !default;
+
+$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index a6f93a3e95..97a5acde09 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -78,7 +78,7 @@ input {
 		transform: translate(-50%, -50%);
 		background: #fff;
 		color: #333;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		box-shadow: 0 0 7px #888;
 		padding: 15px;
 		.jcrop-holder {
@@ -328,7 +328,7 @@ input {
 					opacity: .75;
 				}
 				&.active {
-					box-shadow: inset 2px 0 $color-primary;
+					box-shadow: inset 2px 0 var(--color-primary);
 					.menuitem-text {
 						font-weight: 600;
 					}
@@ -426,7 +426,7 @@ table.nostyle {
 				padding-top: 5px;
 			}
 		}
-		border-top: 1px solid #DDD;
+		border-top: 1px solid var(--color-border);
 		text-overflow: ellipsis;
 		max-width: 200px;
 		white-space: nowrap;
@@ -482,7 +482,6 @@ table.nostyle {
 #new-app-password {
 	width: 245px;
 	font-family: monospace;
-	background-color: lightyellow;
 }
 
 .app-password-row {
@@ -556,14 +555,14 @@ table.grid {
 	th {
 		height: 2em;
 		color: #999;
-		border-bottom: 1px solid $color-border;
+		border-bottom: 1px solid var(--color-border);
 		padding: 0 .5em;
 		padding-left: .8em;
 		text-align: left;
 		font-weight: normal;
 	}
 	td {
-		border-bottom: 1px solid $color-border;
+		border-bottom: 1px solid var(--color-border);
 		padding: 0 .5em;
 		padding-left: .8em;
 		text-align: left;
@@ -639,7 +638,7 @@ span.usersLastLoginTooltip {
 	thead th,
 	thead tr {
 		z-index: 100;
-		background-color: $color-main-background;
+		background-color: var(--color-main-background);
 		position: sticky;
 		// positional attribute is required for position to take affect.
 		top: 0;
@@ -734,7 +733,7 @@ span.version {
 		color: #555;
 		background-color: transparent;
 		border: 1px solid #555;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		padding: 3px 6px;
 	}
 	a {
@@ -804,7 +803,7 @@ span.version {
 		margin-bottom: 10px;
 	}
 	.app-author, .app-licence {
-		color: $color-text-details;
+		color: var(--color-text-maxcontrast);
 	}
 	.app-dependencies {
 		margin: 10px 0;
@@ -885,7 +884,7 @@ span.version {
 	margin-bottom: 0;
 	/* use 2nd child since app-navigation-toggle is the first */
 	&:not(:nth-child(2)) {
-		border-top: 1px solid $color-border;
+		border-top: 1px solid var(--color-border);
 	}
 
 	/* correctly display help icons next to headings */
@@ -980,12 +979,12 @@ span.version {
 				height: initial;
 				vertical-align: middle;
 				float: none;
-				border-bottom: 1px solid $color-border;
+				border-bottom: 1px solid var(--color-border);
 				padding: 6px;
 				box-sizing: border-box;
 			}
 			&.selected {
-				background-color: nc-darken($color-main-background, 3%);
+				background-color: var(--color-background-dark);
 			}
 		}
 		.groups-enable {
@@ -1126,13 +1125,13 @@ table.grid td.date {
 			border-radius: 50%;
 		}
 		&.icon-checkmark-white {
-			background-color: $color-success;
+			background-color: var(--color-success);
 		}
 		&.icon-error-white {
-			background-color: $color-warning;
+			background-color: var(--color-warning);
 		}
 		&.icon-close-white {
-			background-color: $color-error;
+			background-color: var(--color-error);
 		}
 	}
 }
@@ -1233,14 +1232,14 @@ table.grid td.date {
 
 span {
 	&.success {
-		background-color: $color-success;
-		border-radius: $border-radius;
+		background-color: var(--color-success);
+		border-radius: var(--border-radius);
 	}
 	&.error {
-		background-color: $color-error;
+		background-color: var(--color-error);
 	}
 	&.indeterminate {
-		background-color: $color-warning;
+		background-color: var(--color-warning);
 		border-radius: 40% 0;
 	}
 }
@@ -1303,10 +1302,10 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 		background-position: left center;
 	}
 	.errors, .errors a {
-		color: $color-error;
+		color: var(--color-error);
 	}
 	.warnings, .warnings a {
-		color: $color-warning;
+		color: var(--color-warning);
 	}
 
 	.hint {
@@ -1402,7 +1401,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			   what follows will be manually defined  */
 			grid-template-columns: 44px;
 			grid-auto-columns: min-content;
-			border-top: $color-border 1px solid;
+			border-top: var(--color-border) 1px solid;
 			&.disabled {
 				opacity: .5;
 			}
@@ -1438,11 +1437,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 			&#new-user {
 				position: sticky;
 				align-self: normal;
-				background-color: $color-main-background;
+				background-color: var(--color-main-background);
 				z-index: 55; /* above multiselect */
 				top: 0;
 				&.sticky {
-					box-shadow: 0 -2px 10px 1px $color-box-shadow;
+					box-shadow: 0 -2px 10px 1px var(--color-box-shadow);
 				}
 				/* fake input for groups validation */
 				input#newgroups {
@@ -1458,12 +1457,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				top: $grid-row-height;
 			}
 			&#grid-header {
-				color: nc-lighten($color-main-text, 60%);
+				color: var(--color-background-darker);
 				z-index: 60; /* above new-user */
 			}
 			&:hover {
 				input:not([type='submit']):not(:focus):not(:active) {
-					border-color: nc-darken($color-main-background, 14%) !important;
+					border-color: var(--color-border) !important;
 				}
 			}
 			> div,
@@ -1471,7 +1470,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 				grid-row: 1;
 				display: inline-flex;
 				align-items: center;
-				color: nc-lighten($color-main-text, 33%);
+				color: var(--color-text-lighter);
 				position: relative;
 				> input:not(:focus):not(:active) {
 					border-color: transparent;