diff --git a/resources/assets/stylesheets/fullcalendar.scss b/resources/assets/stylesheets/fullcalendar.scss
index f5b21f1ddc4d37b51d314be7718c05864cc78c43..a879e8f16307db4a12aa11628fd141368255a344 100644
--- a/resources/assets/stylesheets/fullcalendar.scss
+++ b/resources/assets/stylesheets/fullcalendar.scss
@@ -35,8 +35,8 @@ a.fc-event, td.fc-event {
 .fc button.fc-button.fc-state-active {
     box-shadow: none;
 
-    background-color: $base-color !important;
-    color: $white;
+    background-color: var(--base-color) !important;
+    color: var(--white);
 }
 
 /* adjust height: */
@@ -48,7 +48,7 @@ a.fc-event, td.fc-event {
 .studip-fullcalendar-header {
     /* This shall look like a table caption. */
     background-color: transparent;
-    color: $base-gray;
+    color: var(--base-gray);
     font-size: 1.4em;
     text-align: left;
 
@@ -75,15 +75,15 @@ a.fc-event, td.fc-event {
 
 
     .fullcalendar-dialogwidget-widget {
-        background: $white;
-        border: 1px solid $content-color-40;
+        background: var(--white);
+        border: 1px solid var(--content-color-40);
         margin: 15px 0px 0;
     }
 
     .fullcalendar-dialogwidget-widget-header {
         @include clearfix();
-        background: $content-color-20;
-        color: $base-color;
+        background: var(--content-color-20);
+        color: var(--base-color);
         font-weight: bold;
         padding: 4px;
     }
@@ -94,7 +94,7 @@ a.fc-event, td.fc-event {
     }
 
     .fullcalendar-dialogwidget-widget-content {
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
         padding: 4px;
         transition: all 0.5s;
     }
@@ -108,8 +108,8 @@ a.fc-event, td.fc-event {
     td.fc-event {
         border-radius: 0;
         margin: 2px 0px;
-        background-color: $content-color;
-        border: 1px solid $brand-color-light;
+        background-color: var(--content-color);
+        border: 1px solid var(--brand-color-light);
     }
 }
 
@@ -119,14 +119,14 @@ a.fc-event, td.fc-event {
     }
 
     th.fc-day-header, .fc-axis, th.fc-resource-cell {
-        background-color: $content-color-10;
+        background-color: var(--content-color-10);
     }
 }
 
 .calendar-caption {
     background-color: transparent;
     padding-top: 0;
-    color: $base-gray;
+    color: var(--base-gray);
     font-size: 1.4em;
     text-align: left;
     margin-bottom: -10px;
@@ -200,7 +200,7 @@ a.fc-event, td.fc-event {
         display: none;
     }
     th span a {
-        color: $black;
+        color: var(--black);
     }
 
     td.fc-today {
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
index 5f88cf20b2455c9ccacda994658b19e8ec8cfcc2..f771619b1b50808ba97b06a149d81b163f19d998 100644
--- a/resources/assets/stylesheets/highcontrast.scss
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -1049,8 +1049,8 @@ a:hover.tree {
 
 /* Text formatting */
 .cke_button_on {
-    background-color: $base-color !important;
-    border: 1px solid $white;
+    background-color: var(--base-color) !important;
+    border: 1px solid var(--white);
 
     .cke_button_icon {
         filter: brightness(10) !important;
@@ -1060,8 +1060,8 @@ a:hover.tree {
 /* Blubber */
 .blubber_thread,
 .blubber_sideinfo {
-    background-color: $white;
-    border: 2px solid $black;
+    background-color: var(--white);
+    border: 2px solid var(--black);
 }
 
 .blubber_thread .empty_blubber_background {
@@ -1214,14 +1214,14 @@ table.course-search {
                 padding-top: -2px;
 
                 .content-item-title {
-                    color: $base-color;
+                    color: var(--base-color);
                 }
             }
 
         }
 
         &:hover {
-            background-color: $black;
+            background-color: var(--black);
             color: unset;
 
             .content-item-img-wrapper > img {
@@ -1370,12 +1370,12 @@ table.course-search {
 /* Everything else */
 /* Selections */
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-    background-color: $base-color;
+    background-color: var(--base-color);
 }
 
 /* tile view Veranstaltungen */
 .tiles-grid-element-header {
-    background-color: $white !important;
+    background-color: var(--white) !important;
 }
 
 .tiles-grid-element-options .action-menu-icon {
@@ -1384,12 +1384,12 @@ table.course-search {
 
 /* Veranstaltungskategorien */
 fieldset.attribute_table div[container] > div.droparea > div.plugin {
-    border: 1px solid $black;
-    background-color: $white;
+    border: 1px solid var(--black);
+    background-color: var(--white);
 }
 
 .helpbar {
-    background-color: $black;
+    background-color: var(--black);
 }
 
 .fc-unthemed td {
diff --git a/resources/assets/stylesheets/less/buttons.less b/resources/assets/stylesheets/less/buttons.less
index d11ac0ddf9019443c9681fdc787bc0cb921e7024..688682e600eacdc9d838b17f37477065bf2e58ad 100644
--- a/resources/assets/stylesheets/less/buttons.less
+++ b/resources/assets/stylesheets/less/buttons.less
@@ -1,10 +1,10 @@
 /* Stud.IP button styles */
 .button() {
     background: white;
-    border: 1px solid @base-color;
+    border: 1px solid var(--base-color);
     border-radius: 0;
     box-sizing: border-box;
-    color: @base-color;
+    color: var(--base-color);
     cursor: pointer;
     display: inline-block;
     font-family: @font-family-base;
@@ -22,18 +22,18 @@
     width: auto;
 
     &:hover, &:active  {
-        background: @base-color;
+        background: var(--base-color);
         color: white;
     }
 
     &.disabled, &[disabled] {
         box-shadow: none;
-        background: @light-gray-color-20;
+        background: var(--light-gray-color-20);
         cursor: default;
         opacity: 0.65;
 
         &:hover {
-            color: @base-color;
+            color: var(--base-color);
         }
     }
 
@@ -148,13 +148,13 @@ button,
         cursor: pointer;
 
         &[formaction] {
-            color: @base-color;
+            color: var(--base-color);
 
             transition: color 0.3s;
 
             &:hover,
             &:active {
-                color: @active-color;
+                color: var(--active-color);
                 text-decoration: none;
             }
 
diff --git a/resources/assets/stylesheets/less/calendar.less b/resources/assets/stylesheets/less/calendar.less
index 8af7a3aae922abac887967f5dd4aa055d0863f8a..edb2e570d157c28062deab09d3a0eed3267cd912 100644
--- a/resources/assets/stylesheets/less/calendar.less
+++ b/resources/assets/stylesheets/less/calendar.less
@@ -6,27 +6,27 @@ a.day {
 }
 
 a.sday {
-    color: @red;
+    color: var(--red);
     font-weight: bold;
 }
 
 a.hday {
-    color: @red-80;
+    color: var(--red-80);
     font-weight: bold;
 }
 
 span.kwmin {
-    color: @dark-gray-color-80;
+    color: var(--dark-gray-color-80);
     font-weight: bold;
 }
 
 a.lightday {
-    color: @base-color-40;
+    color: var(--base-color-40);
     font-weight: bold;
 }
 
 a.lightsday {
-    color: @red-40;
+    color: var(--red-40);
     font-weight: bold;
 }
 
@@ -37,7 +37,7 @@ a.lightsday {
 .precol1w {
     font-size: 12pt;
     font-weight: bold;
-    color: @light-gray-color;
+    color: var(--light-gray-color);
     text-align: center;
     vertical-align: top;
 }
@@ -45,31 +45,31 @@ a.lightsday {
 .precol2w {
     font-size: 8pt;
     font-weight: bold;
-    color: @light-gray-color;
+    color: var(--light-gray-color);
     text-align: center;
 }
 
 td.calhead, div.calhead {
     font-size: 18pt;
     font-weight: bold;
-    color: @light-gray-color;
+    color: var(--light-gray-color);
     text-align: center;
 }
 
 a:link.calhead {
-    color: @base-color-60;
+    color: var(--base-color-60);
     white-space: nowrap;
     font-weight: bold;
 }
 
 a:hover.calhead {
-    color: @red-60;
+    color: var(--red-60);
 }
 
 .calhead label {
   cursor: pointer;
   &:hover {
-    color: @base-color-40;
+    color: var(--base-color-40);
   }
 
   .media-breakpoint-small-down({
@@ -83,20 +83,20 @@ a:hover.calhead {
 }
 
 .celltoday {
-    background-color: @red-20;
+    background-color: var(--red-20);
 }
 
 td.weekend {
-    background-color: @dark-gray-color-15;
+    background-color: var(--dark-gray-color-15);
 }
 
 td.weekday {
-    background-color: @dark-gray-color-5;
+    background-color: var(--dark-gray-color-5);
 }
 
 td.current {
     padding: 2px;
-    border: 2px solid @red;
+    border: 2px solid var(--red);
 }
 
 table.calendar-week, table.calendar-day {
@@ -159,7 +159,7 @@ nav.calendar-nav {
   }
 
   .calhead {
-    color: @base-color;
+    color: var(--base-color);
   }
 }
 
@@ -175,7 +175,7 @@ nav.calendar-nav {
     }
     & td {
         padding: 3px;
-        border-bottom: 1px solid @dark-gray-color-5;
+        border-bottom: 1px solid var(--dark-gray-color-5);
     }
 }
 
@@ -183,14 +183,14 @@ nav.calendar-nav {
     overflow: hidden;
     text-overflow: ellipsis;
     a {
-        color: @dark-gray-color;
+        color: var(--dark-gray-color);
     }
 }
 
 .calendar-category-mixin(@color-bg) {
     vertical-align: top;
     font-size: 11px;
-    color: @white;
+    color: var(--white);
     padding: 0;
     /* necessary for All-day Events */
     a {
@@ -511,8 +511,8 @@ a.Calendar-course-event-text255 {
 }
 
 .calendar-group-events {
-    background: linear-gradient(to right, #8E8EB2, #BABAD4) repeat-x #8E8EB2;
-    border: solid 1px #505064;
+    background: linear-gradient(to right, var(--base-color-60), var(--content-color-60)) repeat-x var(--base-color-60);
+    border: solid 1px var(--base-gray);
 }
 
 #exc-dates {
@@ -522,7 +522,7 @@ a.Calendar-course-event-text255 {
     min-height: 5em;
     max-height: 10em;
     overflow: auto;
-    border: 1px solid #888;
+    border: 1px solid var(--dark-gray-color-60);
 
     img {
         vertical-align: text-top;
@@ -539,18 +539,18 @@ table.tabdaterow {
 }
 
 td.tddaterowp {
-    border: 1px solid #FFFFFF;
-    background-color: #f0f0f0;
+    border: 1px solid var(--white);
+    background-color: var(--dark-gray-color-10);
     font-weight: bold;
-    color: #009900;
+    color: var(--dark-green);
     font-size: 8pt;
 }
 
 td.tddaterowpx {
-    border: 1px solid #D00000;
-    background-color: #f0f0f0;
+    border: 1px solid var(--active-color);
+    background-color: var(--dark-gray-color-10);
     font-weight: bold;
-    color: #009900;
+    color: var(--dark-green);
     font-size: 8pt;
 }
 
diff --git a/resources/assets/stylesheets/less/files.less b/resources/assets/stylesheets/less/files.less
index 0b40c0b4e024de953afdbc76cea8384f3998e2b4..b604da9bfd6b73e75fab16e3f144f5f37bf538f7 100644
--- a/resources/assets/stylesheets/less/files.less
+++ b/resources/assets/stylesheets/less/files.less
@@ -27,7 +27,7 @@
     }
 
     &.uploadbar-outer {
-        border: @base-color solid 1px;
+        border: var(--base-color) solid 1px;
     }
     &.uploadbar-inner {
         position: absolute;
@@ -35,7 +35,7 @@
         right: 100%;
         bottom: 0;
         left: 0;
-        background-color: @base-color;
+        background-color: var(--base-color);
         overflow: hidden;
         white-space: nowrap;
 
@@ -45,9 +45,9 @@
         transition: right 200ms;
 
         img {
-            background-color: @base-color;
+            background-color: var(--base-color);
             flex: 0;
-            outline: 10px solid @base-color;
+            outline: 10px solid var(--base-color);
         }
         .ufo {
             animation: ufoflight 1.5s linear infinite;
@@ -69,14 +69,6 @@
 
         color: (#fff - @base-color);
         font-size: large;
-        //text-shadow: 0 1px 0 @base-color,
-        //             1px 1px 0 @base-color,
-        //             1px 0 0 @base-color,
-        //             1px -1px 0 @base-color,
-        //             0 -1px 0 @base-color,
-        //             -1px 1px 0 @base-color,
-        //             0 1px 0 @base-color,
-        //             -1px -1px 0 @base-color;
     }
 }
 
@@ -112,7 +104,7 @@ div.file_select_possibilities, .folder_type_select_possibilities {
             cursor: pointer;
             background-color: transparent;
             margin: 10px;
-            border: thin solid @content-color-20;
+            border: thin solid var(--content-color-20);
             padding: 10px;
             width: @width;
             min-width: @width;
@@ -134,8 +126,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
 
         > .important-item {
             min-width: calc(100% - 1.5em);
-            background-color: #E7EBF1;
-            border-color: @base-color-60;
+            background-color: var(--content-color-20);
+            border-color: var(--base-color-60);
             display: flex;
             flex-direction: row;
             height: initial;
@@ -149,7 +141,7 @@ div.file_select_possibilities, .folder_type_select_possibilities {
                 width: 100%;
                 text-align: left;
                 margin-left: 1em;
-                color: @black;
+                color: var(--black);
             }
         }
     }
@@ -200,8 +192,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
 
     input[name=content_terms_of_use_id]:checked + label,
     input[name=oer_upload]:checked + label {
-        background-color: @brand-color-darker;
-        color: @contrast-content-white;
+        background-color: var(--brand-color-darker);
+        color: var(--contrast-content-white);
 
         img {
             filter: invert(100%) brightness(200%);
@@ -216,8 +208,8 @@ div.file_select_possibilities, .folder_type_select_possibilities {
     }
 
     input[name=folder_type]:checked + label {
-        background-color: @brand-color-darker;
-        color: @contrast-content-white;
+        background-color: var(--brand-color-darker);
+        color: var(--contrast-content-white);
 
         img {
             filter: invert(100%) brightness(200%);
@@ -428,7 +420,7 @@ form.default {
         }
         > label {
             cursor: pointer;
-            border: 1px solid @content-color-40;
+            border: 1px solid var(--content-color-40);
             transition: background-color 200ms;
             display: flex;
             justify-content: space-between;
@@ -449,17 +441,17 @@ form.default {
             }
         }
         > label:first-of-type {
-            border-top: 1px solid @content-color-40;
+            border-top: 1px solid var(--content-color-40);
         }
         > div {
-            border: 1px solid @content-color-40;
+            border: 1px solid var(--content-color-40);
             border-top: none;
             display: none;
             padding: 10px;
 
         }
         > input[type=radio]:checked + label {
-            background-color: @content-color-20;
+            background-color: var(--content-color-20);
             transition: background-color 200ms;
             > .arrow {
                 display: none;
@@ -490,7 +482,7 @@ form.default {
 
 table.documents {
     tr:target {
-        background-color: @activity-color-20;
+        background-color: var(--activity-color-20);
     }
 }
 
@@ -500,7 +492,7 @@ table.documents {
 h2.search-result-info {
     font-weight: normal;
     font-size: 1.4em;
-    color: @base-gray;
+    color: var(--base-gray);
     border-bottom: none;
     margin-top: 0;
 }
diff --git a/resources/assets/stylesheets/less/jquery-ui/studip.less b/resources/assets/stylesheets/less/jquery-ui/studip.less
index 328506250b6b000a46137fdb1af387fdfac76af0..1bd0fbf4a6e84848a99975c7cb85a608ed49cca2 100644
--- a/resources/assets/stylesheets/less/jquery-ui/studip.less
+++ b/resources/assets/stylesheets/less/jquery-ui/studip.less
@@ -20,11 +20,11 @@
 }
 
 .ui-widget-content {
-    background: #fff;
+    background: var(--white);
 }
 
 .ui-widget-header {
-    background-color: @brand-color-lighter;
+    background-color: var(--brand-color-lighter);
     background-image: none;
 }
 .ui-widget_columnl {
@@ -42,7 +42,7 @@
 }
 
 .ui-widget_head {
-    background-color: @brand-color-lighter;
+    background-color: var(--brand-color-lighter);
     color: white;
     font-size: 1.3em;
     line-height: 30px;
@@ -80,7 +80,7 @@
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-    background-color: @brand-color-light;
+    background-color: var(--brand-color-light);
     color: white;
 }
 
@@ -89,12 +89,12 @@
     .ui-state-default,
     .ui-state-active,
     .ui-state-hover {
-        background: @content-color-20;
+        background: var(--content-color-20);
         border-radius: 0;
         border: none;
-        border-top: 1px solid @light-gray-color-20;
-        border-bottom: 1px solid @light-gray-color-20;
-        color: #000;
+        border-top: 1px solid var(--light-gray-color-20);
+        border-bottom: 1px solid var(--light-gray-color-20);
+        color: var(--black);
         font-size: 10pt;
         margin: 0;
         padding: 5px 5px 5px 30px;
@@ -103,11 +103,11 @@
 }
 
 .ui-accordion .ui-accordion-content {
-    background: #ffffff;
+    background: var(--white);
     margin: 0;
     padding: 0;
     border: 0;
-    border-bottom: 1px solid @light-gray-color-20;
+    border-bottom: 1px solid var(--light-gray-color-20);
 }
 
 .ui-state-hover, .ui-widget-content .ui-state-hover,
@@ -117,7 +117,7 @@
 }
 
 .ui-autocomplete {
-    border: 1px solid @dark-gray-color-45;
+    border: 1px solid var(--dark-gray-color-45);
     padding: 1px;
 
     .ui-menu-item {
@@ -127,7 +127,7 @@
             text-overflow: ellipsis;
 
             &.ui-state-active {
-                background: @base-color;
+                background: var(--base-color);
                 border: 0;
                 margin: 0;
             }
@@ -146,7 +146,7 @@
 
 /* --- textarea resizer ----------------------------------------------------- */
 textarea.ui-resizable-handle.ui-resizable-s {
-    background: #eee url("@{image-path}/vendor/handle_background.png") no-repeat center;
+    background: var(--dark-gray-color-10) url("@{image-path}/vendor/handle_background.png") no-repeat center;
     bottom: 0;
     cursor: s-resize;
     height: 12px;
@@ -154,7 +154,7 @@ textarea.ui-resizable-handle.ui-resizable-s {
 
 // Date picker
 .ui-datepicker-header {
-    background-color: @brand-color-light;
+    background-color: var(--brand-color-light);
 }
 
 .ui-datepicker-header .ui-icon {
@@ -162,14 +162,14 @@ textarea.ui-resizable-handle.ui-resizable-s {
 }
 
 .ui-datepicker-calendar .ui-state-active {
-    background-color: @white;
-    color: @brand-color-darker;
-    border: 1px solid @base-gray;
+    background-color: var(--white);
+    color: var(--brand-color-darker);
+    border: 1px solid var(--base-gray);
 }
 
 .ui-datepicker-calendar .ui-state-active.ui-state-hover {
-    background-color: @brand-color-light;
-    color: @white;
+    background-color: var(--brand-color-light);
+    color: var(--white);
 }
 
 .hasDatepicker,
@@ -181,9 +181,9 @@ textarea.ui-resizable-handle.ui-resizable-s {
     background-position: right 3px center;
     background-repeat: no-repeat;
     min-width: 12ex;
-    border: 1px solid @light-gray-color-40;
+    border: 1px solid var(--light-gray-color-40);
     &:focus {
-        border-color: @brand-color-dark;
+        border-color: var(--brand-color-dark);
     }
 }
 .hasTimepicker,
@@ -193,9 +193,9 @@ textarea.ui-resizable-handle.ui-resizable-s {
     background-position: right 3px center;
     background-repeat: no-repeat;
     min-width: 10ex;
-    border: 1px solid @light-gray-color-40;
+    border: 1px solid var(--light-gray-color-40);
     &:focus {
-        border-color: @brand-color-dark;
+        border-color: var(--brand-color-dark);
     }
 }
 [data-datetime-picker],
@@ -205,6 +205,6 @@ textarea.ui-resizable-handle.ui-resizable-s {
 
 .ui-slider {
     .ui-slider-range {
-        background-color: @base-color;
+        background-color: var(--base-color);
     }
 }
diff --git a/resources/assets/stylesheets/less/messagebox.less b/resources/assets/stylesheets/less/messagebox.less
index c1c2609a65d96ad5271d402060014d1b644c5cfa..ce29b28eeeaf6e79cdec4ba27af2ad2f6b005dd9 100644
--- a/resources/assets/stylesheets/less/messagebox.less
+++ b/resources/assets/stylesheets/less/messagebox.less
@@ -72,11 +72,11 @@ div.messagebox_details {
     }
 }
 
-.messagebox(info,      #000, white,   @base-color);
-.messagebox(success,   #000, white,   @dark-green);
-.messagebox(error,     #000, white,   @red);
-.messagebox(exception, @red, @red-20, @red);
-.messagebox(warning,   #000, white,   @yellow-60, 'advice');
+.messagebox(info, var(--black), var(--white), var(--base-color));
+.messagebox(success, var(--black), var(--white), var(--dark-green));
+.messagebox(error, var(--black), var(--white), var(--red));
+.messagebox(exception, var(--red), var(--red-20), var(--red));
+.messagebox(warning, var(--black), var(--white), var(--yellow-60), 'advice');
 
 // Define modal messagebox
 .modaloverlay {
@@ -109,7 +109,7 @@ div.messagebox_details {
         width: auto;
 
         color: #000;
-        border-color: @yellow;
+        border-color: var(--yellow);
         background-color: white;
         background-image: url("@{image-path}/messagebox/question.png");
         background-size: 32px 32px;
diff --git a/resources/assets/stylesheets/less/schedule.less b/resources/assets/stylesheets/less/schedule.less
index 6f57e2b537628271d4e64b1a160a4577977fdfb6..bdb9b25e826c7a8867c399c8ef1b749dfccdd0ef 100644
--- a/resources/assets/stylesheets/less/schedule.less
+++ b/resources/assets/stylesheets/less/schedule.less
@@ -1,10 +1,10 @@
 /* --- ablaufplan / dates --------------------------------------------------- */
 .dates_items th, .dates_items td {
-    border-bottom: 3px solid @white;
+    border-bottom: 3px solid var(--white);
 }
 
 .dates_opened td {
-    border-bottom: 3px solid #f3f5f8;
+    border-bottom: 3px solid var(--content-color-10);
 }
 
 .dates_content td {
@@ -18,27 +18,27 @@
 
 #schedule_headings {
     margin-left: 41px;
-    background-color: #e8eef7;
+    background-color: var(--content-color-20);
 }
 
 table.schedule_headings td {
-    background-color: #e8eef7;
+    background-color: var(--content-color-20);
 }
 
 div.schedule_day {
-    border-right: 3px double #ddd;
+    border-right: 3px double var(--dark-gray-color-20);
     position: relative;
 }
 
 div.schedule_marker {
-    border-bottom: 1px dotted #ddd;
-    border-top: 1px solid #ddd;
+    border-bottom: 1px dotted var(--dark-gray-color-20);
+    border-top: 1px solid var(--dark-gray-color-20);
     padding: 0;
 }
 
 div.schedule_hours {
-    border-top: 1px solid #ddd;
-    border-right: 1px solid #ddd;
+    border-top: 1px solid var(--dark-gray-color-20);
+    border-right: 1px solid var(--dark-gray-color-20);
     color: black;
     padding-bottom: 1px;
     padding-right: 3px;
@@ -93,8 +93,8 @@ div.snatch {
 }
 
 #schedule_new_entry {
-    background-color: #e8eef7;
-    border: 2px solid #e0e0f0;
+    background-color: var(--content-color-20);
+    border: 2px solid var(--dark-gray-color-15);
     height: 230px;
     position: absolute;
     width: 400px;
@@ -102,15 +102,15 @@ div.snatch {
 }
 #schedule_entry_new {
     dl {
-        border: 1px solid #5c2d64;
-        background-color: #7c5783;
+        border: 1px solid var(--dark-violet);
+        background-color: var(--dark-violet-80);
     }
-    dt { background-color: #5c2d64; }
+    dt { background-color: var(--dark-violet); }
 }
 
 div.schedule_edit_entry, #schedule_settings {
-    background-color: #E8EEF7;
-    border: 2px solid #E0E0F0;
+    background-color: var(--content-color-20);
+    border: 2px solid var(--dark-gray-color-15);
     height: auto;
     left: 50%;
     margin-left: -25%;
@@ -150,7 +150,7 @@ div.invisible_entry {
 }
 
 span.invisible_entry {
-    background-color: #600;
+    background-color: var(--red);
     font-style: italic;
 }
 
@@ -200,7 +200,7 @@ td.schedule-adminbind {
         display: none;
 
         &:checked + label {
-            outline: 1px solid @black;
+            outline: 1px solid var(--black);
 
             position: relative;
             .icon('before', 'accept', 'info', 24px);
@@ -209,13 +209,13 @@ td.schedule-adminbind {
                 left: 50%;
                 top: 50%;
                 transform: translate(-50%, -50%);
-                filter: drop-shadow(0 0 2px @white);
+                filter: drop-shadow(0 0 2px var(--white));
             }
         }
     }
 
     label {
-        border: 1px solid @white;
+        border: 1px solid var(--white);
         display: inline-block;
         height: 32px;
         width: 32px;
diff --git a/resources/assets/stylesheets/less/tables.less b/resources/assets/stylesheets/less/tables.less
index eb576dd075bc97c3938163b32f1791c1569513dc..ba5004e7446ca3406551504f1b0230810f0dda63 100644
--- a/resources/assets/stylesheets/less/tables.less
+++ b/resources/assets/stylesheets/less/tables.less
@@ -1,18 +1,18 @@
 /* --- Tabellen ------------------------------------------------------------- */
 table.header, .table_header { //normale Tabellenheader
-    background-color:  @table-header-color;
-    border-bottom: 1px solid #575757;
-    color: #000;
+    background-color:  var(--table-header-color);
+    border-bottom: 1px solid var(--dark-gray-color-80);
+    color: var(--black);
     padding: 4px;
 
 }
 
 .table_header_bold { //formerly known as topic(-header)
-    background-color: @brand-color-lighter;
-    border-color: @brand-color-darker;
+    background-color: var(--brand-color-lighter);
+    border-color: var(--brand-color-darker);
     border-style: solid;
     border-width: 0 0 1px 0;
-    color: @white;
+    color: var(--white);
     font-size: 12pt;
     padding: 3px 5px;
 
@@ -20,7 +20,7 @@ table.header, .table_header { //normale Tabellenheader
 }
 
 
-table.links1 { background-color: @white; }
+table.links1 { background-color: var(--white); }
 table.logintable {
     background-image: url("@{image-path}/login.jpg");
     background-size: 750px 350px;
@@ -33,7 +33,7 @@ table.logintable {
 
 .gradient-bar(@flow-content: true) {
     #gradient > .vertical-three-colors(#cdd9ed, #e3eaf6, 40%, #e3eaf6);
-    border-top: 1px solid @brand-color-lighter;
+    border-top: 1px solid var(--brand-color-lighter);
     line-height: 17pt;
     height: 25px;
 }
@@ -54,36 +54,36 @@ td.toolbar, td.printhead {
 }
 
 td {
-    &.aufklapp { background-color: #fffaee; }
-    &.angemeldet { border: 1px solid #000; }
+    &.aufklapp { background-color: var(--dark-gray-color-5); }
+    &.angemeldet { border: 1px solid var(--black); }
     &.nix { background-color: transparent; }
     &.quote {
-        border: 1px solid #000;
+        border: 1px solid var(--black);
         font-size: 8px;
     }
     &.rahmen_steel {
-        background-color: #f3f5f8;
-        border: 1px solid #000;
+        background-color: var(--content-color-10);
+        border: 1px solid var(--black);
     }
     &.rahmen_table_row_odd {
-        background-color: @content-color-20;
-        border: 1px solid #000;
+        background-color: var(--content-color-20);
+        border: 1px solid var(--black);
     }
     &.rahmen_white {
-        background: #fff;
-        border: 1px solid #000;
+        background: var(--white);
+        border: 1px solid var(--black);
     }
     &.table_header_bold_red {
         border: none;
-        background-color: #fdc6c6;
-        border-bottom: 1px solid #990000;
-        color: #000;
+        background-color: var(--red-20);
+        border-bottom: 1px solid var(--red);
+        color: var(--red);
         height: 20px;
     }
 }
 
 table.blank, td.blank, td.onlineinfo, td.blanksmall {
-    background-color: #fff;
+    background-color: var(--white);
 }
 
 td.tree-indent {
@@ -120,13 +120,13 @@ td.tree-elbow-line, td.tree-elbow-end {
     }
 
     .toggle-indicator {
-        color: #000;
+        color: var(--black);
         font-weight: bold;
 
         a {
             background: left center no-repeat;
             .background-icon('arr_1down', 'clickable');
-            color: #000;
+            color: var(--black);
             cursor: pointer;
             display: block;
         }
@@ -162,15 +162,15 @@ td.tree-elbow-line, td.tree-elbow-end {
 }
 
 /* --- Sonstige ------------------------------------------------------------- */
-.gruppe0 { background-color: @group-color-0 !important; }
-.gruppe1 { background-color: @group-color-1 !important; }
-.gruppe2 { background-color: @group-color-2 !important; }
-.gruppe3 { background-color: @group-color-3 !important; }
-.gruppe4 { background-color: @group-color-4 !important; }
-.gruppe5 { background-color: @group-color-5 !important; }
-.gruppe6 { background-color: @group-color-6 !important; }
-.gruppe7 { background-color: @group-color-7 !important; }
-.gruppe8 { background-color: @group-color-8 !important; }
+.gruppe0 { background-color: var(--group-color-0) !important; }
+.gruppe1 { background-color: var(--group-color-1) !important; }
+.gruppe2 { background-color: var(--group-color-2) !important; }
+.gruppe3 { background-color: var(--group-color-3) !important; }
+.gruppe4 { background-color: var(--group-color-4) !important; }
+.gruppe5 { background-color: var(--group-color-5) !important; }
+.gruppe6 { background-color: var(--group-color-6) !important; }
+.gruppe7 { background-color: var(--group-color-7) !important; }
+.gruppe8 { background-color: var(--group-color-8) !important; }
 
 #my_seminars, #settings-notifications {
     .gruppe0, .gruppe1, .gruppe2, .gruppe3, .gruppe4,
@@ -185,31 +185,31 @@ td.tree-elbow-line, td.tree-elbow-end {
     }
 }
 
-.grey      { background: #bbb none; }
-.white     { background: #fff none; }
+.grey      { background: var(--dark-gray-color-40) none; }
+.white     { background: var(--white) none; }
 
 .red_gradient {
     #gradient > .vertical-three-colors(#e3969a, #e8b6b9, 60%, #e8b6b9);
-    border-top: 2px solid #b35357;
+    border-top: 2px solid var(--brown);
 }
 
 /* --- Styles fuer printhead und printcontent ------------------------------- */
 table {
     td.printcontent {
-        background-color: @dark-gray-color-5;
+        background-color: var(--dark-gray-color-5);
         text-align: left;
     }
     td.printcontent:hover {
-        background-color: @dark-gray-color-5;
+        background-color: var(--dark-gray-color-5);
     }
     td.printhead2 {
         background-image: url("@{image-path}/content_object_arr-right.png");
-        border-top: 1px solid @brand-color-lighter;
+        border-top: 1px solid var(--brand-color-lighter);
         padding: 0;
     }
     td.printhead3 {
         background-image: url("@{image-path}/content_object_arr-down.png");
-        border-top: 1px solid @brand-color-lighter;
+        border-top: 1px solid var(--brand-color-lighter);
         padding: 0;
     }
 }
@@ -279,9 +279,9 @@ tr.sortable {
     }
     td:first-child[colspan], .divider > th, .divider > td {
         background-color: lighten(@brand-color-lighter, 20%);
-        border-bottom: 1px solid #444;
-        border-top: 1px solid #444;
-        color: #000;
+        border-bottom: 1px solid var(--base-gray);
+        border-top: 1px solid var(--base-gray);
+        color: var(--black);
         font-weight: bold;
         text-align: center;
     }
@@ -297,15 +297,15 @@ tr.sortable {
     }
     tfoot {
         td {
-            background: @table-footer-color;
+            background: var(--table-footer-color);
             text-align: center;
         }
         tr:first-child td {
-            border-top: 1px solid #575757;
+            border-top: 1px solid var(--dark-gray-color-80);
         }
     }
     label.required:after {
-        color: red;
+        color: var(--red);
         content:'*';
         font-size: 1.5em;
         padding-left: 5px;
@@ -317,8 +317,8 @@ tr.sortable {
         &:nth-child(-n+2) { text-align: left; }
     }
     .bordered {
-        &.left  { border-left: 1px solid @brand-color-lighter; }
-        &.right { border-right: 1px solid @brand-color-lighter; }
+        &.left  { border-left: 1px solid var(--brand-color-lighter); }
+        &.right { border-right: 1px solid var(--brand-color-lighter); }
     }
 }
 
@@ -343,19 +343,19 @@ table.tree {
         }
     }
     td.blank {
-        background: #fff;
+        background: var(--white);
         border: 0;
     }
     td.in-between {
-        background: #fff url("@{image-path}/tree-line.gif") center repeat-y;
+        background: var(--white) url("@{image-path}/tree-line.gif") center repeat-y;
         border: 0;
     }
     td.leaf {
-        background: #fff url("@{image-path}/tree-leaf.gif") center no-repeat;
+        background: var(--white) url("@{image-path}/tree-leaf.gif") center no-repeat;
         border: 0;
     }
     td.end {
-        background: #fff url("@{image-path}/tree-end.gif") center no-repeat;
+        background: var(--white) url("@{image-path}/tree-end.gif") center no-repeat;
         border: 0;
     }
     .centered {
@@ -365,8 +365,8 @@ table.tree {
 }
 
 .table_footer, .table_footer td {
-    background-color: #e9e9e9;
-    border-top: 1px solid #c8c8c8;
+    background-color: var(--dark-gray-color-10);
+    border-top: 1px solid var(--dark-gray-color-30);
 }
 
 // New table definition
@@ -393,7 +393,7 @@ table.default {
     > caption {
         background-color: transparent;
         padding-top: 0px;
-        color: @headings-color;
+        color: var(--headings-color);
         font-size: 1.4em;
         text-align: left;
 
@@ -415,26 +415,26 @@ table.default {
     }
     > thead {
         > tr > th {
-            background-color: @content-color-20;
+            background-color: var(--content-color-20);
             border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
-            border-top: 1px solid @brand-color-darker;
+            border-top: 1px solid var(--brand-color-darker);
             font-size: 1.0em;
         }
     }
     > tbody {
         > tr {
             > th {
-                background-color: @content-color-20;
-                border-top: 1px solid @brand-color-darker;
+                background-color: var(--content-color-20);
+                border-top: 1px solid var(--brand-color-darker);
                 border-bottom: 1px solid fadeout(@brand-color-lighter, 80%);
                 text-align: left;
             }
             > td {
-                border-bottom: 1px solid @table-header-color;
+                border-bottom: 1px solid var(--table-header-color);
                 transition: background-color 0.3s;
             }
             &.dragover > td {
-                background-color: @yellow-20;
+                background-color: var(--yellow-20);
             }
         }
     }
@@ -468,7 +468,7 @@ table.default {
                 bottom: 0;
                 left: 0;
                 width: 2px;
-                background-color: @red;
+                background-color: var(--red);
             }
         }
         .action-menu {
@@ -476,7 +476,7 @@ table.default {
         }
     }
     > tbody:last-of-type > tr:last-child > td {
-        border-bottom: 1px solid @brand-color-darker;
+        border-bottom: 1px solid var(--brand-color-darker);
     }
     // Hover effect
     &:not(.nohover) > tbody:not(.nohover) > tr:not(.nohover):hover > td:not(.nohover) {
@@ -487,8 +487,8 @@ table.default {
     }
     > tfoot {
         > tr > td {
-            background-color: @content-color-20;
-            border-top: 1px solid @brand-color-darker;
+            background-color: var(--content-color-20);
+            border-top: 1px solid var(--brand-color-darker);
             padding-left: 10px;
             padding-right: 10px;
         }
@@ -506,7 +506,7 @@ table.default {
     }
     > caption .actions {
         font-size: @font-size-base;
-        border-left: 1px solid @brand-color-darker;
+        border-left: 1px solid var(--brand-color-darker);
         margin-bottom: -5px;
         min-height: 26px;
         padding-bottom: 3px;
@@ -526,7 +526,7 @@ table.default {
         }
         .caption-content {
             flex-grow: 1;
-            border-right: 1px solid @brand-color-darker;
+            border-right: 1px solid var(--brand-color-darker);
             padding-bottom: 5px;
             padding-right: 0.5em;
             margin-right: 0.5em;
@@ -647,7 +647,7 @@ table.withdetails {
             padding-bottom: 10px;
             > .detailscontainer {
                 padding: 5px;
-                border: 1px solid @table-header-color;
+                border: 1px solid var(--table-header-color);
                 margin-top: -1px;
                 border-top-color: white;
             }
@@ -676,9 +676,9 @@ table.withdetails {
     .tablesorter-header:not(.sorter-false) {
         white-space: nowrap;
 
-        color: @base-color;
+        color: var(--base-color);
         &:hover {
-            color: @active-color;
+            color: var(--active-color);
             cursor: pointer;
         }
         &.tablesorter-headerDesc:hover .tablesorter-header-inner::after {
@@ -710,7 +710,7 @@ table#schedule_data {
             td {
                 text-align: center;
                 vertical-align: top;
-                background-color: @content-color-20;
+                background-color: var(--content-color-20);
                 padding-right: 2px;
                 padding: 0px;
                 &:first-child {
@@ -728,7 +728,7 @@ table#schedule_data {
         td:first-child {
             text-align: right;
             vertical-align: top;
-            background-color: @content-color-20;
+            background-color: var(--content-color-20);
             padding-right: 2px;
             padding: 0px;
         }
@@ -745,15 +745,15 @@ table.course-search{
     @max-width-s: 8em;
     @max-width-m: 48em;
     @max-width-l: 100%;
-    border: 1px solid @content-color-40;
+    border: 1px solid var(--content-color-40);
     padding: 0px;
     border-top: 0;
     caption.legend {
         box-sizing: border-box;
         background-color: @fieldset-header;
-        border: 1px solid @content-color-40;
+        border: 1px solid var(--content-color-40);
         border-bottom: 0;
-        color: @brand-color-dark;
+        color: var(--brand-color-dark);
         font-size: 12pt;
         font-weight: bold;
         line-height: 2em;
@@ -768,7 +768,7 @@ table.show-tree {
     width:100%;
     padding: 0px 10px 10px 10px;
     td.b-top-va-center {
-        border-top: 1px solid @content-color-40;
+        border-top: 1px solid var(--content-color-40);
         padding-top: 10px;
         vertical-align:middle;
     }
@@ -815,7 +815,7 @@ table.show-tree {
             }
             a:hover{
                 background-color: @fieldset-header !important;
-                color: @base-color !important;
+                color: var(--base-color) !important;
             }
         }
 
diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss
index 56b1317c41243a4253b079dcda3ffd279b7a0fcb..a25beedf398d4649a18a9c9433042a2e0055e5b3 100644
--- a/resources/assets/stylesheets/scss/actionmenu.scss
+++ b/resources/assets/stylesheets/scss/actionmenu.scss
@@ -1,5 +1,5 @@
 $action-menu-icon-size: 20px;
-$action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
+$action-menu-shadow: 1px 1px 1px var(--dark-gray-color-60);
 
 .action-menu {
     display: inline-block;
@@ -31,8 +31,8 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
 
         padding: 4px 8px;
 
-        background: $white;
-        border: thin solid $dark-gray-color-45;
+        background: var(--white);
+        border: thin solid var(--dark-gray-color-45);
         box-shadow: $action-menu-shadow;
         font-weight: normal;
         text-align: left;
@@ -60,7 +60,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
 
             display: block;
             position: absolute;
-            background:  $base-color;
+            background: var(--base-color);
             border-radius: 50%;
             opacity: 1;
             left: 50%;
@@ -107,7 +107,7 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
             > label {
                 &,
                 &:hover {
-                    color: $dark-gray-color-80;
+                    color: var(--dark-gray-color-80);
                     cursor: default;
                 }
             }
@@ -135,10 +135,10 @@ $action-menu-shadow: 1px 1px 1px $dark-gray-color-60;
 
         > label,
         > button {
-            color: $base-color;
+            color: var(--base-color);
             cursor: pointer;
             &:hover {
-                color: $active-color;
+                color: var(--active-color);
             }
         }
 
diff --git a/resources/assets/stylesheets/scss/activityfeed.scss b/resources/assets/stylesheets/scss/activityfeed.scss
index e1cb6aaf62b22f4b44085dc1233836a3b3ee85f5..507262e5afb4acc412e6087ff2907adfec4e2743 100644
--- a/resources/assets/stylesheets/scss/activityfeed.scss
+++ b/resources/assets/stylesheets/scss/activityfeed.scss
@@ -5,14 +5,14 @@
     overflow-y: auto;
 
     .activity {
-        border: 1px solid $content-color-40;
+        border: 1px solid var(--content-color-40);
         width: 95%;
         margin: 30px auto;
 
     }
 
     .activity header {
-        color: $base-color;
+        color: var(--base-color);
         padding: 5px;
         display: flex;
         position: relative;
@@ -22,10 +22,10 @@
             border-radius: 50%;
             width: 42px;
             height: 42px;
-            background: $base-color;
+            background: var(--base-color);
             position: absolute;
             top: -20px;
-            border: 3px solid $white;
+            border: 3px solid var(--white);
             cursor: pointer;
 
             &.left {
@@ -51,7 +51,7 @@
             }
             h3 {
                 display: inline;
-                color: $base-color;
+                color: var(--base-color);
                 border-bottom: none;
                 font-size: 14px;
                 vertical-align: 6px;
@@ -62,7 +62,7 @@
             max-width: 25px;
         }
         .activity-date{
-            color: $base-gray;
+            color: var(--base-gray);
             font-size: 0.75em ;
             margin: 0 0 0 30px;
             display: block;
@@ -73,7 +73,7 @@
 
     .activity-content{
         padding: 5px;
-        background-color: $white;
+        background-color: var(--white);
         margin-left: 30px;
         display: none;
     }
@@ -117,7 +117,7 @@
 
 
     .activity-day {
-        color: $base-gray;
+        color: var(--base-gray);
         font-size: 0.75em ;
         margin: 0 45%;
     }
@@ -129,7 +129,7 @@
     }
 
     .loading-indicator span {
-        background-color: $light-gray-color;
+        background-color: var(--light-gray-color);
         border-radius: 50%;
         height: 10px;
         position: relative;
diff --git a/resources/assets/stylesheets/scss/admin.scss b/resources/assets/stylesheets/scss/admin.scss
index d8ac4d30d6c47cb61d4473b43186a291cda179fb..67b87924c3588fba80e6b16911ece6e0dfaad8bd 100644
--- a/resources/assets/stylesheets/scss/admin.scss
+++ b/resources/assets/stylesheets/scss/admin.scss
@@ -7,12 +7,12 @@
     padding-left: 0px;
     position: relative;
     text-align: center;
-    background-color: $content-color-20;
+    background-color: var(--content-color-20);
     @include background-icon(upload, clickable, 50);
     background-repeat: no-repeat;
     background-position: center 10px;
     padding-top: 70px;
-    color: $base-color;
+    color: var(--base-color);
     cursor: pointer;
 
     input[type=file] {
@@ -27,9 +27,9 @@
     }
 
     &.hovered {
-        background-color: $base-color;
+        background-color: var(--base-color);
         @include background-icon(upload, info_alt, 50);
-        color: $white;
+        color: var(--white);
     }
 }
 .js .widget-links .drag-and-drop {
@@ -62,7 +62,7 @@ fieldset.attribute_table {
         width: 150px;
         max-width: 150px;
         overflow: hidden;
-        border: thin solid #cccccc;
+        border: thin solid var(--dark-gray-color-30);
         vertical-align: top;
         margin-top: 3px;
         margin-bottom: 3px;
@@ -70,7 +70,7 @@ fieldset.attribute_table {
     div[container] > h2 {
         display: block;
         width: 100%;
-        background-color: #dddddd;
+        background-color: var(--dark-gray-color-20);
         font-size: 12px;
         text-align: center;
         margin: 0;
@@ -81,12 +81,10 @@ fieldset.attribute_table {
     }
     div[container] > div.droparea > div.plugin {
         cursor: move;
-        border: thin solid #cccccc;
+        border: thin solid var(--dark-gray-color-30);
         border-radius: 5px;
-        background-color: #dddddd;
-        margin: 5px;
-        margin-left: 7px;
-        margin-right: 7px;
+        background-color: var(--dark-gray-color-20);
+        margin: 5px 7px;
         display: inline-block;
         min-width: 132px;
         max-width: 132px;
@@ -94,10 +92,10 @@ fieldset.attribute_table {
     div[container] > div.droparea > div > h2 {
         display: block;
         width: 100%;
-        background-color: #cccccc;
+        background-color: var(--dark-gray-color-30);
         font-size: 12px;
         text-align: center;
-        margin: 0px;
+        margin: 0;
     }
     div[container] > div.droparea > div.deactivated {
         opacity: 0.5;
@@ -110,8 +108,8 @@ fieldset.attribute_table {
     }
     hr {
         height: 1px;
-        color: #aaaaaa;
-        background-color: #aaaaaa;
+        color: var(--dark-gray-color-45);
+        background-color: var(--dark-gray-color-45);
         border: none;
     }
     div[container]#deactivated_modules {
diff --git a/resources/assets/stylesheets/scss/ajax.scss b/resources/assets/stylesheets/scss/ajax.scss
index 053395fa01ae4168fae6adac7c0982e6d423557b..98e8e4fb769be4d2ed7a35da15dab2c6b7c08f0d 100644
--- a/resources/assets/stylesheets/scss/ajax.scss
+++ b/resources/assets/stylesheets/scss/ajax.scss
@@ -1,8 +1,8 @@
 /* --- AJAX indicator ------------------------------------------------------- */
 #ajax_notification {
-    background-color: #7387ac;
+    background-color: var(--base-color-60);
     bottom: 0;
-    color: $white;
+    color: var(--white);
     display: none;
     font-size: 1.3em;
     font-weight: bold;
@@ -21,7 +21,7 @@
 
     .notification {
         background: rgba(255, 255, 255, 0.5) url("#{$image-path}/loading-indicator.svg") center center no-repeat;
-        border: 1px solid #ccc;
+        border: 1px solid var(--dark-gray-color-30);
         border-radius: 8px;
         display: inline-block;
         height: 16px;
diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index 1b70ae72e54c80600f2d82e02b42507614ca7808..64ccff82e2a60228ed2b9912543e41fef4b8695f 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -1,7 +1,7 @@
 $article-padding: 10px;
 
 article.studip {
-    border: 1px solid $content-color-40;
+    border: 1px solid var(--content-color-40);
 
     margin-bottom: $article-padding;
     padding: $article-padding;
@@ -18,7 +18,7 @@ article.studip {
         flex-wrap: wrap;
 
         padding: 2px;
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
         margin: -$article-padding;
         margin-bottom: $article-padding;
 
@@ -35,7 +35,7 @@ article.studip {
         h1 {
             padding: 5px;
             margin: 0;
-            color: $base-color;
+            color: var(--base-color);
             border-bottom: none;
             font-size: medium;
 
@@ -60,7 +60,7 @@ article.studip {
             padding: 2px;
 
             > * {
-                border-right: 1px solid $content-color;
+                border-right: 1px solid var(--content-color);
                 padding-right: 4px;
                 margin-right: 4px;
 
@@ -120,7 +120,7 @@ article.studip {
 
     > footer {
         text-align: center;
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
         margin: -$article-padding;
         margin-top: $article-padding;
 
diff --git a/resources/assets/stylesheets/scss/avatar.scss b/resources/assets/stylesheets/scss/avatar.scss
index f8629e96ec6d4bb3850cc58a4575e819fd3eba18..e71e1995d68b3f75f6735d901c1c2b4011f1418a 100644
--- a/resources/assets/stylesheets/scss/avatar.scss
+++ b/resources/assets/stylesheets/scss/avatar.scss
@@ -3,7 +3,7 @@ div.avatar-widget {
         display: block;
         margin: 5px;
         padding: 0;
-        color: $white;
+        color: var(--white);
 
         width: $avatar-normal;
         height: $avatar-normal;
@@ -38,7 +38,7 @@ div.avatar-widget {
             left: -2px;
             top: -2px;
             background-color: fade-out($base-color-40, 0.333);
-            border: 2px dashed $base-color;
+            border: 2px dashed var(--base-color);
             opacity: 1;
         }
     }
@@ -142,11 +142,11 @@ form.settings-avatar {
         margin-right: auto;
 
         .cropper-view-box {
-            outline: 1px solid $base-color-80;
+            outline: 1px solid var(--base-color-80);
         }
 
         .cropper-line, .cropper-point {
-            background-color: $base-color-80;
+            background-color: var(--base-color-80);
         }
     }
 
diff --git a/resources/assets/stylesheets/scss/badges.scss b/resources/assets/stylesheets/scss/badges.scss
index 90095cadf57544d319ca3761023a7105d3d91f55..1cd5cc3e4322004c927de25a3ef8609e8eaa81fc 100644
--- a/resources/assets/stylesheets/scss/badges.scss
+++ b/resources/assets/stylesheets/scss/badges.scss
@@ -16,8 +16,8 @@
         margin: 0;
         padding: 1px 5px;
 
-        background-color: $red;
-        color: $white;
+        background-color: var(--red);
+        color: var(--white);
 
         font-size: 10px;
         font-weight: bold;
@@ -28,6 +28,6 @@
         text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
 
         border-radius: 9px;
-        box-shadow: $black 0 1px 3px;
+        box-shadow: var(--black) 0 1px 3px;
     }
 }
diff --git a/resources/assets/stylesheets/scss/big-image-handler.scss b/resources/assets/stylesheets/scss/big-image-handler.scss
index 863ab345fdb9447cdb5fb1276fd971cafd745cb8..517ad97d9dc863e6eeec6c42bb60b6254dea1f6f 100644
--- a/resources/assets/stylesheets/scss/big-image-handler.scss
+++ b/resources/assets/stylesheets/scss/big-image-handler.scss
@@ -30,7 +30,7 @@ $bg-big-image-handler: fade-out($black, 0.3);
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
-        border: 1px solid $white;
+        border: 1px solid var(--white);
         box-shadow: 0 0 20px fade-out($white, 0.5);
         display: block;
         max-width: 98%;
diff --git a/resources/assets/stylesheets/scss/blockquote.scss b/resources/assets/stylesheets/scss/blockquote.scss
index 40643ba5c80f6746ce55e9ef8bd2677eacf4f562..612e6508da204401bf91118f3d1ae74f199c8fc6 100644
--- a/resources/assets/stylesheets/scss/blockquote.scss
+++ b/resources/assets/stylesheets/scss/blockquote.scss
@@ -1,6 +1,6 @@
 blockquote {
-    background-color: $dark-gray-color-5;
-    border-left: 3px solid $base-color;
+    background-color: var(--dark-gray-color-5);
+    border-left: 3px solid var(--base-color);
     padding: 4px 10px;
     margin: 0 0 8px;
     color: black;
@@ -12,10 +12,10 @@ blockquote {
     blockquote {
         background-color: white;
         blockquote {
-            background-color: $dark-gray-color-5;
+            background-color: var(--dark-gray-color-5);
             blockquote {
                 background-color: white;
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 6c9e7ff0a6d45891c8a6dfed71770304fa94b26e..4f1fb0a2787f7f2aab94d9cf96cab505f037e04a 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -29,8 +29,8 @@
 }
 
 .blubber_thread {
-    border: 1px solid $content-color-40;
-    background-color: $dark-gray-color-5;
+    border: 1px solid var(--content-color-40);
+    background-color: var(--dark-gray-color-5);
 
     width: 100%;
     max-width: 100%;
@@ -67,22 +67,22 @@
     }
 
     &.dragover {
-        background-color: $yellow-40;
+        background-color: var(--yellow-40);
         .writer > textarea {
-            background-color: $yellow-40;
+            background-color: var(--yellow-40);
         }
         ol.comments > li.mine > .content::after,
         ol.comments > li.theirs > .content::after {
-            background-color: $yellow-40;
+            background-color: var(--yellow-40);
         }
     }
 
     .context_info {
-        border-bottom: 1px solid $content-color-40;
+        border-bottom: 1px solid var(--content-color-40);
         text-align: center;
     }
     .writer {
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
     }
 
 
@@ -142,12 +142,12 @@
                 display: flex;
                 flex-direction: row-reverse;
                 > .content {
-                    background-color: $base-color;
-                    color: $white;
+                    background-color: var(--base-color);
+                    color: var(--white);
 
                     .opengraph {
-                        background-color: $base-color-80;
-                        border-color: $base-color-60;
+                        background-color: var(--base-color-80);
+                        border-color: var(--base-color-60);
                     }
 
                     a.link-extern {
@@ -170,7 +170,7 @@
                     a,
                     a:link,
                     a:visited {
-                        color: $white;
+                        color: var(--white);
                         opacity: 0.8;
                         transition: opacity 200ms;
                     }
@@ -179,7 +179,7 @@
                     a:hover.index,
                     a:active.index,
                     a:hover.tree {
-                        color: $white;
+                        color: var(--white);
                         opacity: 1;
                         transition: opacity 200ms;
                     }
@@ -198,7 +198,7 @@
                         content: '';
                         height: 10px;
                         width: 10px;
-                        background-color: $dark-gray-color-5;
+                        background-color: var(--dark-gray-color-5);
                         position: absolute;
                         pointer-events: none;
                         left: 100%;
@@ -218,7 +218,7 @@
             &.theirs {
                 display: flex;
                 > .content {
-                    background-color: $content-color-20;
+                    background-color: var(--content-color-20);
                     @include arrow-left(10px, $content-color-20);
                     &::before {
                         top: 100%;
@@ -227,19 +227,19 @@
                         content: '';
                         height: 10px;
                         width: 10px;
-                        background-color: $dark-gray-color-5;
+                        background-color: var(--dark-gray-color-5);
                         position: absolute;
                         pointer-events: none;
                         left: -10px;
                         top: 100%;
                     }
                     > .name {
-                        color: $base-color;
+                        color: var(--base-color);
                         font-size: 0.8em;
                         display: block;
 
                         &:hover {
-                            color: $red;
+                            color: var(--red);
                         }
                     }
                 }
@@ -264,7 +264,7 @@
             }
             > .time {
                 font-size: 0.8em;
-                color: $black;
+                color: var(--black);
                 time {
                     @media screen and (max-width: $major-breakpoint-small) {
                         display: none;
@@ -276,8 +276,8 @@
     }
 
     .writer {
-        background-color: $white;
-        background-image: linear-gradient(to left, $content-color-60, $content-color-60);
+        background-color: var(--white);
+        background-image: linear-gradient(to left, var(--content-color-60), var(--content-color-60));
         background-size: 0% 100%;
         background-repeat: no-repeat;
         padding: 5px;
@@ -289,8 +289,8 @@
         transition: all 0.5s ease-out;
 
         > textarea {
-            border: 1px solid $content-color-40;
-            background-color: $white;
+            border: 1px solid var(--content-color-40);
+            background-color: var(--white);
             width: calc(100% - 140px);
             height: 34px;
             resize: none;
@@ -316,18 +316,18 @@
     }
 
     .thread_posting {
-        border-bottom: 1px solid $content-color-40;
-        background-color: $white;
+        border-bottom: 1px solid var(--content-color-40);
+        background-color: var(--white);
 
         .contextinfo {
-            background-color: $content-color-20;
-            border-bottom: 1px solid $content-color-40;
-            color: $dark-gray-color-60;
+            background-color: var(--content-color-20);
+            border-bottom: 1px solid var(--content-color-40);
+            color: var(--dark-gray-color-60);
             font-size: 0.8em;
             padding: 7px 5px 5px 75px;
             position: relative;
             a {
-                color: $dark-gray-color-60;
+                color: var(--dark-gray-color-60);
             }
             time {
                 float: right;
@@ -386,7 +386,7 @@
     max-width: 270px;
 
     margin-left: 5px;
-    border: 1px solid $content-color-40;
+    border: 1px solid var(--content-color-40);
     box-sizing: border-box;
 
     max-height: calc(100vh - 140px);
@@ -396,7 +396,7 @@
         padding: 10px;
     }
     .new_section {
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
     }
 
     .members {
@@ -404,9 +404,9 @@
         li {
             padding-top: 10px;
             padding-bottom: 10px;
-            border-bottom: 1px solid $content-color-40;
+            border-bottom: 1px solid var(--content-color-40);
             &:first-child {
-                border-top: 1px solid $content-color-40;
+                border-top: 1px solid var(--content-color-40);
             }
         }
         &.topless li:first-child {
@@ -447,7 +447,7 @@
     }
 
     .context_info {
-        border-bottom: 1px solid $content-color-40;
+        border-bottom: 1px solid var(--content-color-40);
 
         .blubber_course_info {
 
@@ -473,7 +473,7 @@
 }
 
 .lowprio_info {
-    color: $black;
+    color: var(--black);
 }
 
 .studip-dialog {
@@ -536,21 +536,21 @@
             padding-left: 0px;
 
             li {
-                border-bottom: thin solid $content-color-40;
+                border-bottom: thin solid var(--content-color-40);
 
                 height: 50px;
                 max-height: 50px;
                 overflow: hidden;
                 padding: 10px;
                 cursor: pointer;
-                color: $base-color;
+                color: var(--base-color);
                 font-weight: bold;
                 &:last-child {
                     border-bottom: none;
                 }
 
                 &.unseen {
-                    border-left: 3px solid $active-color;
+                    border-left: 3px solid var(--active-color);
                     padding-left: 7px;
                 }
 
@@ -566,7 +566,7 @@
                 }
 
                 &.active {
-                    background-color: $yellow-40;
+                    background-color: var(--yellow-40);
 
                     &::before {
                         content: '';
@@ -575,7 +575,7 @@
                         width: 0px;
                         border-top: 35px transparent solid;
                         border-bottom: 35px transparent solid;
-                        border-left: 10px $content-color-40 solid;
+                        border-left: 10px var(--content-color-40) solid;
                         right: -2px;
                         margin-top: -10px;
                     }
@@ -586,7 +586,7 @@
                         width: 0px;
                         border-top: 35px transparent solid;
                         border-bottom: 35px transparent solid;
-                        border-left: 10px $yellow-40 solid;
+                        border-left: 10px var(--yellow-40) solid;
                         right: -1px;
                         margin-top: -70px;
                     }
@@ -617,7 +617,7 @@
                         time {
                             font-size: 0.8em;
                             font-weight: normal;
-                            color: $black;
+                            color: var(--black);
                         }
                     }
 
diff --git a/resources/assets/stylesheets/scss/buttons.scss b/resources/assets/stylesheets/scss/buttons.scss
index 539a2a3e0c4edb4c839928d1667124b8f085cf54..1f552443b015604d36c2fc771829a232d4042d4f 100644
--- a/resources/assets/stylesheets/scss/buttons.scss
+++ b/resources/assets/stylesheets/scss/buttons.scss
@@ -2,10 +2,10 @@
 
 @mixin button() {
     background: white;
-    border: 1px solid $base-color;
+    border: 1px solid var(--base-color);
     border-radius: 0;
     box-sizing: border-box;
-    color: $base-color;
+    color: var(--base-color);
     cursor: pointer;
     display: inline-block;
     font-family: $font-family-base;
@@ -24,19 +24,19 @@
 
     &:hover,
     &:active  {
-        background: $base-color;
+        background: var(--base-color);
         color: white;
     }
 
     &.disabled,
     &[disabled] {
         box-shadow: none;
-        background: $light-gray-color-20;
+        background: var(--light-gray-color-20);
         cursor: default;
         opacity: 0.65;
 
         &:hover {
-            color: $base-color;
+            color: var(--base-color);
         }
     }
 
@@ -144,11 +144,11 @@ button.styleless {
 button.as-link {
     background-color: transparent;
     border: none;
-    color: $base-color;
+    color: var(--base-color);
     cursor: pointer;
     margin: 0px;
     padding: 0px;
     &:hover {
-        color: $active-color;
+        color: var(--active-color);
     }
 }
diff --git a/resources/assets/stylesheets/scss/clipboard.scss b/resources/assets/stylesheets/scss/clipboard.scss
index 2aea86a7c1e95f4777327130ae821daef4fc18cb..21415a8f5b29e3c2e5abbaba83b8f0996d4749d7 100644
--- a/resources/assets/stylesheets/scss/clipboard.scss
+++ b/resources/assets/stylesheets/scss/clipboard.scss
@@ -20,17 +20,17 @@
     position: fixed;
     z-index: $drag_and_drop_z_index;
     border: $drag_and_drop_border;
-    color: $base-color;
+    color: var(--base-color);
     font-weight: bold;
     font-size: $font-size-large;
-    background-color: $white;
+    background-color: var(--white);
 }
 
 div.clipboard-area-container {
     margin-bottom: 0.5em;
     overflow-y: scroll;
     max-height: 15em;
-    border: 1px solid $content-color-40;
+    border: 1px solid var(--content-color-40);
 }
 
 table.clipboard-area {
@@ -81,10 +81,10 @@ table.clipboard-area tr.empty-clipboard-message > td {
 
 @keyframes drop-animation {
     0% {
-        background-color: $yellow-60;
+        background-color: var(--yellow-60);
     }
 
     100% {
-        background-color: $white;
+        background-color: var(--white);
     }
 }
diff --git a/resources/assets/stylesheets/scss/comments.scss b/resources/assets/stylesheets/scss/comments.scss
index 44bd4dc107c0f278c43509fd8625eeb87a78d197..b569db336f35fb4d8aa16555dc4a6749ea358b52 100644
--- a/resources/assets/stylesheets/scss/comments.scss
+++ b/resources/assets/stylesheets/scss/comments.scss
@@ -1,9 +1,9 @@
 section.comments {
     text-align: left;
-    border-color: $content-color-40;
+    border-color: var(--content-color-40);
     border-top-style: none;
     border-width: 1px;
-    background-color: $white;
+    background-color: var(--white);
     padding: 5px;
 
     h1 {
@@ -14,7 +14,7 @@ section.comments {
     }
     article.comment {
         border: 0;
-        border-top: 1px solid $light-gray-color-40;
+        border-top: 1px solid var(--light-gray-color-40);
         max-width: 1260px;
         margin-bottom: 4px;
 
@@ -25,7 +25,7 @@ section.comments {
         time {
             float: right;
             font-size: 0.8em;
-            color: $light-gray-color-40;
+            color: var(--light-gray-color-40);
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/consultation.scss b/resources/assets/stylesheets/scss/consultation.scss
index 246838d877083149200e1924d7c3d30fe26140e5..eca483838bdfc96e4abb31d7261d696e62f569c6 100644
--- a/resources/assets/stylesheets/scss/consultation.scss
+++ b/resources/assets/stylesheets/scss/consultation.scss
@@ -1,5 +1,5 @@
 .consultation-note {
-    border-bottom: 1px solid $light-gray-color-40;
+    border-bottom: 1px solid var(--light-gray-color-40);
     font-size: $font-size-small;
     margin-bottom: 2px;
     padding-bottom: 2px;
@@ -9,7 +9,7 @@
         margin-bottom: 0;
         padding-bottom: 0;
 
-        border-top: 1px solid $light-gray-color-40;
+        border-top: 1px solid var(--light-gray-color-40);
         margin-top: 2px;
         padding-top: 2px;
     }
@@ -37,6 +37,6 @@
         font-style: italic;
     }
     .slot-is-expired td {
-        background-color: $dark-gray-color-10;
+        background-color: var(--dark-gray-color-10);
     }
 }
diff --git a/resources/assets/stylesheets/scss/contacts.scss b/resources/assets/stylesheets/scss/contacts.scss
index 95effd48281aa97e7bc30f3e04d22b2c8904273d..8d74a9486f508743124aff5532ba7b9237263f78 100644
--- a/resources/assets/stylesheets/scss/contacts.scss
+++ b/resources/assets/stylesheets/scss/contacts.scss
@@ -1,6 +1,6 @@
 // Turns a vertical list into a horizontal one spaced with separators
 .contact-legend {
-    color: #555;
+    color: var(--base-gray);
     text-align: center;
 
     ul, li {
@@ -10,7 +10,7 @@
     }
     ul { display: inline; }
     li {
-        border-left: 1px solid #333;
+        border-left: 1px solid var(--base-gray);
         display: inline-block;
         padding: 0 0.5em;
 
@@ -26,25 +26,25 @@ table.contact-header {
 
     img { vertical-align: text-top; }
     td {
-        background-color: #f2f2f2;
+        background-color: var(--content-color-10);
         padding: 3px 0.5em;
         text-align: center;
         vertical-align: middle;
 
-        &:hover { background-color: #ced8f2; }
+        &:hover { background-color: var(--base-color-20); }
 
         // Active state
         &.active {
-            background-color: #e2e2e2;
-            border: 1px solid #888;
+            background-color: var(--dark-gray-color-15);
+            border: 1px solid var(--dark-gray-color-60);
 
-            &:hover { background-color: #b7c2e2; }
+            &:hover { background-color: var(--content-color-60); }
 
             a {
-                color: $red;
+                color: var(--red);
                 font-weight: bold;
             }
         }
-        &.empty a { color: #999; }
+        &.empty a { color: var(--dark-gray-color-60); }
     }
 }
diff --git a/resources/assets/stylesheets/scss/content.scss b/resources/assets/stylesheets/scss/content.scss
index e04851b5552f391f14ce82ef36f28fdac7363231..5a91585b58e65a5a749579a0ccbd9eca0468d000 100644
--- a/resources/assets/stylesheets/scss/content.scss
+++ b/resources/assets/stylesheets/scss/content.scss
@@ -1,27 +1,27 @@
 .content_title {
-    background-color: #e3eaf6;
-    background-image: linear-gradient(#cdd9ed, #e3eaf6 40%, #e3eaf6);
+    background-color: var(--content-color-20);
+    background-image: linear-gradient(var(--content-color-40), var(--content-color-20) 40%, var(--content-color-20));
     background-repeat: no-repeat;
-    border-top: 1px solid $content-color;
+    border-top: 1px solid var(--content-color);
     line-height: 17pt;
     height: 25px;
 }
 
 .content_body {
-    background-color: #f8f8f8;
+    background-color: var(--dark-gray-color-5);
 }
 
 .content_body_panel {
-    background-color: #dfe2e9;
-    border-left: 1px solid #ccc;
+    background-color: var(--dark-gray-color-15);
+    border-left: 1px solid var(--dark-gray-color-30);
 }
 
 .content_seperator,
 .content_seperator td  {
-    background-color: #adadad;
-    background-image: linear-gradient(#e0e0e0, #bcbcbc 15%, #adadad);
+    background-color: var(--dark-gray-color-45);
+    background-image: linear-gradient(var(--dark-gray-color-15), var(--dark-gray-color-40) 15%, var(--dark-gray-color-45));
     background-repeat: no-repeat;
-    border-top: 1px solid #c7c7c7;
+    border-top: 1px solid var(--dark-gray-color-30);
     height: 15px;
 }
 
diff --git a/resources/assets/stylesheets/scss/content_box.scss b/resources/assets/stylesheets/scss/content_box.scss
index 3d88ff640efdfeb047da9bb1abe9240821718d2b..c8e1a2ab9d01059cfb4c849ce1d75181cc41cd93 100644
--- a/resources/assets/stylesheets/scss/content_box.scss
+++ b/resources/assets/stylesheets/scss/content_box.scss
@@ -1,5 +1,5 @@
 section.contentbox {
-    border-color: $content-color-40;
+    border-color: var(--content-color-40);
     border-style: solid;
     border-width: 1px;
     margin-bottom: 10px;
@@ -12,11 +12,11 @@ section.contentbox {
         justify-content: space-between;
 
         padding: 2px;
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
 
         span.title {
             font-size: medium;
-            color: $base-color;
+            color: var(--base-color);
 
             &.no-overflow {
                 width: calc(100% - 1.5em);
@@ -26,7 +26,7 @@ section.contentbox {
                 &:after {
                     content: "";
                     width: 4em;
-                    background: linear-gradient(to right, transparent, $content-color-20);
+                    background: linear-gradient(to right, transparent, var(--content-color-20));
                     position: absolute;
                     height: 1.5em;
                     right: 2.5em;
@@ -38,7 +38,7 @@ section.contentbox {
             flex: 1 0 0;
             padding: 5px;
             margin: 0;
-            color: $base-color;
+            color: var(--base-color);
             border-bottom: none;
             font-size: medium;
 
@@ -69,10 +69,10 @@ section.contentbox {
 
     footer {
         text-align: center;
-        border-color: $content-color-40;
+        border-color: var(--content-color-40);
         border-top-style: solid;
         border-width: 1px;
-        background-color: $white;
+        background-color: var(--white);
     }
 
     section {
@@ -89,7 +89,7 @@ section.contentbox {
     }
 
     > article {
-        border-color: $content-color-40;
+        border-color: var(--content-color-40);
         border-style: solid;
         border-width: 1px;
         margin: 10px;
@@ -128,7 +128,7 @@ section.contentbox {
                     font-size: small;
                     width: 100%;
                     font-weight: bold;
-                    color: $black;
+                    color: var(--black);
                 }
             }
 
@@ -169,7 +169,7 @@ section.contentbox {
                     }
 
                     display: inline-block;
-                    border-right: 1px solid $content-color;
+                    border-right: 1px solid var(--content-color);
                     padding: 0 5px;
                 }
 
@@ -183,10 +183,10 @@ section.contentbox {
 
         footer {
             text-align: center;
-            border-color: $content-color-40;
+            border-color: var(--content-color-40);
             border-top-style: none;
             border-width: 1px;
-            background-color: $white;
+            background-color: var(--white);
 
             h1 {
                 font-size: 1em;
@@ -197,7 +197,7 @@ section.contentbox {
 
             article.comment {
                 border: 0;
-                border-top: 1px solid $light-gray-color-40;
+                border-top: 1px solid var(--light-gray-color-40);
                 max-width: 1260px;
                 margin: auto auto 4px;
                 text-align: left;
@@ -209,7 +209,7 @@ section.contentbox {
                 time {
                     float: right;
                     font-size: 0.8em;
-                    color: $light-gray-color-40;
+                    color: var(--light-gray-color-40);
                 }
             }
         }
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index e371be295ecebf260df490faee3badc152ec195e..1322097ba746788b570950e6a24ac50985d31ad6 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -1,6 +1,6 @@
 .contentbar {
-    background-color: $dark-gray-color-5;
-    border: solid thin $dark-gray-color-30;
+    background-color: var(--dark-gray-color-5);
+    border: solid thin var(--dark-gray-color-30);
     display: flex;
     flex-wrap: wrap;
     height: auto;
@@ -54,10 +54,10 @@
                     white-space: nowrap;
 
                     a {
-                        color: $base-color;
+                        color: var(--base-color);
                         text-decoration: none;
                         &:hover {
-                            color: $active-color;
+                            color: var(--active-color);
                         }
                     }
 
diff --git a/resources/assets/stylesheets/scss/copyable-links.scss b/resources/assets/stylesheets/scss/copyable-links.scss
index c9195866b71d3884f2cb9d78332cd60117185388..f5ff73a92279a4913e47ecf95f5d62c2a03083c5 100644
--- a/resources/assets/stylesheets/scss/copyable-links.scss
+++ b/resources/assets/stylesheets/scss/copyable-links.scss
@@ -6,12 +6,12 @@
     line-height: 60px;
     max-width: calc(100% - 140px);
     z-index: 42000;
-    border: solid thin $content-color-40;
-    background-color: $white;
+    border: solid thin var(--content-color-40);
+    background-color: var(--white);
     background-repeat: no-repeat;
     background-position: 1em center;
     background-size: 100px;
-    box-shadow: 5px 5px #ececed;
+    box-shadow: 5px 5px var(--dark-gray-color-10);
     padding: 5px 100px;
     transition: transform .5s ease;
 
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index b743c6384c1dbb96604d6e30d79922b9805e68ee..8c158f80496bd9ca508ef4d65dfc598044d16d46 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -146,7 +146,7 @@ c o n t e n t s
 
 .cw-contents-overview-teaser {
     max-width: 782px;
-    background-color: $content-color-20;
+    background-color: var(--content-color-20);
     background-image: url("#{$image-path}/courseware-keyvisual-negative.svg");
     background-repeat: no-repeat;
     background-size: 196px;
@@ -198,7 +198,7 @@ c o n t e n t s
     }
 
     .loading-indicator span {
-        background-color: #CCCCDD;
+        background-color: var(--content-color-40);
         border-radius: 50%;
         height: 10px;
         position: relative;
@@ -279,7 +279,7 @@ $consum_ribbon_width: calc(100% - 58px);
 .cw-ribbon-wrapper-consume {
     position: fixed;
     padding: 15px;
-    background-color: $white;
+    background-color: var(--white);
     width: $consum_ribbon_width;
     height: 46px;
     z-index: 42;
@@ -290,7 +290,7 @@ $consum_ribbon_width: calc(100% - 58px);
     height: 15px;
     left: 0;
     width: calc(100% - 1em);
-    background-color: $white;
+    background-color: var(--white);
     z-index: 40;
 }
 
@@ -299,7 +299,7 @@ $consum_ribbon_width: calc(100% - 58px);
     top: 40px;
     height: 20px;
     width: calc(100% - 314px);
-    background-color: $white;
+    background-color: var(--white);
     z-index: 39;
 }
 .cw-ribbon-sticky-bottom {
@@ -307,7 +307,7 @@ $consum_ribbon_width: calc(100% - 58px);
     top: 110px;
     height: 16px;
     width: calc(100% - 314px);
-    background-color: $white;
+    background-color: var(--white);
     z-index: 39;
 }
 .cw-ribbon-sticky-spacer {
@@ -318,11 +318,11 @@ $consum_ribbon_width: calc(100% - 58px);
     flex-wrap: wrap;
     height: auto;
     min-height: 30px;
-    border: solid thin $dark-gray-color-30;
+    border: solid thin var(--dark-gray-color-30);
     margin-bottom: 15px;
     padding: 1em;
     justify-content: space-between;
-    background-color: $dark-gray-color-5;
+    background-color: var(--dark-gray-color-5);
 
     &.cw-ribbon-sticky {
         position: fixed;
@@ -377,10 +377,10 @@ $consum_ribbon_width: calc(100% - 58px);
                     white-space: nowrap;
 
                     a {
-                        color: $base-color;
+                        color: var(--base-color);
                         text-decoration: none;
                         &:hover {
-                            color: $active-color;
+                            color: var(--active-color);
                         }
                     }
 
@@ -455,9 +455,9 @@ $consum_ribbon_width: calc(100% - 58px);
 }
 
 .cw-ribbon-tools {
-    background-color: $white;
-    border: solid thin $content-color-40;
-    box-shadow: 2px 2px #ccc;
+    background-color: var(--white);
+    border: solid thin var(--content-color-40);
+    box-shadow: 2px 2px var(--dark-gray-color-30);
     position: absolute;
     right: -570px;
     top: 15px;
@@ -489,7 +489,7 @@ $consum_ribbon_width: calc(100% - 58px);
     .cw-ribbon-tool-content {
         height: 100%;
         width: 540px;
-        background-color:$white;
+        background-color: var(--white);
         padding: 0;
         overflow: hidden;
 
@@ -498,10 +498,10 @@ $consum_ribbon_width: calc(100% - 58px);
             position: sticky;
             height: 100%;
             top: 0;
-            background-color: $white;
+            background-color: var(--white);
             margin: 0;
             padding: 0;
-            color: $base-color;
+            color: var(--base-color);
             display: flex;
             z-index: 43;
 
@@ -521,7 +521,7 @@ $consum_ribbon_width: calc(100% - 58px);
                 background-repeat: no-repeat;
                 background-size: 24px;
                 background-position: center right;
-                background-color: #fff;
+                background-color: var(--white);
             }
 
             >.cw-ribbon-tool-content-tablist {
@@ -544,7 +544,7 @@ $consum_ribbon_width: calc(100% - 58px);
                 }
                 >.cw-tabs-content {
                     border: none;
-                    border-top: solid thin $content-color-40;
+                    border-top: solid thin var(--content-color-40);
                     padding: 0;
                     height: calc(100% - 58px);
 
@@ -555,7 +555,7 @@ $consum_ribbon_width: calc(100% - 58px);
                         overflow-y: auto;
                         overflow-x: hidden;
                         scrollbar-width: thin;
-                        scrollbar-color: $base-color $white;
+                        scrollbar-color: var(--base-color) var(--white);
 
                         &.cw-ribbon-tool-blockadder-tab {
                             height: 100%;
@@ -573,7 +573,7 @@ $consum_ribbon_width: calc(100% - 58px);
             overflow-y: auto;
             overflow-x: hidden;
             scrollbar-width: thin;
-            scrollbar-color: $base-color $white;
+            scrollbar-color: var(--base-color) var(--white);
         }
     }
 }
@@ -633,12 +633,12 @@ ribbon end
         height: 100%;
         width: 100%;
         padding: 0;
-        background-color: $white;
+        background-color: var(--white);
         z-index: 1004;
         overflow-y: scroll;
         overflow-x: hidden;
         scrollbar-width: thin;
-        scrollbar-color: $base-color #f5f5f5;
+        scrollbar-color: var(--base-color) var(--dark-gray-color-5);
     }
 
     .cw-welcome-screen {
@@ -646,7 +646,7 @@ ribbon end
             margin: 14px 0 42px 0;
             width: 100%;
             height: 400px;
-            background-image: url('../../assets/images/courseware-keyvisual.svg');
+            background-image: url('#{$image-path}/courseware-keyvisual.svg');
             background-repeat: no-repeat;
             background-position: center center;
         }
@@ -695,7 +695,7 @@ ribbon end
         resize: none;
     }
     .cw-structural-element-color {
-        color: $white;
+        color: var(--white);
         &.black {
             background-color: map-get($tile-colors, "black");
         }
@@ -855,7 +855,7 @@ ribbon end
     }
 
     .cw-container-header {
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
         padding: 4px 10px 4px 22px;
 
         .cw-container-header-toggle {
@@ -864,7 +864,7 @@ ribbon end
         }
 
         span {
-            color: $base-color;
+            color: var(--base-color);
             font-weight: 700;
             line-height: 2em;
             font-size: 1.1em;
@@ -900,7 +900,7 @@ ribbon end
             }
         }
         .cw-container-content {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
         }
     }
 
@@ -997,7 +997,7 @@ form.cw-container-dialog-edit-form {
     }
 }
 .cw-content-wrapper-active {
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     .cw-block-content {
         padding: $cw-wrapper-gap;
     }
@@ -1016,7 +1016,7 @@ form.cw-container-dialog-edit-form {
     }
 }
 .cw-block-header {
-    background-color: $content-color-20;
+    background-color: var(--content-color-20);
     padding: 4px 10px 4px 22px;
 
     .cw-block-header-toggle {
@@ -1025,7 +1025,7 @@ form.cw-container-dialog-edit-form {
     }
 
     span {
-        color: $base-color;
+        color: var(--base-color);
         font-weight: 700;
         line-height: 2em;
         font-size: 1.1em;
@@ -1054,8 +1054,8 @@ form.cw-container-dialog-edit-form {
 .cw-block-features {
 
     header{
-        background-color: $content-color-20;
-        color: $base-color;
+        background-color: var(--content-color-20);
+        color: var(--base-color);
         font-weight: 600;
         padding: 0.5em;
     }
@@ -1198,7 +1198,7 @@ label[for="cw-keypoint-color"] {
     display: inline-block !important;
 }
 .cw-keypoint-icons {
-    background-color: $white;
+    background-color: var(--white);
 }
 .cw-keypoint-bg-red {
     background-color: map-get($icon-colors, 'icon-red');
@@ -1233,7 +1233,7 @@ label[for="cw-keypoint-color"] {
     width: -moz-available;
     height: -moz-available;
     min-height: 8em;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     resize: none;
 }
 
@@ -1366,7 +1366,7 @@ label[for="cw-keypoint-color"] {
             padding-left: 0;
             > li.cw-tree-item {
                 > .cw-tree-item-wrapper {
-                    border-bottom: solid thin $content-color-40;
+                    border-bottom: solid thin var(--content-color-40);
                     display: block;
                     > a.cw-tree-item-link {
                         display: block;
@@ -1384,7 +1384,7 @@ label[for="cw-keypoint-color"] {
                         margin: 28px 0 0 0;
                         > .cw-tree-item-wrapper {
                             display: block;
-                            border-bottom: solid thin $content-color-40;
+                            border-bottom: solid thin var(--content-color-40);
                             margin-bottom: 12px;
                             > a.cw-tree-item-link {
                                 display: inline-block;
@@ -1444,15 +1444,15 @@ label[for="cw-keypoint-color"] {
     }
     .cw-tree-item-link {
         &:hover {
-            background-color: $light-gray-color-20;
-            color: $active-color;
+            background-color: var(--light-gray-color-20);
+            color: var(--active-color);
         }
         &.cw-tree-item-link-current {
-            color: $black;
+            color: var(--black);
             font-weight: 600;
             cursor: default;
             &::before {
-                color: $black;
+                color: var(--black);
             }
         }
         &.cw-tree-item-link-selected {
@@ -1489,7 +1489,7 @@ label[for="cw-keypoint-color"] {
             @include background-icon(accept, info, 16);
         }
         &.cw-tree-item-sequential-percentage {
-            color: $black;
+            color: var(--black);
             font-size: 14px;
         }
     }
@@ -1508,18 +1508,18 @@ c o l l a p s i b l e   b o x
 * * * * * * * * * * * * * * */
 .cw-collapsible {
 
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     margin-bottom: -1px;
 
     .cw-collapsible-title {
         @include background-icon(arr_1right, clickable);
         background-position: 6px center;
         background-repeat: no-repeat;
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
         padding: 0.5em 2em;
         margin: 0;
         font-weight: 600;
-        color: $base-color;
+        color: var(--base-color);
         cursor: pointer;
 
         &.cw-collapsible-open {
@@ -1673,15 +1673,15 @@ $icons: (
     list-style: none;
     padding: 0;
     margin: 0;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     border-bottom: none;
 
     button {
-        background-color: $white;
+        background-color: var(--white);
         border: none;
         padding: 1em 0 4px 0;
         margin: 0 7px 0 21px;
-        color: $base-color;
+        color: var(--base-color);
         cursor: pointer;
         text-align: center;
         flex-grow: 1;
@@ -1694,14 +1694,14 @@ $icons: (
             margin-left: -14px;
             width: calc(100% + 28px);
             content: '';
-            border-bottom: solid 3px $dark-gray-color-75;
+            border-bottom: solid 3px var(--dark-gray-color-75);
             transform: scaleX(0);
             transition: transform 300ms ease-in-out;
         }
 
         &.is-active,
         &:hover {
-            color: $black;
+            color: var(--black);
             &:after {
                 transform: scaleX(1);
             }
@@ -1763,7 +1763,7 @@ $icons: (
     }
 }
 .cw-tabs-content {
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     padding: 4px;
 }
 .cw-block-wrapper-active {
@@ -1778,7 +1778,7 @@ $icons: (
         .cw-tab-in-dialog {
             .cw-tabs-nav {
                 border: none;
-                border-bottom: solid thin $content-color-40;
+                border-bottom: solid thin var(--content-color-40);
                 margin-bottom: 4px;
             }
             .cw-tabs-content {
@@ -1787,7 +1787,7 @@ $icons: (
                 min-height: 400px;
                 overflow-y: auto;
                 scrollbar-width: thin;
-                scrollbar-color: $base-color #f5f5f5;
+                scrollbar-color: var(--base-color) var(--dark-gray-color-5);
             }
         }
     }
@@ -1831,7 +1831,7 @@ b l o c k a d d e r
     .cw-tabs-nav {
         margin-top: 4px;
         border: none;
-        border-bottom: solid thin $content-color-40;
+        border-bottom: solid thin var(--content-color-40);
 
         button {
             max-width: unset;
@@ -1844,7 +1844,7 @@ b l o c k a d d e r
         overflow-x: hidden;
         overflow-y: auto;
         scrollbar-width: thin;
-        scrollbar-color: $base-color #f5f5f5;
+        scrollbar-color: var(--base-color) var(--dark-gray-color-5);
 
         .input-group.files-search {
             &.search {
@@ -1894,7 +1894,7 @@ b l o c k a d d e r
             padding: 2px;
             border: thin solid var(--dark-gray-color-30);
             border-top: none;
-            background-color: #fff;
+            background-color: var(--white);
 
             .button {
                 min-width: inherit;
@@ -1971,23 +1971,23 @@ b l o c k a d d e r
 }
 
 .cw-block-adder-area {
-    background-color: $white;
-    border: solid thin $content-color-40;
+    background-color: var(--white);
+    border: solid thin var(--content-color-40);
     padding: 1em 0;
-    color: $base-color;
+    color: var(--base-color);
     text-align: center;
     width: 100%;
     font-weight: 600;
     cursor: pointer;
 
     &:hover {
-        border-color: $base-color;
+        border-color: var(--base-color);
     }
 
     &.cw-block-adder-active {
-        border: solid thin $base-color;
-        background-color: $base-color;
-        color: $white;
+        border: solid thin var(--base-color);
+        background-color: var(--base-color);
+        color: var(--white);
     }
 
     img {
@@ -2023,11 +2023,11 @@ b l o c k a d d e r
     @include background-icon(unit-test, clickable, 48);
     background-position: 12px center;
     background-repeat: no-repeat;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     cursor: pointer;
 
     &:hover {
-        border-color: $base-color;
+        border-color: var(--base-color);
     }
 
     @each $item, $icon in $containeradder-items {
@@ -2163,12 +2163,12 @@ c o m p a n i o n  o v e r l a y
     max-width: calc(100% - 140px);
     height: 120px;
     z-index: 42000;
-    border: solid thin $content-color-40;
-    background-color: $white;
+    border: solid thin var(--content-color-40);
+    background-color: var(--white);
     background-repeat: no-repeat;
     background-position: 1em center;
     background-size: 100px;
-    box-shadow: 5px 5px #ececed;
+    box-shadow: 5px 5px var(--dark-gray-color-10);
     padding-left: 120px;
     transform: translateX(100%);
     transition: transform .5s ease;
@@ -2193,7 +2193,7 @@ c o m p a n i o n  o v e r l a y
 
     .cw-compantion-overlay-close {
         @include background-icon(decline);
-        background-color: $white;
+        background-color: var(--white);
         background-repeat: no-repeat;
 
         position: absolute;
@@ -2209,8 +2209,8 @@ c o m p a n i o n  o v e r l a y
 .cw-companion-box {
     display: flex;
     height: 120px;
-    border: solid thin $content-color-40;
-    background-color: $white;
+    border: solid thin var(--content-color-40);
+    background-color: var(--white);
     background-repeat: no-repeat;
     background-position: 1em center;
     background-size: 100px;
@@ -2398,14 +2398,14 @@ c o m m e n t s  &  f e e d b a c k
 .cw-structural-element-comment-create,
 .cw-block-feedback-create,
 .cw-block-comment-create {
-    border-top: solid thin $content-color-40;
+    border-top: solid thin var(--content-color-40);
     padding-top: 1em;
     textarea {
         width: calc(100% - 6px);
         resize: none;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         &:active {
-            border: solid thin $content-color-80;
+            border: solid thin var(--content-color-80);
         }
     }
 }
@@ -2513,7 +2513,7 @@ d a s h b o a r d
         padding: 0;
 
         .cw-activity-item {
-            border-bottom: solid thin $content-color-40;
+            border-bottom: solid thin var(--content-color-40);
             padding: 0.5em;
 
             &:last-child {
@@ -2609,7 +2609,7 @@ d a s h b o a r d  e n d
     }
 
     .cw-unit-progress-subchapter-list {
-        border-top: solid thin $content-color-40;
+        border-top: solid thin var(--content-color-40);
         padding: 0 1em 0 1em;
 
         .cw-unit-empty-info {
@@ -2620,7 +2620,7 @@ d a s h b o a r d  e n d
 
 .cw-unit-progress-item {
     display: block;
-    border-bottom: solid thin $content-color-40;
+    border-bottom: solid thin var(--content-color-40);
     padding: 10px 0;
 
     &:hover{
@@ -2639,7 +2639,7 @@ d a s h b o a r d  e n d
 
     .cw-unit-progress-item-value {
         width: 70px;
-        color: $base-color;
+        color: var(--base-color);
         font-size: xx-large;
 
         .cw-progress-circle {
@@ -2648,11 +2648,7 @@ d a s h b o a r d  e n d
         }
     }
     .cw-unit-progress-item-description {
-        color: $base-color;
-        padding-left: 14px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+        color: var(--base-color);
         padding: 0.5em 0 0 1em;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -2674,7 +2670,7 @@ p r o g r e s s  c i r c l e
     padding: 0;
     width: 5em;
     height: 5em;
-    background-color: $dark-gray-color-10;
+    background-color: var(--dark-gray-color-10);
     border-radius: 50%;
     line-height: 5em;
 
@@ -2698,7 +2694,7 @@ p r o g r e s s  c i r c l e
         width: 5em;
         text-align: center;
         display: block;
-        color: $base-color;
+        color: var(--base-color);
         z-index: 2;
     }
 
@@ -2720,14 +2716,14 @@ p r o g r e s s  c i r c l e
         width: 5em;
         height: 5em;
         border-radius: 50%;
-        border: 0.45em solid $base-color;
+        border: 0.45em solid var(--base-color);
         box-sizing: border-box;
     }
 
     &.over50 .first50-bar {
         position: absolute;
         clip: rect(0, 5em, 5em, 2.5em);
-        background-color: $base-color;
+        background-color: var(--base-color);
         border-radius: 50%;
         width: 5em;
         height: 5em;
@@ -2761,7 +2757,7 @@ p r o g r e s s  c i r c l e  e n d
     }
     .progress-bar-wrapper {
         width: 100%;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
 
         .progress-bar {
             display: flex;
@@ -2770,7 +2766,7 @@ p r o g r e s s  c i r c l e  e n d
             color: white;
             text-align: center;
             white-space: nowrap;
-            background-color: $base-color;
+            background-color: var(--base-color);
         }
     }
 }
@@ -2781,11 +2777,11 @@ b l o c k s
 
 .cw-block-title {
     padding: 4px;
-    background-color: $content-color-20;
-    color: $base-color;
+    background-color: var(--content-color-20);
+    color: var(--base-color);
     font-weight: 700;
     text-align: center;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     border-bottom: none;
 }
 /* * * * * * * * *
@@ -2797,7 +2793,7 @@ a u d i o  b l o c k
 * * * * * * * * * * */
 .cw-block-audio {
     .cw-audio-container {
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         padding-top: 1em;
     }
     .cw-audio-controls {
@@ -2810,25 +2806,25 @@ a u d i o  b l o c k
             border: 0;
         }
         &.ui-widget-content {
-            background-color: $base-color;
+            background-color: var(--base-color);
         }
         .ui-widget-header {
-            background-color: $dark-gray-color-5;
+            background-color: var(--dark-gray-color-5);
         }
         .ui-slider-handle {
             border-radius: 20px;
             width: 1em;
             height: 1.7em;
             top: -0.5em;
-            background-color: $dark-gray-color-20;
-            border-color: $content-color-40;
+            background-color: var(--dark-gray-color-20);
+            border-color: var(--content-color-40);
             cursor: pointer;
             margin-left: -2px;
         }
     }
     .cw-audio-button {
-        border: solid thin $content-color-40;
-        background-color: $white;
+        border: solid thin var(--content-color-40);
+        background-color: var(--white);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 24px;
@@ -2849,7 +2845,7 @@ a u d i o  b l o c k
         display: inline-block;
 
         &:hover {
-            background-color: $base-color;
+            background-color: var(--base-color);
         }
 
         @each $button, $icon in $media-buttons {
@@ -2866,7 +2862,7 @@ a u d i o  b l o c k
     .cw-audio-time {
         position: relative;
         top: -1em;
-        color: $base-gray;
+        color: var(--base-gray);
     }
 
     .cw-audio-range {
@@ -2882,40 +2878,40 @@ a u d i o  b l o c k
     }
 
     .cw-audio-range::-webkit-slider-runnable-track {
-        background: $dark-gray-color-20;
+        background: var(--dark-gray-color-20);
     }
 
     .cw-audio-range::-webkit-slider-thumb {
         -webkit-appearance: none;
         width: 9px; /* 1 */
         height: 18px;
-        background: $white;
-        box-shadow: -100vw 0 0 100vw $base-color;
-        border: solid thin $content-color-40;
+        background: var(--white);
+        box-shadow: -100vw 0 0 100vw var(--base-color);
+        border: solid thin var(--content-color-40);
     }
 
     .cw-audio-range::-moz-range-track {
         height: 18px;
-        background: $dark-gray-color-10;
+        background: var(--dark-gray-color-10);
     }
 
     .cw-audio-range::-moz-range-thumb {
-        background: $white;
+        background: var(--white);
         height: 18px;
         width: 9px;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         border-radius: 0 !important;
-        box-shadow: -100vw 0 0 100vw $base-color;
+        box-shadow: -100vw 0 0 100vw var(--base-color);
         box-sizing: border-box;
     }
 
     .cw-audio-range::-ms-fill-lower {
-        background: $base-color;
+        background: var(--base-color);
     }
 
     .cw-audio-range::-ms-thumb {
-        background: $white;
-        border: solid thin $content-color-40;
+        background: var(--white);
+        border: solid thin var(--content-color-40);
         height: 18px;
         width: 9px;
         box-sizing: border-box;
@@ -2930,7 +2926,7 @@ a u d i o  b l o c k
     }
 
     .cw-audio-range::-ms-track {
-        background: $dark-gray-color-20;
+        background: var(--dark-gray-color-20);
         color: transparent;
         height: 18px;
         border: none;
@@ -2942,7 +2938,7 @@ a u d i o  b l o c k
     .cw-audio-playlist-wrapper {
         margin-top: -1em;
         padding-top: 1em;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         border-top: none;
 
         &.empty {
@@ -2955,13 +2951,13 @@ a u d i o  b l o c k
             cursor: pointer;
 
             &.with-recorder {
-                border-bottom: solid thin $content-color-40;
+                border-bottom: solid thin var(--content-color-40);
             }
 
             li {
                 margin: 0 1em;
                 &:not(:last-child) {
-                    border-bottom: solid thin $dark-gray-color-30;
+                    border-bottom: solid thin var(--dark-gray-color-30);
                 }
 
                 .cw-playlist-item {
@@ -2973,9 +2969,9 @@ a u d i o  b l o c k
                     margin: 1em 0;
                     padding: 1em;
                     padding-left: 4em;
-                    color: $base-color;
+                    color: var(--base-color);
                     &:hover {
-                        color: $active-color;
+                        color: var(--active-color);
                     }
                     &.current-item {
                         @include background-icon(play, clickable, 24);
@@ -3007,7 +3003,7 @@ a u d i o  b l o c k
     }
     .cw-audio-empty {
         @include background-icon(file, info, 96);
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         background-position: center 1em;
         background-repeat: no-repeat;
         min-height: 140px;
@@ -3027,7 +3023,7 @@ f o r  m u l t i m e d i a  b l o c k s
 * * * * * * * * * * * * * * * * * * * */
 .cw-file-empty {
     @include background-icon(file, info, 96);
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     background-position: center 1em;
     background-repeat: no-repeat;
     min-height: 140px;
@@ -3089,15 +3085,15 @@ c o d e  b l o c k
       display: block;
       overflow-x: auto;
       padding: 0.5em;
-      background: $dark-gray-color-5;
+      background: var(--dark-gray-color-5);
       color: black;
-      border: solid thin $content-color-40;
+      border: solid thin var(--content-color-40);
     }
 
     .hljs-comment,
     .hljs-quote,
     .hljs-variable {
-      color: $dark-green;
+      color: var(--dark-green);
     }
 
     .hljs-keyword,
@@ -3106,7 +3102,7 @@ c o d e  b l o c k
     .hljs-built_in,
     .hljs-name,
     .hljs-tag {
-      color: $base-color;
+      color: var(--base-color);
       font-weight: 600;
     }
 
@@ -3119,7 +3115,7 @@ c o d e  b l o c k
     .hljs-template-variable,
     .hljs-type,
     .hljs-addition {
-      color: $orange-80;
+      color: var(--orange-80);
       font-weight: 400;
     }
 
@@ -3127,24 +3123,24 @@ c o d e  b l o c k
     .hljs-selector-attr,
     .hljs-selector-pseudo,
     .hljs-meta {
-      color: $petrol;
+      color: var(--petrol);
       font-weight: 400;
     }
 
     .hljs-doctag {
-      color: $dark-gray-color-75;
+      color: var(--dark-gray-color-75);
       font-weight: 400;
     }
 
     .hljs-attr {
-      color: $active-color;
+      color: var(--active-color);
       font-weight: 400;
     }
 
     .hljs-symbol,
     .hljs-bullet,
     .hljs-link {
-      color: $petrol;
+      color: var(--petrol);
       font-weight: 400;
     }
 
@@ -3158,12 +3154,12 @@ c o d e  b l o c k
     }
 
     .code-lang {
-        background: $dark-gray-color-5;
-        border: solid thin $content-color-40;
+        background: var(--dark-gray-color-5);
+        border: solid thin var(--content-color-40);
         border-top: none;
         padding: 5px 10px;
         text-align: right;
-        color: $dark-gray-color-45;
+        color: var(--dark-gray-color-45);
         font-family: monospace;
         text-transform: full-width;
     }
@@ -3178,7 +3174,7 @@ c o n f i r m  b l o c k
 * * * * * * * * * * * * */
 .cw-block-confirm {
     .cw-block-confirm-content{
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         padding: 1em;
         margin: 0;
 
@@ -3288,7 +3284,7 @@ c a n v a s  b l o c k
 .cw-block-canvas {
     .cw-canvasblock-canvas {
         max-width: 100%;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
     }
 
     .cw-canvasblock-upload-message{
@@ -3631,12 +3627,12 @@ i f r a m e  b l o c k
 .cw-block-iframe {
     .cw-block-content {
         iframe {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
             width: calc(100% - 2px);
         }
 
         .cw-block-iframe-cc-data {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
             border-top: none;
             margin-top: -6px;
             padding-top: 10px;
@@ -3692,7 +3688,7 @@ l t i  b l o c k
 .cw-block-lti {
     .cw-block-content {
         .cw-block-lti-content {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
             box-sizing: border-box;
         }
         .cw-block-lti-icon-tool {
@@ -3715,13 +3711,13 @@ l t i  b l o c k  e n d
 f o l d e r  b l o c k
 * * * * * * * * * * * */
 .cw-block-folder-info {
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     padding: 10px 10px 0 10px;
     overflow: hidden;
     border-bottom: none;
 }
 .cw-block-folder-list {
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     padding: 0;
     list-style: none;
 
@@ -3729,7 +3725,7 @@ f o l d e r  b l o c k
         list-style: none;
 
         &:not(:last-child) {
-            border-bottom: solid thin $content-color-40;
+            border-bottom: solid thin var(--content-color-40);
         }
         a {
             display: block;
@@ -3749,7 +3745,7 @@ f o l d e r  b l o c k
     }
 }
 .cw-block-folder-upload {
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     padding: 1em 10px;
     border-top: none;
 
@@ -3771,11 +3767,11 @@ f o l d e r  b l o c k
     text-overflow: ellipsis;
 
     &.cw-block-file-icon-empty {
-        color: $black;
+        color: var(--black);
         @include background-icon(folder-empty, info, 24);
     }
     &.cw-block-file-icon-none {
-        color: $black;
+        color: var(--black);
         @include background-icon(file, info, 24);
     }
     &.cw-block-file-icon-audio {
@@ -3843,7 +3839,7 @@ f o l d e r  b l o c k
     margin-top: -16px;
     padding-left: 40px;
     padding-bottom: 16px;
-    color: $dark-gray-color;
+    color: var(--dark-gray-color);
 }
 .cw-block-file-owner,
 .cw-block-file-mkdate {
@@ -3862,7 +3858,7 @@ d o w n l o a d  b l o c k
 * * * * * * * * * * * * * */
 .cw-block-download {
     .cw-block-download-content {
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         .cw-block-download-file-item {
             a {
                 display: block;
@@ -3929,7 +3925,7 @@ g a l l e r y  b l o c k
     border: none;
 
     &:hover {
-        background-color: $base-color;
+        background-color: var(--base-color);
     }
 }
 
@@ -4070,7 +4066,7 @@ b i o g r a p h y  b l o c k
         min-height: 200px;
         flex-direction: row;
         padding: 2em 2em 2em 1em;
-        border: 2px solid $base-color;
+        border: 2px solid var(--base-color);
 
         .cw-block-biography-type {
             margin: auto 1em auto 0;
@@ -4167,8 +4163,8 @@ l i n k  b l o c k
         text-decoration: none;
     }
     .cw-link {
-        border: solid thin $content-color-40;
-        color: $base-color;
+        border: solid thin var(--content-color-40);
+        color: var(--base-color);
         height: 20px;
         padding: 1em;
 
@@ -4177,9 +4173,9 @@ l i n k  b l o c k
         }
 
         &:hover {
-            background-color: $base-color;
-            border: solid thin $base-color;
-            color: $white;
+            background-color: var(--base-color);
+            border: solid thin var(--base-color);
+            color: var(--white);
         }
 
         &.internal {
@@ -4219,7 +4215,7 @@ l i n k  b l o c k
                     font-weight: 600;
                 }
                 .cw-link-og-description {
-                    color: $base-color-80;
+                    color: var(--base-color-80);
                     text-align: justify;
                 }
             }
@@ -4271,7 +4267,7 @@ dialog cards block
             position: absolute;
             width: 100%;
             height: 100%;
-            color: $black;
+            color: var(--black);
             text-align: center;
             font-weight: bold;
             font-size: 1.2em;
@@ -4312,14 +4308,14 @@ dialog cards block
 
         .card__face--front {
             @include background-icon(arr_1right, clickable);
-            background-color: $white;
+            background-color: var(--white);
             background-repeat: no-repeat;
             background-position: 95% 95%;
         }
 
         .card__face--back {
             @include background-icon(arr_1left, clickable);
-            background-color: $white;
+            background-color: var(--white);
             background-repeat: no-repeat;
             background-position: 5% 95%;
             transform: rotateY(180deg);
@@ -4330,11 +4326,10 @@ dialog cards block
         color: transparent;
         width: 35px;
         height: 35px;
-        background-color: #bbb;
         border-radius: 2px;
         background-position: 50%;
         background-repeat: no-repeat;
-        background-color: $base-color;
+        background-color: var(--base-color);
         border: none;
         display: block;
         z-index: 4;
@@ -4354,7 +4349,7 @@ dialog cards block
 
         &.cw-dialogcards-prev-disabled,
         &.cw-dialogcards-next-disabled {
-            background-color: $light-gray-color-40;
+            background-color: var(--light-gray-color-40);
         }
     }
 
@@ -4807,7 +4802,6 @@ $large-icon-size-px: $large-icon-size + px;
             }
             .cw-block-headline-textbox {
                 width: calc(100% - 64px);
-                margin-bottom: 64px;
                 min-height: 350px;
                 margin: 0 auto;
                 border-bottom: solid 4px;
@@ -5052,10 +5046,10 @@ toc block
 .cw-block-table-of-contents-list {
     padding: 0;
     list-style: none;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     li {
         &:not(:last-child) {
-            border-bottom: solid thin $dark-gray-color-30;
+            border-bottom: solid thin var(--dark-gray-color-30);
         }
         a {
             display: block;
@@ -5070,10 +5064,10 @@ toc block
 .cw-block-table-of-contents-list-details {
     padding: 0;
     list-style: none;
-    border: solid thin $content-color-40;
+    border: solid thin var(--content-color-40);
     li {
         &:not(:last-child) {
-            border-bottom: solid thin $dark-gray-color-30;
+            border-bottom: solid thin var(--dark-gray-color-30);
         }
 
         &:hover {
@@ -5099,7 +5093,7 @@ toc block
     };
 
     p, p:hover {
-        color: $black;
+        color: var(--black);
     }
 }
 
@@ -5162,7 +5156,7 @@ text block end
         content:"";
         width: 3px;
         height: 100%;
-        background: $content-color-40;
+        background: var(--content-color-40);
         left: 50%;
         top: 0;
         position: absolute;
@@ -5181,7 +5175,7 @@ text block end
         @extend %clearfix;
 
         .cw-timeline-item-icon {
-            background: $white;
+            background: var(--white);
             width: 50px;
             height: 50px;
             position: absolute;
@@ -5252,13 +5246,13 @@ text block end
 
         .cw-timeline-item-content {
             width: 40%;
-            background: $white;
+            background: var(--white);
             padding: 20px;
             transition: all $transition-duration ease;
 
             h3 {
                 padding: 15px;
-                color: #fff;
+                color: var(--white);
                 margin: -20px -20px 0 -20px;
                 font-weight: 700;
                 min-height: 1.1em;
@@ -5266,7 +5260,7 @@ text block end
 
             article {
                 min-height: 2em;
-                border: solid thin $content-color-20;
+                border: solid thin var(--content-color-20);
                 border-top: none;
                 margin: 0 -20px;
                 padding: 15px;
@@ -5310,18 +5304,18 @@ text block end
 
             @each $name, $color in $tile-colors {
                 &.cw-timeline-item-content-color-#{"" + $name} {
-                    border-color: $color;
+                    border-color: var(--color);
                     h3 {
-                        background-color: $color;
+                        background-color: var(--color);
                     }
                     &.left {
                         &:before {
-                            border-left: 7px solid $color;
+                            border-left: 7px solid var(--color);
                         }
                     }
                     &.right {
                         &:before {
-                            border-right: 7px solid $color;
+                            border-right: 7px solid var(--color);
                         }
                     }
                 }
@@ -5404,7 +5398,7 @@ cw tiles
     height: 420px;
     width: 270px;
     margin: 0;
-    background-color: $base-color;
+    background-color: var(--base-color);
     &:last-child {
         margin-right: 0;
     }
@@ -5457,14 +5451,14 @@ cw tiles
     .description {
         height: 220px;
         padding: 14px;
-        color: $white;
+        color: var(--white);
         position: relative;
         display: block;
 
         header {
             font-size: 20px;
             line-height: 22px;
-            color: $white;
+            color: var(--white);
             border: none;
             width: 240px;
             overflow: hidden;
@@ -5524,7 +5518,7 @@ cw tiles
         footer {
             width: 242px;
             text-align: right;
-            color: $white;
+            color: var(--white);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -5544,7 +5538,7 @@ cw tiles
     a.description:visited,
     a.description:hover {
         height: 210px;
-        color: $white;
+        color: var(--white);
         text-decoration: unset;
     }
 }
@@ -5577,21 +5571,21 @@ cw tiles end
         }
 
         .cw-template-preview-container-content {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
         }
 
         .cw-template-preview-container-title {
             font-weight: 700;
             padding: 4px 4px 4px 8px;
-            color: $base-color;
-            background-color: $content-color-20;
+            color: var(--base-color);
+            background-color: var(--content-color-20);
         }
 
         .cw-template-preview-blocks {
-            border: solid thin $content-color-40;
+            border: solid thin var(--content-color-40);
             padding: 1em;
             margin: 5px;
-            background-color: $white;
+            background-color: var(--white);
 
         }
     }
@@ -5603,34 +5597,34 @@ cw tiles end
 * * * * * * * * * */
  .cw-file-input {
      width: stretch;
-     border: solid thin $base-color;
+     border: solid thin var(--base-color);
      font-size: 14px;
     cursor: pointer;
 
     &::file-selector-button {
         font-family: inherit;
         border: none;
-        border-right: solid thin $base-color;
-        background-color: $white;
+        border-right: solid thin var(--base-color);
+        background-color: var(--white);
         padding: 6px 15px;
         margin-right: 10px;
-        color: $base-color;
+        color: var(--base-color);
 
         &:hover {
-            background-color: $base-color;
-            color: $white;
+            background-color: var(--base-color);
+            color: var(--white);
         }
      }
  }
  .cw-file-input-change {
-    border: solid thin $base-color;
+    border: solid thin var(--base-color);
 
     button.button {
         padding: 0.5em 1.5em;
         margin: 0 0 0 -1px;
         line-height: 100%;
         border: none;
-        border-right: solid thin $base-color;
+        border-right: solid thin var(--base-color);
     }
     span {
         padding: 0.5em 1.5em 0.5em 0.5em;
@@ -5685,17 +5679,17 @@ w i z a r d  e l e m e n t s
     .cw-element-selector-item {
         display: block;
         width: 100%;
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         padding: 0.5em;
         margin-bottom: 5px;
-        background-color: $white;
-        color: $base-color;
+        background-color: var(--white);
+        color: var(--base-color);
         text-align: left;
         cursor: pointer;
 
         &:hover {
-            color: $white;
-            background-color: $base-color;
+            color: var(--white);
+            background-color: var(--base-color);
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/coursewizard.scss b/resources/assets/stylesheets/scss/coursewizard.scss
index 12993f2f9c7374d188e16bb057dc34bcd3f8683d..2fe1783f62bad0d660583b49012f54ca92164bdf 100644
--- a/resources/assets/stylesheets/scss/coursewizard.scss
+++ b/resources/assets/stylesheets/scss/coursewizard.scss
@@ -21,7 +21,7 @@ div {
     width: calc(50% - 10px);
   }
   &#studyareas {
-    border-left: 1px solid $base-gray;
+    border-left: 1px solid var(--base-gray);
     float: left;
     padding-left: 10px;
     width: calc(50% - 20px);
diff --git a/resources/assets/stylesheets/scss/cronjobs.scss b/resources/assets/stylesheets/scss/cronjobs.scss
index a022898ea80b67659197cfb143b60079940ab3ce..4e45baf0c7e2714b12d2e1700dcc20a64ea6e883 100644
--- a/resources/assets/stylesheets/scss/cronjobs.scss
+++ b/resources/assets/stylesheets/scss/cronjobs.scss
@@ -13,11 +13,11 @@
         display: none;
     }
     .selected {
-        td { background-color: $red-40; }
+        td { background-color: var(--red-40); }
         tr ~ tr {
             display: table-row;
             td {
-                background-color: $white;
+                background-color: var(--white);
             }
             td[colspan] {
                 background-color: inherit;
@@ -26,7 +26,7 @@
         }
     }
     .parameters {
-        border: 1px solid $dark-gray-color;
+        border: 1px solid var(--dark-gray-color);
         border-bottom: 0;
         border-top: 0;
         padding: 0.5em;
@@ -49,7 +49,7 @@
         }
     }
     tbody:last-child .parameters {
-        border-bottom: 1px solid $white;
+        border-bottom: 1px solid var(--white);
         border-bottom-right-radius: 3px;
         border-bottom-left-radius: 3px;
     }
@@ -81,7 +81,7 @@
 }
 
 .inactivatible td {
-    color: $dark-gray-color;
+    color: var(--dark-gray-color);
 }
 
 .cronjobs-edit {
diff --git a/resources/assets/stylesheets/scss/css_tree.scss b/resources/assets/stylesheets/scss/css_tree.scss
index 3689488a6852bbd6027a50654a22b985a58b8fe8..39d9073616badc480399256ea6449747559323a9 100644
--- a/resources/assets/stylesheets/scss/css_tree.scss
+++ b/resources/assets/stylesheets/scss/css_tree.scss
@@ -1,6 +1,6 @@
 $css-tree-delay: 300ms;
 $css-tree-distance: 8px;
-$css-tree-border: 1px solid $light-gray-color-80;
+$css-tree-border: 1px solid var(--light-gray-color-80);
 
 .css-tree {
     &, ul {
@@ -43,7 +43,7 @@ $css-tree-border: 1px solid $light-gray-color-80;
         top: $css-tree-distance;
     }
     ul li:last-child:before {
-        background: $white;
+        background: var(--white);
         height: auto;
         top: 10px;
         bottom: 0;
@@ -96,7 +96,7 @@ $css-tree-border: 1px solid $light-gray-color-80;
         display: none;
 
         + label {
-            color: $brand-color-dark;
+            color: var(--brand-color-dark);
             border-radius: 2px;
             cursor: pointer;
             padding: 0 3px;
@@ -105,11 +105,11 @@ $css-tree-border: 1px solid $light-gray-color-80;
 
         &:checked + label {
             font-weight: bold;
-            background: $content-color-40;
+            background: var(--content-color-40);
         }
 
         &[disabled] + label {
-            color: $dark-gray-color-20;
+            color: var(--dark-gray-color-20);
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
index 8349799c28e16f4079cd1326173d37cd74ad8f03..6020d6e3c0ff652845d7384c9baae14403c4bf6b 100644
--- a/resources/assets/stylesheets/scss/dashboard.scss
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -8,7 +8,7 @@
     }
 
     > li:nth-child(n+2) {
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
     }
 }
 
@@ -23,13 +23,13 @@
     flex-wrap: wrap;
 
     span {
-        border-right: 1px solid $content-color-40;
+        border-right: 1px solid var(--content-color-40);
         margin-right: 0.3em;
         padding-right: 0.4em;
     }
 
     span:not(.document-name) {
-        color: $dark-gray-color-75;
+        color: var(--dark-gray-color-75);
     }
 
     .document-name, span:last-child {
@@ -85,7 +85,7 @@
         }
 
         .files-search-active-filter {
-            background-color: $light-gray-color-20;
+            background-color: var(--light-gray-color-20);
             padding: 0.25em 0.25em 0.25em 0.6em;
             font-size: 0.9em;
             margin-bottom: 1px;
@@ -143,10 +143,10 @@ form div.files-search {
             .button {
                 margin: 0;
                 line-height: 1.5;
-                background-color: $content-color-20;
-                color: $brand-color-dark;
+                background-color: var(--content-color-20);
+                color: var(--brand-color-dark);
                 min-width: auto;
-                border: 1px solid $light-gray-color-40;
+                border: 1px solid var(--light-gray-color-40);
                 border-left: none;
             }
 
diff --git a/resources/assets/stylesheets/scss/dates.scss b/resources/assets/stylesheets/scss/dates.scss
index cf89cda8dd31cb51a10ef9ec6951d1bd40a2353b..f5e83a24a06f05cd5abb3a1ac91fa21f7a7e2e94 100644
--- a/resources/assets/stylesheets/scss/dates.scss
+++ b/resources/assets/stylesheets/scss/dates.scss
@@ -12,15 +12,15 @@ table.dates {
         }
     }
     .nextdate {
-        background-color: $content-color-40;
+        background-color: var(--content-color-40);
     }
 
     .topic-droppable {
         &.active {
-            background-color: $activity-color-40;
+            background-color: var(--activity-color-40);
         }
         &.hovered {
-            background-color: $activity-color-80;
+            background-color: var(--activity-color-80);
         }
     }
     .drag-handle {
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index e80ff994828728035cf66de069b4ae58dfba5814..98df9687eef987ec771fc4fc3e5bb7957d2661bf 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -14,9 +14,9 @@
     }
 
     .ui-dialog-titlebar {
-        background: $brand-color-darker;
+        background: var(--brand-color-darker);
         border: 0;
-        color: $contrast-content-white;
+        color: var(--contrast-content-white);
         font-size:1.3em;
         font-weight: normal;
     }
@@ -60,7 +60,7 @@
     .ui-dialog-buttonpane {
         padding: 0.5em 0.4em;
         margin: 0 1em;
-        border-color: $base-color-20;
+        border-color: var(--base-color-20);
 
         .ui-dialog-buttonset {
             text-align: center;
@@ -93,12 +93,12 @@
 
             &.disabled,
             &[disabled] {
-                background: $light-gray-color-20;
+                background: var(--light-gray-color-20);
                 cursor: default;
                 opacity: 0.65;
 
                 &:hover {
-                    color: $base-color;
+                    color: var(--base-color);
                 }
             }
 
@@ -144,7 +144,7 @@
     min-width: 30em;
 
     .ui-dialog-titlebar {
-        background-color: $yellow;
+        background-color: var(--yellow);
         color: text-contrast($yellow, $black, $white);
         text-align: left;
     }
@@ -234,7 +234,7 @@
                 top: 50%;
                 transform: translate(0, -50%);
 
-                background-color: $white;
+                background-color: var(--white);
                 content: '';
                 display: block;
 
@@ -262,7 +262,7 @@
                 top: 50%;
                 transform: translate(0, -50%);
 
-                background-color: $white;
+                background-color: var(--white);
                 content: '';
                 display: block;
 
@@ -326,7 +326,7 @@ v u e  d i a l o g
 }
 .studip-dialog-body {
     position: absolute;
-    background: $white;
+    background: var(--white);
     box-shadow: 0 0 8px fade-out($black, 0.5);
     overflow-x: auto;
     display: flex;
@@ -341,9 +341,9 @@ v u e  d i a l o g
         display: flex;
     }
     .studip-dialog-header {
-        background: $base-color none repeat scroll 0 0;
-        border-bottom: 1px solid $dark-gray-color-10;
-        color: $white;
+        background: var(--base-color) none repeat scroll 0 0;
+        border-bottom: 1px solid var(--dark-gray-color-10);
+        color: var(--white);
         justify-content: space-between;
         font-size: 1.3em;
         padding: 0.5em 1em;
@@ -367,7 +367,7 @@ v u e  d i a l o g
         cursor: pointer;
     }
     .studip-dialog-content {
-        color: $black;
+        color: var(--black);
         position: relative;
         padding: 15px;
         overflow-y: auto;
@@ -375,7 +375,7 @@ v u e  d i a l o g
         box-sizing: border-box;
     }
     .studip-dialog-footer {
-        border-top: 1px solid $dark-gray-color-10;
+        border-top: 1px solid var(--dark-gray-color-10);
         justify-content: space-between;
     }
 
@@ -393,7 +393,7 @@ v u e  d i a l o g
 
     &.studip-dialog-alert {
         .studip-dialog-header {
-            background: $active-color none repeat scroll 0 0;
+            background: var(--active-color) none repeat scroll 0 0;
         }
         .studip-dialog-content {
             @include background-icon(question-circle-full, attention, 32);
@@ -401,8 +401,8 @@ v u e  d i a l o g
     }
     &.studip-dialog-warning {
         .studip-dialog-header {
-            color: $black;
-            background: $activity-color none repeat scroll 0 0;
+            color: var(--black);
+            background: var(--activity-color) none repeat scroll 0 0;
         }
         .studip-dialog-close-button {
             @include background-icon(decline, clickable);
diff --git a/resources/assets/stylesheets/scss/documents.scss b/resources/assets/stylesheets/scss/documents.scss
index 3d34fd414bb19447ad2bea459c4a5351a5a14fa1..936efcf5cf6b11d92b2e16bbd4f2cc3611ba9bd4 100644
--- a/resources/assets/stylesheets/scss/documents.scss
+++ b/resources/assets/stylesheets/scss/documents.scss
@@ -12,7 +12,7 @@
         z-index: 1;
     
         > a, ul {
-            background-color: $white;
+            background-color: var(--white);
             padding: 5px;
         }
         > a {
@@ -21,7 +21,7 @@
 
         &.extendable:hover {
             > a, > ul {
-                box-shadow: 0 4px 3px $base-gray;
+                box-shadow: 0 4px 3px var(--base-gray);
             }
             ul {
                 display: flex;
@@ -63,7 +63,7 @@
         text-align: center;
     }
     > div {
-        border-left: 1px dashed $dark-gray-color;
+        border-left: 1px dashed var(--dark-gray-color);
         margin-left: $info-width;
         min-height: 100%;
         max-height: 100%;
@@ -85,18 +85,18 @@
 
 .documents.dragging {
     [data-file]:not([data-folder]) {
-        background-color: $light-gray-color-40;
+        background-color: var(--light-gray-color-40);
         opacity: 0.6;
     }
 }
 .documents {
     [data-folder].dropping {
-        background-color: $red-40;
+        background-color: var(--red-40);
     }
 }
 
 .document-draggable-helper {
-    background-color: $activity-color-40 !important;
+    background-color: var(--activity-color-40) !important;
     opacity: 1 !important;
     td {
         border-bottom: 0 !important;
diff --git a/resources/assets/stylesheets/scss/enrolment.scss b/resources/assets/stylesheets/scss/enrolment.scss
index 417cd55f8f75f1d7ddcc8994f589580fb24f290a..41a08d36ab5255108688f81279189ee337cc04d9 100644
--- a/resources/assets/stylesheets/scss/enrolment.scss
+++ b/resources/assets/stylesheets/scss/enrolment.scss
@@ -1,6 +1,6 @@
 #enrollment {
     ul {
-        border-top: 1px solid $base-color;
+        border-top: 1px solid var(--base-color);
         list-style: none inside;
         margin: 0;
         overflow-x: auto;
@@ -10,7 +10,7 @@
             max-height: 200px;
         }
         li {
-            border-bottom: 1px solid $base-color;
+            border-bottom: 1px solid var(--base-color);
             padding: 5px;
 
             &.ui-draggable.ui-draggable-handle {
@@ -42,14 +42,14 @@
     #available-courses li.visible,
     #selected-courses li {
         &:hover {
-            background-color: $base-color-20;
+            background-color: var(--base-color-20);
         }
     }
 
     #available-courses li.ui-draggable.ui-draggable-dragging,
     #selected-courses li.ui-sortable-helper {
-        background-color: $base-color-20;
-        border: 1px solid $base-color;
+        background-color: var(--base-color-20);
+        border: 1px solid var(--base-color);
         list-style: none inside;
         padding: 5px;
         width: auto;
@@ -68,7 +68,7 @@
         }
 
         &.ui-sortable-placeholder {
-            background-color: $yellow-20;
+            background-color: var(--yellow-20);
         }
     }
 
@@ -81,7 +81,7 @@
     }
 
     .ui-state-highlight {
-        background: $red;
+        background: var(--red);
         border: 0;
         height: 30px;
         padding: 10px;
diff --git a/resources/assets/stylesheets/scss/evaluation.scss b/resources/assets/stylesheets/scss/evaluation.scss
index 864b8cc96ca7d124927e6aa134cc8bdc3907fb26..63fcef657b5b1019c01794446ee6e83e0a2a4129 100644
--- a/resources/assets/stylesheets/scss/evaluation.scss
+++ b/resources/assets/stylesheets/scss/evaluation.scss
@@ -2,19 +2,19 @@
 .eval_title {
     font-size: 1.2em;
     font-weight: bold;
-    color: $base-color;
+    color: var(--base-color);
 }
 
 .eval_error {
-    color: $red;
+    color: var(--red);
 }
 
 .eval_success {
-    color: $green;
+    color: var(--green);
 }
 
 .eval_info {
-    color: #333333;
+    color: var(--base-gray);
 }
 
 .eval_metainfo {
@@ -22,11 +22,11 @@
 }
 
 .eval_highlight {
-    background-color: #b8c3e8;
+    background-color: var(--content-color-60);
 }
 
 .eval_gray {
-    background: #d5d5dd none;
+    background: var(--dark-gray-color-20) none;
 }
 .evaluation_item {
     box-sizing: border-box;
@@ -35,6 +35,6 @@
 
 h3.eval {
     font-size: 1.3em;
-    color: $black;
+    color: var(--black);
     font-weight: bold;
 }
diff --git a/resources/assets/stylesheets/scss/feedback.scss b/resources/assets/stylesheets/scss/feedback.scss
index 14fdb403ecd04286f8c9d1cb505a669bfbcdf975..a9c34e6000dca283754d366a22dca677a9645aeb 100644
--- a/resources/assets/stylesheets/scss/feedback.scss
+++ b/resources/assets/stylesheets/scss/feedback.scss
@@ -44,8 +44,8 @@ article.studip.feedback-stream {
     .feedback-entry {
         margin-top: 10px;
         padding: 5px;
-        background-color: $content-color-10;
-        border: 1px solid $content-color-40;
+        background-color: var(--content-color-10);
+        border: 1px solid var(--content-color-40);
 
         header {
             background: transparent;
@@ -70,7 +70,7 @@ article.studip.feedback-stream {
             }
         }
         .date {
-            color: $base-gray;
+            color: var(--base-gray);
             text-align: right;
             font-size: 12px;
         }
@@ -98,7 +98,7 @@ table.feedback {
 .percentage-bar {
     margin-left: -5px;
     padding: 0 5px;
-    color: $content-color-10;
-    background-color: $base-color;
+    color: var(--content-color-10);
+    background-color: var(--base-color);
     min-width: 20px;
 }
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 71c4f1cf6b396983840a8a879e541e9b05b3b68a..1f94d1fbd956da4b5e40c47a796923687f8bb356 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -33,7 +33,7 @@ form.default {
     }
 
     span.empty {
-        color: $light-gray-color-40;
+        color: var(--light-gray-color-40);
         font-style: italic;
     }
 
@@ -42,8 +42,8 @@ form.default {
     textarea, select {
         box-sizing: border-box;
 
-        border: 1px solid $light-gray-color-40;
-        color: $dark-gray-color;
+        border: 1px solid var(--light-gray-color-40);
+        color: var(--dark-gray-color);
         max-width: $max-width-m;
         padding: 5px;
         vertical-align: middle;
@@ -51,7 +51,7 @@ form.default {
         transition: all $transition-duration ease-out;
 
         &:focus {
-            border-color: $brand-color-dark;
+            border-color: var(--brand-color-dark);
         }
 
         &.size-s {
@@ -66,7 +66,7 @@ form.default {
         }
 
         &[readonly] {
-            background-color: $light-gray-color-20;
+            background-color: var(--light-gray-color-20);
         }
     }
 
@@ -170,17 +170,17 @@ form.default {
 
     fieldset {
         box-sizing: border-box;
-        border: solid 1px $content-color-40;
+        border: solid 1px var(--content-color-40);
         margin: 0 0 10px;
         min-width: auto;
         padding: $gap 10px 10px;
 
         > legend {
             box-sizing: border-box;
-            background-color: $fieldset-header;
-            border: 1px solid $content-color-40;
+            background-color: var(--fieldset-header);
+            border: 1px solid var(--content-color-40);
             border-bottom: 0;
-            color: $brand-color-dark;
+            color: var(--brand-color-dark);
             font-size: 12pt;
             font-weight: bold;
             line-height: 2em;
@@ -215,13 +215,13 @@ form.default {
         font-weight: bold;
         &::after {
             content: "*";
-            color: $red;
+            color: var(--red);
         }
     }
     .studiprequired {
         font-weight: bold;
         .asterisk {
-            color: $red;
+            color: var(--red);
         }
     }
 
@@ -230,7 +230,7 @@ form.default {
     }
 
     select[disabled] {
-        background-color: $dark-gray-color-15;
+        background-color: var(--dark-gray-color-15);
     }
 
     .tooltip.tooltip-icon::before {
@@ -238,8 +238,8 @@ form.default {
     }
 
     footer {
-        background-color: $content-color-20;
-        border-top: 1px solid $brand-color-darker;
+        background-color: var(--content-color-20);
+        border-top: 1px solid var(--brand-color-darker);
         clear: both;
         margin-left: 0;
         padding: 5px 10px;
@@ -260,14 +260,14 @@ form.default {
         background-size: 20px 20px;
         cursor: pointer;
         padding-left: 30px;
-        color: $base-color;
+        color: var(--base-color);
 
         input[type=file] {
             display: none;
         }
         .filename {
             padding-left: 0.5em;
-            color: $light-gray-color-80;
+            color: var(--light-gray-color-80);
         }
     }
 
@@ -291,7 +291,7 @@ form.default {
             transition: all $transition-duration ease-out;
 
             &:focus {
-                border-color: $brand-color-dark;
+                border-color: var(--brand-color-dark);
             }
 
             &.size-s {
@@ -402,7 +402,7 @@ form.default {
         bottom: 100%;
         right: 0;
 
-        color: $light-gray-color;
+        color: var(--light-gray-color);
         font-size: 0.8em;
     }
 
@@ -433,13 +433,13 @@ form.default {
     }
 
     .invalid {
-        border: 2px dotted $red ! important;
+        border: 2px dotted var(--red) ! important;
     } // an invalid form entry
 
     .invalid_message {
         display: none;
         font-weight: bold;
-        color: $red;
+        color: var(--red);
     }
 
     .select2-container {
@@ -490,7 +490,7 @@ form.default {
             display: inline-block;
         }
         textarea:invalid, input[type=text]:invalid {
-            border-left: 4px solid $red;
+            border-left: 4px solid var(--red);
         }
     }
 
@@ -509,11 +509,11 @@ form.default {
         input[type=range] {
             &::-moz-range-track {
                 height: 11px;
-                border: 1px solid $content-color;
+                border: 1px solid var(--content-color);
                 background-color: transparent;
             }
             &::-moz-range-progress {
-                background-color: $base-color;
+                background-color: var(--base-color);
                 height: 11px;
             }
             &::-moz-range-thumb {
@@ -522,7 +522,7 @@ form.default {
                 height: 1.2em;
             }
             &::-moz-range-thumb:hover {
-                background-color: $content-color;
+                background-color: var(--content-color);
             }
         }
         output {
@@ -556,7 +556,7 @@ form.narrow {
 .content-title {
     background-color: transparent;
     padding-top: 0;
-    color: $base-gray;
+    color: var(--base-gray);
     font-size: 1.4em;
     text-align: left;
 }
@@ -598,5 +598,3 @@ form.inline {
         }
     }
 }
-
-
diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 583a7fbe3a9c6484d227ce7177a6d48481f98d87..91af8e260fc42284dcf85708442a3c5833d2422d 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -7,10 +7,8 @@
     -webkit-border-radius: $radius;
 }
 
-$forum_light: #e7ebf1;
-$forum_dark: #d0d7e3;
-$forum_header: #899ab9;
-$forum_highlight: #ffe4ad;
+
+
 $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 
 @media print {
@@ -22,7 +20,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 
         div.title {
             p.author {
-                margin-bottom: 0px;
+                margin-bottom: 0;
             }
         }
 
@@ -46,8 +44,8 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
     }
 
     span.highlight {
-        background-color: #ffe4ad;
-        border: 1px solid #ffe4ad;
+        background-color: var(--activity-color-40);
+        border: 1px solid var(--activity-color-40);
         @include rounded;
     }
 
@@ -60,12 +58,12 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
     }
 
     .forum_header {
-        background-color: $forum_header;
-        color: #ffffff;
-        margin: 0pt;
-        padding: 0pt;
+        background-color: var(--content-color);
+        color: var(--white);
+        margin: 0;
+        padding: 0;
         .button {
-            margin: 0px;
+            margin: 0;
         }
 
     }
@@ -78,7 +76,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
 
     table.forum {
         td.selected {
-            background-color: $forum_highlight
+            background-color: var(--activity-color-40);
         }
     }
 
@@ -129,7 +127,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
         cursor: pointer;
 
         span {
-            color: #FF3333;
+            color: var(--red-80);
         }
     }
 
@@ -152,7 +150,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
         height: 100%;
         margin: 0 0 0.75em 0;
         padding: 0;
-        background-color: $forum_light;
+        background-color: var(--content-color-20);
         a {
             word-break: break-all;
 
@@ -178,7 +176,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
     }
 
     div.highlight {
-        border: 4px solid #ffe4ad;
+        border: 4px solid var(--activity-color-40);
         animation: border-pulsate 2s 5;
     }
 
@@ -233,7 +231,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
         @media only screen and (max-width: 768px) {
             display: none !important;
         }
-        border-left: 1px solid #ffffff;
+        border-left: 1px solid var(--white);
         margin: 0;
         padding: 4px;
         height: 100%;
@@ -308,10 +306,8 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
       text-decoration: none;
 
         span {
-          position: relative;
           display: inline-block;
           margin-bottom: 9px;
-          background-color: rgba(255, 255, 255, 0.3);
           background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
           background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
           background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
@@ -319,15 +315,11 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
           background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
           background-repeat: repeat-x;
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0);
-          background-color: #ddd;
-          border: 2px solid #ccc;
-          -webkit-border-radius: 4px;
-          -moz-border-radius: 4px;
+          background-color: var(--dark-gray-color-20);
+          border: 2px solid var(--dark-gray-color-30);
           border-radius: 4px;
           top: 20%;
-          bottom: none;
-          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-          -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
+          bottom: 0;
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
           font-size: 10pt;
           font-weight: normal;
@@ -350,7 +342,7 @@ $shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
     }
 
     li.selected {
-        background-color: #DDDDFF;
+        background-color: var(--base-color-20);
     }
 
     div.posting.bg2 {
diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss
index ae1e5421da7fb96c7bbf2298be8aa4f5fca4df06..256540c8c11b35b3999618163cd550ed9e9d5831 100644
--- a/resources/assets/stylesheets/scss/fullscreen.scss
+++ b/resources/assets/stylesheets/scss/fullscreen.scss
@@ -1,5 +1,3 @@
-$transition-duration: 300ms;
-
 .fullscreen-container {
     flex-grow: 1;
     margin-right: 12px;
@@ -9,7 +7,6 @@ $transition-duration: 300ms;
     background: none;
     border: none;
     cursor: pointer;
-    float: right;
     height: 28px;
 
     @include background-icon(zoom-in2, clickable, 20);
@@ -26,8 +23,6 @@ $transition-duration: 300ms;
     top: 1px;
     right: 12px;
 
-    cursor: pointer;
-
     z-index: 100;
 }
 
@@ -62,8 +57,8 @@ html.is-fullscreen {
 
     #main-footer {
         opacity: 0;
-        max-height: 0px;
-        padding: 0px;
+        max-height: 0;
+        padding: 0;
     }
 
     .fullscreen-toggle.unfullscreen {
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index d1a5db144b865c34dd3f781ab144f45e2b139403..7c0b33bcd44038e4372861d12b1200357b0f48c5 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -73,9 +73,9 @@
 
     // List display
     #globalsearch-list {
-        background-color: $white;
-        box-shadow: 1px 1px 1px $light-gray-color-80;
-        color: $text-color;
+        background-color: var(--white);
+        box-shadow: 1px 1px 1px var(--light-gray-color-80);
+        color: var(--text-color);
         display: none;
         max-height: 90vh;
         overflow: auto;
@@ -84,18 +84,18 @@
         width: $width;
 
         a {
-            color: $base-color;
+            color: var(--base-color);
 
             &:hover {
-                color: $active-color;
+                color: var(--active-color);
             }
         }
 
         section {
-            color: $text-color;
+            color: var(--text-color);
 
             header {
-                color: $base-color;
+                color: var(--base-color);
                 margin: 5px;
                 margin-bottom: 0;
             }
@@ -115,7 +115,7 @@
     #globalsearch-searching {
         $icon-size: 32px;
 
-        color: $dark-gray-color-45;
+        color: var(--dark-gray-color-45);
         display: none;
         text-align: center;
 
@@ -141,14 +141,14 @@
         }
 
         article {
-            border: 1px solid $content-color-40;
+            border: 1px solid var(--content-color-40);
             margin: 3px;
             margin-bottom: 8px;
             margin-top: 8px;
 
             > header {
-                background-color: $content-color-20;
-                color: $base-color;
+                background-color: var(--content-color-20);
+                color: var(--base-color);
 
                 display: flex;
                 flex-direction: row;
@@ -179,11 +179,11 @@
 
                 padding: 6px 6px 6px 0;
 
-                border-top: 1px solid $content-color-40;
+                border-top: 1px solid var(--content-color-40);
                 transition: background-color $transition-duration;
 
                 &:hover {
-                    background-color: $dark-gray-color-20;
+                    background-color: var(--dark-gray-color-20);
                 }
 
                 &.globalsearch-extended-result {
@@ -222,13 +222,13 @@
                     }
 
                     .globalsearch-result-details {
-                        color: $black;
+                        color: var(--black);
                         font-size: $font-size-small;
                     }
                 }
 
                 .globalsearch-result-time {
-                    color: $dark-gray-color-80;
+                    color: var(--dark-gray-color-80);
                     flex: 0;
                     font-size: $font-size-small;
                     text-align: right;
diff --git a/resources/assets/stylesheets/scss/gradebook.scss b/resources/assets/stylesheets/scss/gradebook.scss
index bf0a93ba359b1aaf3f4d33a57027a3ef6fb8e455..2f4c0a7d4c3a19c15de429f378c56b826cf9a8bc 100644
--- a/resources/assets/stylesheets/scss/gradebook.scss
+++ b/resources/assets/stylesheets/scss/gradebook.scss
@@ -5,7 +5,7 @@
         height: 20px;
         overflow: hidden;
         font-size: 15px;
-        background-color: $light-gray-color-20;
+        background-color: var(--light-gray-color-20);
         margin: 0.5em 0;
     }
 
@@ -13,10 +13,10 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        color: $white;
+        color: var(--white);
         text-align: center;
         white-space: nowrap;
-        background-color: $base-color;
+        background-color: var(--base-color);
     }
 }
 
@@ -26,7 +26,7 @@
 
 .gradebook-lecturer-overview .gradebook-column-total,
 .gradebook-lecturer-overview .gradebook-column-category {
-    border-left: 1px solid $light-gray-color-20;
+    border-left: 1px solid var(--light-gray-color-20);
 }
 
 .gradebook-lecturer-overview .gradebook-column-category {
@@ -50,7 +50,7 @@ form.gradebook-lecturer-weights label.gradebook-weight {
     }
 
     output {
-        color: $light-gray-color;
+        color: var(--light-gray-color);
     }
 
     output:before {
@@ -104,8 +104,6 @@ section.gradebook-student-category {
 
 .gradebook-lecturer-custom-definitions .gradebook-lecturer-blank-slate {
     text-align: center;
-    // border-left: 1px solid $dark-gray-color-15;
-    // border-bottom: 1px solid $brand-color-darker;
 }
 
 table.default .gradebook-grade-input,
diff --git a/resources/assets/stylesheets/scss/grid.scss b/resources/assets/stylesheets/scss/grid.scss
index 67cf0470f5260c13ca47d79ec7cdd42c5776522f..21748639866610f3855c5257f2192f5ee5bf2c4b 100644
--- a/resources/assets/stylesheets/scss/grid.scss
+++ b/resources/assets/stylesheets/scss/grid.scss
@@ -14,7 +14,7 @@ $grid-element-width: 270px;
 }
 
 .studip-grid-element {
-    border: 1px solid $light-gray-color;
+    border: 1px solid var(--light-gray-color);
 }
 
 // Responsive displays
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index d4abb2e32224065ad5307c7dc33c03d1d5ded8a6..5c95b4d41265a093dd6e72e4df8757931e591196 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -5,9 +5,9 @@
 }
 
 #top-bar {
-    background-color: $base-color;
-    border: 1px $brand-color-darker;
-    color: $contrast-content-white;
+    background-color: var(--base-color);
+    border: 1px var(--brand-color-darker);
+    color: var(--contrast-content-white);
     border-bottom-style: solid;
     height: $bar-bottom-container-height;
     width: 100%;
@@ -43,7 +43,7 @@ html {
 
 #header-links {
     > ul > li > a {
-        color: $white;
+        color: var(--white);
         margin: 0 6px;
         text-decoration: none;
         &:hover {
@@ -81,7 +81,7 @@ html {
 
     .action-menu-icon {
         border: 1px solid var(--dark-gray-color-40);
-        background-color: $dark-gray-color-5;
+        background-color: var(--dark-gray-color-5);
         height: 28px;
         margin: 0 32px 0 0;
         position: relative;
@@ -123,22 +123,22 @@ html {
         right: 0;
 
         /*padding: 4px 28px 4px 8px;*/
-        background: $white;
-        box-shadow: 1px 1px 1px $dark-gray-color-60;
+        background: var(--white);
+        box-shadow: 1px 1px 1px var(--dark-gray-color-60);
         text-align: left;
         white-space: nowrap;
 
         a:link,
         a:visited {
-            color: $base-color;
+            color: var(--base-color);
         }
         a:hover,
         a:active {
-            color: $active-color;
+            color: var(--active-color);
         }
 
         div {
-            color: $black;
+            color: var(--black);
         }
     }
 }
@@ -150,7 +150,7 @@ html {
 
 #site-title {
     flex: 1;
-    color: $white;
+    color: var(--white);
     margin-left: 0;
     z-index: 1002;
     line-height: $bar-bottom-container-height;
@@ -176,7 +176,7 @@ html {
 }
 
 #navigation-level-1 {
-    background-color: $dark-gray-color-5;
+    background-color: var(--dark-gray-color-5);
     height: $header-height;
     z-index: 3;
 }
diff --git a/resources/assets/stylesheets/scss/helpbar.scss b/resources/assets/stylesheets/scss/helpbar.scss
index ccb0333ed42b4b11a65c8eb2a930272346378194..f2a3a1bcd92b6db4e3132310ae5ac15e606134af 100644
--- a/resources/assets/stylesheets/scss/helpbar.scss
+++ b/resources/assets/stylesheets/scss/helpbar.scss
@@ -21,7 +21,7 @@ $border-width: 4px;
 
     h2, h3 {
         border-bottom: 0;
-        color: $white;
+        color: var(--white);
         font-size: 1em;
         font-weight: normal;
         margin: 0;
@@ -33,7 +33,7 @@ $border-width: 4px;
     }
 
     h3 {
-        border-bottom: 1px dotted $base-color-80;
+        border-bottom: 1px dotted var(--base-color-80);
         font-size: 1.1em;
         margin-bottom: 2px;
         padding-bottom: 2px;
@@ -46,7 +46,7 @@ $border-width: 4px;
 }
 
 .helpbar {
-    background-color: $base-color;
+    background-color: var(--base-color);
     padding: 8px;
     box-sizing: border-box;
     position: absolute;
@@ -57,7 +57,7 @@ $border-width: 4px;
     z-index: 1000;
 
     &::before {
-        border-bottom: 2px solid $base-color-80;
+        border-bottom: 2px solid var(--base-color-80);
         border-left: $border-width solid transparent;
         border-right: $border-width solid transparent;
         content: '';
@@ -79,7 +79,7 @@ $border-width: 4px;
     }
 
     .helpbar-widgets {
-        color: $white;
+        color: var(--white);
         list-style: none;
         padding: 0;
 
@@ -88,16 +88,16 @@ $border-width: 4px;
         }
 
         a:link, a:visited {
-            color: $white;
+            color: var(--white);
         }
 
         a:hover, a:active {
-            color: $white;
+            color: var(--white);
             text-decoration: underline;
         }
 
         > li {
-            border-top: 1px solid $content-color;
+            border-top: 1px solid var(--content-color);
             padding: 3px 0;
             margin: 0 .25em;
         }
@@ -135,8 +135,8 @@ $border-width: 4px;
 }
 
 section.big-help-box {
-    background-color: $content-color-40;
-    border: 1px solid $content-color-80;
+    background-color: var(--content-color-40);
+    border: 1px solid var(--content-color-80);
     padding: 0.5em;
     margin-top: 0.5em;
     text-align: center;
diff --git a/resources/assets/stylesheets/scss/i18n.scss b/resources/assets/stylesheets/scss/i18n.scss
index 9a2a0bf830626b644ffb491fd9eb425c2475142e..1692a7abc42d59f7dd849221037540fd4b639659 100644
--- a/resources/assets/stylesheets/scss/i18n.scss
+++ b/resources/assets/stylesheets/scss/i18n.scss
@@ -3,7 +3,7 @@ div.i18n_group {
     position: relative;
 
     > select.i18n {
-        border: 1px solid $light-gray-color-40;
+        border: 1px solid var(--light-gray-color-40);
         border-radius: 0;
         box-sizing: border-box;
         margin: 0 !important;
diff --git a/resources/assets/stylesheets/scss/index.scss b/resources/assets/stylesheets/scss/index.scss
index a1b55c478e4e075e1a152d6c6d57221d2cc013a3..996697be9684ac3d8df5883607a1393124f7dbd4 100644
--- a/resources/assets/stylesheets/scss/index.scss
+++ b/resources/assets/stylesheets/scss/index.scss
@@ -69,7 +69,7 @@ $gap-between-boxes: calc($login-page-margin / 2);
 
                     p {
                         font-size: 0.5em;
-                        color: $black;
+                        color: var(--black);
                     }
                 }
             }
@@ -83,7 +83,7 @@ $gap-between-boxes: calc($login-page-margin / 2);
             display: flex;
             align-items: center;
             gap: 5px;
-            border-top: 1px solid $light-gray-color;
+            border-top: 1px solid var(--light-gray-color);
             font-size: 0.9em;
             padding: 10px;
 
@@ -93,7 +93,7 @@ $gap-between-boxes: calc($login-page-margin / 2);
         }
 
         div.login_info {
-            border-top: 1px solid $light-gray-color;
+            border-top: 1px solid var(--light-gray-color);
             font-size: 0.8em;
             div {
                 text-align: right;
diff --git a/resources/assets/stylesheets/scss/installer.scss b/resources/assets/stylesheets/scss/installer.scss
index c201a574d1ad57c2faa11770b769c6b0d19dce7a..916d74624a68a421f83c8f905926f77521995646 100644
--- a/resources/assets/stylesheets/scss/installer.scss
+++ b/resources/assets/stylesheets/scss/installer.scss
@@ -101,19 +101,19 @@ body#install {
                 &::before {
                     content: url('#{$icon-path}red/decline.svg') ' ';
                 }
-                color: $red;
+                color: var(--red);
             }
             &.success {
                 &::before {
                     content: url('#{$icon-path}green/accept.svg') ' ';
                 }
-                color: $green;
+                color: var(--green);
             }
             &.notice {
                 &::before {
                     content: url('#{$icon-path}blue/info-circle.svg') ' ';
                 }
-                color: black;
+                color: var(--black);
             }
 
             code {
@@ -163,15 +163,15 @@ body#install {
                 -moz-appearance: none;
                 appearance: none;
 
-                border: 1px solid #000;
-                color: $base-color-60;
+                border: 1px solid var(--black);
+                color: var(--base-color-60);
                 margin-left: 1em;
                 width: 550px;
                 height: 20px;
 
                 &::-moz-progress-bar,
                 &::-webkit-progress-bar {
-                    background-color: $base-color-60;
+                    background-color: var(--base-color-60);
                 }
 
                 + div {
@@ -202,15 +202,15 @@ body#install {
     }
 
     code {
-        background-color: $dark-gray-color;
-        color: $white;
+        background-color: var(--dark-gray-color);
+        color: var(--white);
         padding: 2px 4px;
     }
 
     div.type-text {
         &.required {
             label::after {
-                color: $red;
+                color: var(--red);
                 content: '*';
             }
         }
@@ -244,7 +244,7 @@ body#install {
     }
 
     strong.required::after {
-        color: $red;
+        color: var(--red);
         content: '*';
     }
 
@@ -255,14 +255,14 @@ body#install {
         -moz-appearance: none;
         appearance: none;
 
-        color: $base-color-60;
+        color: var(--base-color-60);
         margin: 0 1em -4px;
         width: calc(100% - 2em);
         height: 4px;
 
         &::-moz-progress-bar,
         &::-webkit-progress-bar {
-            background-color: $base-color-60;
+            background-color: var(--base-color-60);
         }
     }
 }
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 59046b47ee69178303caf57a2ee2eb667fe7275a..7dfda47f09092dfcfe8b4c54669d84f6c51bda12 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -22,7 +22,7 @@ html {
 }
 
 body {
-    background-color: $white;
+    background-color: var(--white);
     display: grid;
     grid-column-gap: 5px;
     grid-row-gap: $grid-gap;
@@ -30,7 +30,7 @@ body {
     grid-template-rows: auto 1fr auto;
 
     &::backdrop {
-        background: $white;
+        background: var(--white);
     }
 }
 
@@ -48,7 +48,7 @@ body {
 #navigation-level-1 {
     align-content: stretch;
     align-items: stretch;
-    background-color: $white;
+    background-color: var(--white);
     border-radius: 0 0 2px 2px;
     box-sizing: border-box;
     display: flex;
@@ -70,7 +70,7 @@ body {
 
 /* --- Layouts -------------------------------------------------------------- */
 #current-page-structure {
-    background-color: #fff;
+    background-color: var(--white);
     border-radius: 0 0 2px 2px;
     position: relative;
     width: 100%;
@@ -102,7 +102,7 @@ body {
         max-height: 30px;
         overflow: hidden;
 
-        background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10);
+        background: linear-gradient(to bottom, var(--dark-gray-color-5), var(--dark-gray-color-10));
 
         > .context_icon {
             margin: 7px 1px 0 9px;
@@ -112,8 +112,8 @@ body {
 
     .tabs_wrapper {
         align-items: stretch;
-        background-color: $dark-gray-color-10;
-        border-bottom: 1px solid $dark-gray-color-40;
+        background-color: var(--dark-gray-color-10);
+        border-bottom: 1px solid var(--dark-gray-color-40);
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
@@ -143,15 +143,15 @@ body {
 }
 
 #sidebar {
-    border-left: 1px dashed $brand-color-darker;
+    border-left: 1px dashed var(--brand-color-darker);
     grid-column: 1 / 2;
     grid-row: 2 / 3;
 }
 
 #content-wrapper {
     background:
-        linear-gradient(90deg, #fff 30%, hsla(0, 0%, 100%, 0)),
-        linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 70%) 100% 0,
+        linear-gradient(90deg, var(--white) 30%, hsla(0, 0%, 100%, 0)),
+        linear-gradient(90deg, hsla(0, 0%, 100%, 0), var(--white) 70%) 100% 0,
         radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), transparent),
         radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) 100% 0;
     background-attachment: local, local, scroll, scroll;
@@ -182,8 +182,8 @@ body {
 
 // for old pages without template layout
 #layout_table {
-    background-color: $light-gray-color-60;
-    border: 20px solid #fff;
+    background-color: var(--light-gray-color-60);
+    border: 20px solid var(--white);
     margin: 0;
     padding: 0;
     width: 100%;
@@ -193,7 +193,7 @@ body {
 
 #page-title-container {
     float: left;
-    background-color: #fff;
+    background-color: var(--white);
     line-height: 20px;
     margin-left: 15px;
     margin-right: 15px;
@@ -207,7 +207,7 @@ body {
     max-height: 30px;
     overflow: hidden;
 
-    background: linear-gradient(to bottom, $dark-gray-color-5, $dark-gray-color-10);
+    background: linear-gradient(to bottom, var(--dark-gray-color-5), var(--dark-gray-color-10));
 
     > .context_icon {
         margin: 7px 1px 0 9px;
@@ -223,8 +223,8 @@ body {
 }
 
 #main-footer {
-    background-color: $base-color;
-    color: $white;
+    background-color: var(--base-color);
+    color: var(--white);
     display: flex;
     padding: 2px 0;
     grid-column: 1 / 3;
@@ -251,7 +251,7 @@ body {
             margin-right: 2px;
 
             a {
-                color: $white;
+                color: var(--white);
                 margin: 0 6px;
                 text-decoration: none;
                 &:hover {
@@ -273,7 +273,7 @@ body {
     width: 100%;
     min-width: $site-width;
 
-    border-bottom: 1px solid $light-gray-color-40;
+    border-bottom: 1px solid var(--light-gray-color-40);
 }
 
 #top-bar {       // second row of flex-main
@@ -301,10 +301,10 @@ body {
             flex-direction: row;
             align-items: stretch;
             justify-content: space-between;
-            background-color: $dark-gray-color-10;
+            background-color: var(--dark-gray-color-10);
             font-size: 0.9em;
             min-height: 2.3em;
-            border-bottom: 1px solid $dark-gray-color-40;
+            border-bottom: 1px solid var(--dark-gray-color-40);
         }
 
         #tabs { // row 1 of layout_page
diff --git a/resources/assets/stylesheets/scss/links.scss b/resources/assets/stylesheets/scss/links.scss
index f97ac7410e85721997313819fed7eab12b942ccf..f239ed960db478aba18334871cd27886afb50862 100644
--- a/resources/assets/stylesheets/scss/links.scss
+++ b/resources/assets/stylesheets/scss/links.scss
@@ -1,13 +1,13 @@
 /* --- Links ---------------------------------------------------------------- */
 a, a:link, a:visited {
-    color: $base-color;
+    color: var(--base-color);
     text-decoration: none;
 
-    &.index     { color: #444; }
-    &.printhead { color: #339; }
-    &.tree      { color: #000; }
+    &.index     { color: var(--base-gray); }
+    &.printhead { color: var(--base-color); }
+    &.tree      { color: var(--black); }
     &.toolbar {
-        color: #91a2b6;
+        color: var(--brand-color-lighter);
         font-size: 9px;
     }
 }
@@ -21,12 +21,12 @@ a[disabled] {
 }
 
 a:hover, a:active, a:hover.index, a:active.index, a:hover.tree {
-    color: $active-color;
+    color: var(--active-color);
     text-decoration: none;
 }
 
 a:hover.toolbar {
-    color: #eee;
+    color: var(--dark-gray-color-10);
 }
 
 a.link-intern {
diff --git a/resources/assets/stylesheets/scss/lists.scss b/resources/assets/stylesheets/scss/lists.scss
index ee7dd4f05724bf5f25804ed85ae8fe2efb9055c9..8ef1eb79fe7b9bff6a4a18859b5ead6363893161 100644
--- a/resources/assets/stylesheets/scss/lists.scss
+++ b/resources/assets/stylesheets/scss/lists.scss
@@ -39,7 +39,7 @@ ol {
     display: flex; // Prevents the mystery gap between elements
 
     > li {
-        border-right: 1px solid $dark-gray-color;
+        border-right: 1px solid var(--dark-gray-color);
 
         &:last-child {
             border-right: 0;
diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss
index 453987b91a2b77a718009460547f1aaf672599fb..d9f368357447ddab1ae1fbf55328c792dc536fb0 100644
--- a/resources/assets/stylesheets/scss/messages.scss
+++ b/resources/assets/stylesheets/scss/messages.scss
@@ -13,13 +13,13 @@ a.message-tag {
 
 #statusbar_container {
     > .statusbar {
-        border: thin solid $light-gray-color;
+        border: thin solid var(--light-gray-color);
         min-width: 100%;
         max-width: 100%;
-        background-color: $content-color-40;
+        background-color: var(--content-color-40);
 
         > .progress {
-            background-color: $content-color;
+            background-color: var(--content-color);
             width: 100%;
             min-width: 0;
             max-width: 0;
@@ -27,14 +27,14 @@ a.message-tag {
             line-height: 20px;
 
             &.progress-error {
-                background-color: $red;
+                background-color: var(--red);
             }
         }
 
         > .progresstext {
             margin-top: -20px;
             text-align: center;
-            color: $white;
+            color: var(--white);
             height: 20px;
             line-height: 20px;
         }
@@ -55,7 +55,7 @@ a.message-tag {
 }
 
 .message_body {
-    background-color: $content-color-20;
+    background-color: var(--content-color-20);
     margin: 3px;
     padding: 10px;
 }
@@ -63,7 +63,7 @@ a.message-tag {
 .responsive_author {
     margin: 0;
     font-size: 0.8em;
-    color: $base-gray;
+    color: var(--base-gray);
 }
 
 form.default {
diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss
index 4be1580ffeca4e83519bac46798f296f04d98bef..c93b214cb00b4095e4f21f555298f94cb6f3136d 100644
--- a/resources/assets/stylesheets/scss/mvv.scss
+++ b/resources/assets/stylesheets/scss/mvv.scss
@@ -3,7 +3,7 @@
         display: block;
         input[type="text"] {
             box-sizing: border-box;
-            border: 1px solid $base-color-60;
+            border: 1px solid var(--base-color-60);
             border-right-width: 30px;
             float: left;
             height: 22px;
@@ -42,7 +42,7 @@ dl {
 
         dd {
             padding: 10px 10px 10px 30px;
-            border-bottom: 1px solid $dark-gray-color-20;
+            border-bottom: 1px solid var(--dark-gray-color-20);
 
             label {
                 display: inline-block;
@@ -65,15 +65,15 @@ dl {
         }
 
         blockquote {
-            border: 1px dashed $dark-gray-color-80;
+            border: 1px dashed var(--dark-gray-color-80);
             margin: 3px;
             padding: 3px;
             font-size: 0.9em;
             flex: 1 0 auto;
 
             &:hover {
-                background-color: $yellow-20;
-                border-color: $red;
+                background-color: var(--yellow-20);
+                border-color: var(--red);
             }
         }
 
@@ -110,7 +110,7 @@ table {
 
         > tbody {
             &.collapsed > tr > td {
-                border-bottom: 1px solid $dark-gray-color-20;
+                border-bottom: 1px solid var(--dark-gray-color-20);
                 padding: 5px;
                 &:first-child {
                     padding-left: 0;
@@ -119,7 +119,7 @@ table {
 
             &.not-collapsed {
                 > tr > td {
-                    border-bottom: 1px solid $dark-gray-color-20;
+                    border-bottom: 1px solid var(--dark-gray-color-20);
                     padding: 5px;
                     &:first-child {
                         padding-left: 0;
@@ -131,7 +131,7 @@ table {
             }
 
             &:last-of-type > tr.last-child > td {
-                border-bottom: 1px solid $dark-gray-color-20;
+                border-bottom: 1px solid var(--dark-gray-color-20);
             }
 
             &.ui-sortable-helper {
@@ -208,7 +208,7 @@ table {
 
         td {
             border: none;
-            border-right:1px solid $dark-gray-color-20;
+            border-right:1px solid var(--dark-gray-color-20);
             text-align: center;
             margin: 0;
             padding:0;
@@ -216,17 +216,17 @@ table {
             &.type{
                 font-size: 0.5em;
                 &.soll{
-                    color:$red;
+                    color:var(--red);
                 }
                 &.kann{
-                    color:$dark-green;
+                    color:var(--dark-green);
                 }
             }
         }
 
         th {
             border: none;
-            border-right:1px solid $dark-gray-color-20;
+            border-right:1px solid var(--dark-gray-color-20);
             text-align: center;
             margin: 0;
             padding:0;
@@ -255,18 +255,18 @@ ul {
         }
 
         &.even {
-            background-color: $dark-gray-color-10;
+            background-color: var(--dark-gray-color-10);
 
             &:hover {
-                background-color: $content-color-60;
+                background-color: var(--content-color-60);
             }
         }
 
         &.odd {
-            background-color: $dark-gray-color-5;
+            background-color: var(--dark-gray-color-5);
 
             &:hover {
-                background-color: $content-color-40;
+                background-color: var(--content-color-40);
             }
         }
     }
@@ -314,7 +314,7 @@ ul {
         padding: 0;
 
         li {
-            border-bottom: solid $dark-gray-color-45 1px;
+            border-bottom: solid var(--dark-gray-color-45) 1px;
             padding-top: 5px;
             padding-left: 12px;
             margin-bottom: 5px;
@@ -402,12 +402,12 @@ select.mvv-search-select-list {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            border-top: 1px solid $dark-gray-color-60;
+            border-top: 1px solid var(--dark-gray-color-60);
             padding: 3px 20px 3px 2px;
             height: 1.3em;
 
             &:hover {
-                background:$dark-gray-color-10;
+                background:var(--dark-gray-color-10);
                 cursor: pointer;
                 font-weight: bold;
             }
@@ -544,11 +544,11 @@ form.default .mvv-inst-chooser select {
 
 .mvv-orig-lang {
     display: none;
-    border: 1px solid $light-gray-color-40;
+    border: 1px solid var(--light-gray-color-40);
     margin: 3px;
     padding: 3px;
     font-size: 0.9em;
-    background-color: $white;
+    background-color: var(--white);
     max-height: 10em;
     overflow: auto;
 }
@@ -561,11 +561,11 @@ form.default .mvv-inst-chooser select {
     }
 
     &.odd {
-        background-color: $dark-gray-color-5;
+        background-color: var(--dark-gray-color-5);
     }
 
     &.even {
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
     }
 }
 
@@ -631,7 +631,7 @@ form.default .mvv-inst-chooser select {
 .mvv-content-overlay {
     width: 1100px;
     position: absolute;
-    background-color: $white;
+    background-color: var(--white);
     height: 80%;
 }
 
@@ -653,7 +653,7 @@ form.default .mvv-inst-chooser select {
 }
 
 .difflog {
-    color: $brown;
+    color: var(--brown);
     font-size: smaller;
     vertical-align: text-top;
     text-decoration: none;
diff --git a/resources/assets/stylesheets/scss/my_courses.scss b/resources/assets/stylesheets/scss/my_courses.scss
index 89125b243c42a922e0301c1fb911406d0b029657..b82ec2bc3ef305843e35a6dfc8a03bbe08ad5b07 100644
--- a/resources/assets/stylesheets/scss/my_courses.scss
+++ b/resources/assets/stylesheets/scss/my_courses.scss
@@ -2,11 +2,11 @@
     .content {
         font-weight: bold;
     }
-    border: 2px solid $red;
+    border: 2px solid var(--red);
     display: inline-block;
     padding: 5px;
     margin: 5px 0;
-    background: $white;
+    background: var(--white);
 }
 
 .mycourses-group-selector {
diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
index 85621e301cec0bdc89da5d9fbe5d22e4eb595417..2a4b6b3c6f9126db7f8534ebe7a9744ac14e9770 100644
--- a/resources/assets/stylesheets/scss/navigation-hoverborder.scss
+++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
@@ -1,5 +1,3 @@
-$transition-duration: 300ms;
-
 @mixin border-beneath($color, $margin: 2px, $height: 3px) {
     border-bottom: 0;
     padding-bottom: 0;
@@ -32,10 +30,10 @@ $transition-duration: 300ms;
 
 body:not(.fixed) #navigation-level-1-items {
     > li.active {
-        @include border-beneath($dark-gray-color-80);
+        @include border-beneath(var(--dark-gray-color-80));
     }
     > li:not(.active) {
-        @include border-beneath($dark-gray-color-40);
+        @include border-beneath(var(--dark-gray-color-40));
         &:not(:hover)::after {
             @include border-shrink();
         }
@@ -50,7 +48,7 @@ body:not(.fixed) #navigation-level-1-items {
     }
 
     .overflow li:hover {
-        @include border-beneath($dark-gray-color-40, 2px, 3px);
+        @include border-beneath(var(--dark-gray-color-40), 2px, 3px);
         &::after {
             transform: translate(0, -4px);
         }
@@ -63,10 +61,10 @@ body:not(.fixed) #navigation-level-1-items {
             line-height: 25px;
         }
         &.current {
-            @include border-beneath($dark-gray-color-80, -2px, 3px);
+            @include border-beneath(var(--dark-gray-color-80), -2px, 3px);
         }
         &:not(.current) {
-            @include border-beneath($dark-gray-color-40, -2px, 3px);
+            @include border-beneath(var(--dark-gray-color-40), -2px, 3px);
             &:not(:hover)::after {
                 @include border-shrink();
             }
diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss
index 5d0c83d4b312060a34db72955de373bccb3770b9..4e5a46f0990db3fa0651893734e6f846869e9f09 100644
--- a/resources/assets/stylesheets/scss/navigation.scss
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -16,7 +16,7 @@ body:not(.fixed) #navigation-level-1-items {
         font-size: $font-size-base;
     }
     a {
-        color: $base-color;
+        color: var(--base-color);
         display: block;
         padding: 0 0;
         text-align: center;
@@ -50,10 +50,10 @@ body:not(.fixed) #navigation-level-1-items {
                 @include square(16px);
 
                 background-clip: content-box;
-                background-color: $red;
-                border: 3px solid $dark-gray-color-5;
+                background-color: var(--red);
+                border: 3px solid var(--dark-gray-color-5);
                 border-radius: 50%;
-                color: $white;
+                color: var(--white);
                 content: attr(data-badge);
                 display: inline-block;
                 font-size: 10px;
@@ -169,8 +169,8 @@ body:not(.fixed) #navigation-level-1-items {
             margin: 5px 0 0;
             padding: 4px 4px;
 
-            background-color: $dark-gray-color-5;
-            border: 1px solid $dark-gray-color-40;
+            background-color: var(--dark-gray-color-5);
+            border: 1px solid var(--dark-gray-color-40);
             border-top: 0;
 
             min-width: 150px;
@@ -221,7 +221,7 @@ body.fixed {
     }
 
     #navigation-level-1-items {
-        background-color: $base-color;
+        background-color: var(--base-color);
 
         list-style: none;
         margin: 0 0 0px -15px;
@@ -248,11 +248,11 @@ body.fixed {
                 flex-wrap: nowrap;
                 align-items: center;
 
-                color: $white;
+                color: var(--white);
             }
 
             &:hover {
-                background-color: $base-color-80;
+                background-color: var(--base-color-80);
             }
 
             &.overflow {
diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss
index f91ed7d70fcb9f1c93085791074baebb901cb52c..27919f414d20ab6cc5805188ef5426a832a24057 100644
--- a/resources/assets/stylesheets/scss/oer.scss
+++ b/resources/assets/stylesheets/scss/oer.scss
@@ -17,7 +17,7 @@
     padding-right: 5px;
     li {
         padding: 5px;
-        border-top: thin solid $table-header-color;
+        border-top: thin solid var(--table-header-color);
         padding-right: 0px;
     }
     li.folder {
@@ -29,7 +29,7 @@
         list-style-type: none;
     }
     > li:last-child {
-        border-bottom: thin solid $table-header-color;
+        border-bottom: thin solid var(--table-header-color);
     }
 }
 
@@ -54,7 +54,7 @@
     .author_host {
         font-size: 0.8em;
         display: inline;
-        color: $dark-gray-color-80;
+        color: var(--dark-gray-color-80);
     }
     .description {
         margin-top: 5px;
@@ -67,7 +67,7 @@ ul.reviews, ol.reviews {
     margin: 0px;
     > li.review {
         margin-bottom: 10px;
-        border: thin solid $base-color-60;
+        border: thin solid var(--base-color-60);
         padding: 10px;
         display: flex;
         > .avatar {
@@ -82,12 +82,12 @@ ul.reviews, ol.reviews {
                 margin-bottom: 5px;
             }
             .origin {
-                color: $dark-gray-color-80;
+                color: var(--dark-gray-color-80);
                 font-size: 0.8em;
             }
             .timestamp {
                 float: right;
-                color: $dark-gray-color-80;
+                color: var(--dark-gray-color-80);
                 font-size: 0.8em;
             }
         }
@@ -101,7 +101,7 @@ ul.reviews, ol.reviews {
 }
 
 .maininfo {
-    border: thin solid $brand-color-light;
+    border: thin solid var(--brand-color-light);
     padding: 10px;
 }
 
@@ -112,7 +112,7 @@ ul.reviews, ol.reviews {
     width: 100%;
     height: calc((100vw - 270px) * 2 / 3);
     max-height: 666px;
-    border: 1px solid $content-color-40;
+    border: 1px solid var(--content-color-40);
     background: black;
     &.image {
         background-repeat: no-repeat;
@@ -168,7 +168,7 @@ ul.reviews, ol.reviews {
         display: flex;
         justify-content: space-between;
         font-size: 0.8em;
-        color: $black;
+        color: var(--black);
         margin-top: 20px;
     }
 
@@ -177,15 +177,12 @@ ul.reviews, ol.reviews {
 .oercampus_editmaterial, .oer_material_overview {
     article.contentbox {
         display: inline-block;
-        margin-right: 15px;
-        margin-bottom: 15px;
-        margin-top: 0px;
-        margin-left: 0px;
+        margin: 0 15px 15px 0;
 
         width: 270px;
         max-width: 270px;
         box-sizing: border-box;
-        border: solid 1px $base-color-60;
+        border: solid 1px var(--base-color-60);
         transition: all 300ms ease 0s;
         position: relative;
 
@@ -195,8 +192,8 @@ ul.reviews, ol.reviews {
             padding-left: 5px;
 
             width: 100%;
-            background-color: $content-color-20;
-            color: $brand-color-dark;
+            background-color: var(--content-color-20);
+            color: var(--brand-color-dark);
             font-size: 12pt;
             font-weight: bold;
             text-align: left;
@@ -209,7 +206,7 @@ ul.reviews, ol.reviews {
         h1 {
             padding: 5px;
             margin: 0px;
-            color: $base-color;
+            color: var(--base-color);
             border-bottom: medium none;
             font-size: medium;
             display: flex;
@@ -230,7 +227,7 @@ ul.reviews, ol.reviews {
 
         .image {
             display: block;
-            margin: 0px;
+            margin: 0;
             height: 180px;
             background-position: center center;
             background-size: cover;
@@ -254,7 +251,7 @@ ul.reviews, ol.reviews {
         display: flex;
 
         .frame {
-            border: thin solid $content-color-40;
+            border: thin solid var(--content-color-40);
             display: flex;
             justify-content: space-between;
             align-items: stretch;
@@ -266,7 +263,7 @@ ul.reviews, ol.reviews {
                 align-items: center;
                 justify-content: space-between;
                 border: solid thin black;
-                background-color: $content-color-20;
+                background-color: var(--content-color-20);
                 margin: 3px;
                 padding: 5px;
             }
@@ -284,7 +281,7 @@ ul.reviews, ol.reviews {
                 border-top: none;
                 height: 35px;
                 &.active {
-                    background-color: $base-color;
+                    background-color: var(--base-color);
                 }
                 &.erase {
                     background-color: white;
@@ -300,8 +297,8 @@ ul.reviews, ol.reviews {
         }
 
         button {
-            border: thin solid $content-color-40;
-            background-color: $content-color-20;
+            border: thin solid var(--content-color-40);
+            background-color: var(--content-color-20);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -321,9 +318,8 @@ ul.reviews, ol.reviews {
         width: 819px;
         max-width: calc(100% - 50px);
         animation: oer-filter-panel-appears 200ms ease-out;
-        border: thin solid $content-color-40;
-        margin: 0px;
-        margin-top: 46px;
+        border: thin solid var(--content-color-40);
+        margin: 46px 0 0;
         height: 183px;
         display: flex;
         justify-content: space-around;
@@ -350,7 +346,7 @@ ul.reviews, ol.reviews {
                 display: flex;
                 justify-content: space-between;
                 font-size: 0.8em;
-                color: $black;
+                color: var(--black);
                 margin-top: 20px;
             }
             .level_numbers {
@@ -368,14 +364,12 @@ ul.reviews, ol.reviews {
     .filterpanel_shadow {
         position: absolute;
         z-index: 0;
-        background-color: $dark-gray-color-45;
+        background-color: var(--dark-gray-color-45);
         padding: 10px;
         width: 819px;
         max-width: calc(100% - 50px);
         animation: oer-filter-panel-appears 200ms ease-out;
-        margin: 0px;
-        margin-top: 49px;
-        margin-left: 3px;
+        margin: 49px 0 0 3px;
         height: 183px;
     }
 
@@ -388,7 +382,7 @@ ul.reviews, ol.reviews {
     .browser {
         margin-top: 15px;
         padding: 10px;
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
         width: 840px;
         max-width: 100%;
         box-sizing: border-box;
@@ -455,15 +449,15 @@ ul.reviews, ol.reviews {
         display: flex;
         justify-content: space-between;
         font-size: 0.8em;
-        color: $black;
+        color: var(--black);
         margin-top: 20px;
     }
 }
 
 @keyframes oer-filter-panel-appears {
     from {
-        max-height: 0px;
-        border-bottom-width: 0px;
+        max-height: 0;
+        border-bottom-width: 0;
         overflow: hidden;
     }
     99% {
diff --git a/resources/assets/stylesheets/scss/opengraph.scss b/resources/assets/stylesheets/scss/opengraph.scss
index 62494966b97810900015ad0c4f024029a27a71a8..fbd3e31246fafc106186235175c0a26e1bfb93eb 100644
--- a/resources/assets/stylesheets/scss/opengraph.scss
+++ b/resources/assets/stylesheets/scss/opengraph.scss
@@ -7,15 +7,15 @@
         text-align: right;
 
         li {
-            border-top: thin solid $dark-gray-color-20;
+            border-top: thin solid var(--dark-gray-color-20);
             display: inline-block;
             padding: 5px;
 
             &:first-child {
-                border-left: thin solid $dark-gray-color-20;
+                border-left: thin solid var(--dark-gray-color-20);
             }
             &:last-child {
-                border-right: thin solid $dark-gray-color-20;
+                border-right: thin solid var(--dark-gray-color-20);
             }
         }
         .switch-left, .switch-right {
@@ -58,7 +58,7 @@
     @include clearfix();
 
     font-size: 0.8em;
-    border: 1px solid $dark-gray-color-20;
+    border: 1px solid var(--dark-gray-color-20);
     padding: $padding;
     min-height: $height;
 
@@ -87,11 +87,11 @@
 
     a.info {
         box-sizing: border-box;
-        color: $black;
+        color: var(--black);
         display: block;
         word-break: normal !important;
         &:hover {
-            color: $black;
+            color: var(--black);
         }
     }
     .image {
diff --git a/resources/assets/stylesheets/scss/overlapping.scss b/resources/assets/stylesheets/scss/overlapping.scss
index 05520b84f586129420ae8ec49ad60d60c9d947b7..d8f6d528bda57497d3f0ef045413ac1a12eff418 100644
--- a/resources/assets/stylesheets/scss/overlapping.scss
+++ b/resources/assets/stylesheets/scss/overlapping.scss
@@ -7,10 +7,10 @@
     width: 100%;
     height: 30px;
     margin-bottom: 5px;
-    color: $dark-gray-color;
+    color: var(--dark-gray-color);
     font-weight: 700;
     font-size: 16px;
-    border-bottom: 1px solid $light-gray-color-40;
+    border-bottom: 1px solid var(--light-gray-color-40);
 
     h2 {
         position: absolute;
@@ -41,13 +41,13 @@ ul.mvv-ovl-conflict {
             top: 0;
             right: 0;
             text-align: right;
-            border-bottom: solid 1px $light-gray-color-40;
+            border-bottom: solid 1px var(--light-gray-color-40);
 
             &:first-of-type {
                 left: 30px;
                 width: auto;
                 text-align: left;
-                border-bottom: solid 1px $light-gray-color-40;
+                border-bottom: solid 1px var(--light-gray-color-40);
             }
 
             & > div {
@@ -66,7 +66,7 @@ ul.mvv-ovl-conflict {
 .mvv-ovl-base-course {
     position: absolute;
     width: 5px;
-    color: $red;
+    color: var(--red);
     left: 10px;
 
     ~ label {
diff --git a/resources/assets/stylesheets/scss/pagination.scss b/resources/assets/stylesheets/scss/pagination.scss
index c03c410dfdc83c759e868c9627bac44c44f88c8e..7a921e05c7bcceea59dcc342dde084380e6a2ba2 100644
--- a/resources/assets/stylesheets/scss/pagination.scss
+++ b/resources/assets/stylesheets/scss/pagination.scss
@@ -30,14 +30,14 @@
     .pagination--link {
         background-color: transparent;
         border: 0;
-        color: $base-color;
+        color: var(--base-color);
         cursor: pointer;
         padding: 0;
     }
 
     .current .pagination--link {
         font-weight: bold;
-        color: $black;
+        color: var(--black);
     }
 
     .prev,
@@ -68,4 +68,3 @@
         margin-left: auto;
     }
 }
-
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index 74e60848690a37780d9170b273a64f4fd606bc18..a832f46aed808baa4ec770319ab047a5a6ca49b2 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -6,15 +6,15 @@
     width: 100%;
     height: 100%;
     font-size: 0.8em;
-    color: $base-color;
+    color: var(--base-color);
     text-align: center;
     line-height: 24px;
-    background-color: $dark-gray-color-10;
-    border: 1px solid $dark-gray-color-40;
+    background-color: var(--dark-gray-color-10);
+    border: 1px solid var(--dark-gray-color-40);
 
     &.alert {
-        background-color: $red;
-        color: $white;
+        background-color: var(--red);
+        color: var(--white);
     }
 }
 
@@ -25,10 +25,9 @@
 
     width: 49px;
     height: 30px;
-    /*border: thin solid $dark-gray-color-20;*/
-    color: $base-color;
+    color: var(--base-color);
     vertical-align: text-bottom;
-    background-color: $base-color;
+    background-color: var(--base-color);
     position: relative;
 
     // Insert invisible padding on top of the arrow in order to try to
@@ -90,17 +89,17 @@
         // Creates an arrow pointing from the list to the triggering element
         @include arrow-top-border(10px, $white, 1px, $light-gray-color-80);
 
-        background-color: $white;
-        border-left: thin solid $light-gray-color-60;
-        border-top: thin solid $light-gray-color-60;
+        background-color: var(--white);
+        border-left: thin solid var(--light-gray-color-60);
+        border-top: thin solid var(--light-gray-color-60);
         border-collapse: collapse;
-        color: $black;
+        color: var(--black);
         display: none;
         font-size: 1em;
         position: absolute;
         width: $list-width;
         max-width: $list-width;
-        box-shadow: 1px 1px 1px $light-gray-color-80;
+        box-shadow: 1px 1px 1px var(--light-gray-color-80);
 
         // Without this, buttons or message boxes would appear on top of the list
         z-index: 2;
@@ -128,14 +127,14 @@
         // List item
         .item {
             $padding: 5px;
-            border-top: thin solid $light-gray-color-60;
+            border-top: thin solid var(--light-gray-color-60);
             line-height: 20px;
             height: auto;
             padding: $padding;
             white-space: normal;
 
             &:hover {
-                background-color: $light-gray-color-20
+                background-color: var(--light-gray-color-20)
             }
 
             &:only-child:hover {
@@ -178,10 +177,10 @@
         }
 
         a:not(.mark-all-as-read) {
-            color: $brand-color-dark;
+            color: var(--brand-color-dark);
             display: block;
             padding: 0;
-            &:hover { color: $active-color; }
+            &:hover { color: var(--active-color); }
         }
 
         .options {
@@ -201,8 +200,8 @@
 
     a.mark-all-as-read:not(.invisible),
     a.enable-desktop-notifications {
-        background-color: $dark-gray-color-15;
-        border-bottom: thin solid $dark-gray-color-45;
+        background-color: var(--dark-gray-color-15);
+        border-bottom: thin solid var(--dark-gray-color-45);
         display: block;
         max-height: 31px;
         padding: 5px 5px 5px 14px;
diff --git a/resources/assets/stylesheets/scss/plugins.scss b/resources/assets/stylesheets/scss/plugins.scss
index 2bcc6fa4b1d94b27b561744c394f3d0e34ffe94b..1673ad7c05773a8a27ddb0cb28c51f94ccb49ec1 100644
--- a/resources/assets/stylesheets/scss/plugins.scss
+++ b/resources/assets/stylesheets/scss/plugins.scss
@@ -31,7 +31,7 @@
             width: 100%;
             height: 4em;
             margin: 0;
-            background-image: linear-gradient(to bottom, rgba(255,0,0,0), $white)
+            background-image: linear-gradient(to bottom, rgba(255,0,0,0), var(--white))
         }
     }
 
diff --git a/resources/assets/stylesheets/scss/profile.scss b/resources/assets/stylesheets/scss/profile.scss
index d6c621f0a78d12247abd2ae4b98d709a71f60b40..ef7e75adbf4dd488faf84ad0ddc4170cfdb7d3b5 100644
--- a/resources/assets/stylesheets/scss/profile.scss
+++ b/resources/assets/stylesheets/scss/profile.scss
@@ -77,7 +77,7 @@
 }
 
 #select_fach_abschluss > tbody > tr:last-child > td {
-    border-bottom: 1px solid $table-header-color;
+    border-bottom: 1px solid var(--table-header-color);
 }
 
 @include media-breakpoint-small-up(){
diff --git a/resources/assets/stylesheets/scss/progress_indicator.scss b/resources/assets/stylesheets/scss/progress_indicator.scss
index 3346d661aaf138ff809236eb502c4f5f2bddbc67..55358f4c2028ebc1f0a770f8fa782361bc26a16c 100644
--- a/resources/assets/stylesheets/scss/progress_indicator.scss
+++ b/resources/assets/stylesheets/scss/progress_indicator.scss
@@ -11,7 +11,7 @@
     }
     .progress-indicator-description,
     .progress-indicator-description-default {
-        color: $dark-gray-color-45;
+        color: var(--dark-gray-color-45);
         text-align: center;
         margin-top: 10px;
     }
diff --git a/resources/assets/stylesheets/scss/questionnaire.scss b/resources/assets/stylesheets/scss/questionnaire.scss
index 15aa062c263c31ef9545de61e9e15f2daf9f321d..9da55b79fb3e7691a19891c3bbb81115ac999f5f 100644
--- a/resources/assets/stylesheets/scss/questionnaire.scss
+++ b/resources/assets/stylesheets/scss/questionnaire.scss
@@ -9,8 +9,8 @@ $width: 270px;
         align-items: stretch;
         width: 100%;
         aside {
-            background: $white;
-            border: 1px solid $content-color-40;
+            background: var(--white);
+            border: 1px solid var(--content-color-40);
             min-width: $width;
             width: $width;
             .questions_container {
@@ -24,7 +24,7 @@ $width: 270px;
             > .admin, > .add_question, .questions > * {
                 width: calc(100% - 8px);
                 padding: 4px;
-                border-bottom: 1px solid $content-color-40;
+                border-bottom: 1px solid var(--content-color-40);
                 min-height: 40px;
                 display: flex;
                 justify-content: start;
@@ -37,7 +37,7 @@ $width: 270px;
                     margin-left: 15px;
                 }
                 &.active {
-                    background-color: $yellow-40;
+                    background-color: var(--yellow-40);
 
                     &::before {
                         content: '';
@@ -46,7 +46,7 @@ $width: 270px;
                         width: 0px;
                         border-top: 25px transparent solid;
                         border-bottom: 25px transparent solid;
-                        border-left: 7px $content-color-40 solid;
+                        border-left: 7px var(--content-color-40) solid;
                         right: -8px;
                     }
                     &::after {
@@ -56,7 +56,7 @@ $width: 270px;
                         width: 0px;
                         border-top: 25px transparent solid;
                         border-bottom: 25px transparent solid;
-                        border-left: 7px $yellow-40 solid;
+                        border-left: 7px var(--yellow-40) solid;
                         right: -7px;
                     }
                 }
@@ -90,7 +90,7 @@ $width: 270px;
 
         }
         .rightside {
-            border: 1px solid $content-color-40;
+            border: 1px solid var(--content-color-40);
             border-left: none;
             width: 100%;
             padding: 10px;
@@ -134,10 +134,10 @@ $width: 270px;
             align-items: center;
             input {
                 width: calc(100% - 74px);
-                border: 1px solid $light-gray-color-40;
+                border: 1px solid var(--light-gray-color-40);
             }
             button {
-                border: 1px solid $light-gray-color-40;
+                border: 1px solid var(--light-gray-color-40);
                 width: 32px;
                 height: 32px;
                 padding: 6px;
@@ -158,7 +158,7 @@ $width: 270px;
     /* ab hier der alte kram */
 
     section {
-        border: thin solid $black;
+        border: thin solid var(--black);
         margin: 3px;
     }
 
@@ -227,12 +227,12 @@ $width: 270px;
         flex-wrap: wrap;
         justify-content: center;
         align-items: stretch;
-        border: thin dashed $content-color-40;
+        border: thin dashed var(--content-color-40);
 
         > a {
             background-color: transparent;
             margin: 10px;
-            border: thin solid $content-color-20;
+            border: thin solid var(--content-color-20);
             padding: 5px;
             width: 100px;
             min-width: 100px;
@@ -270,35 +270,35 @@ $width: 270px;
 
     .ct-label {
         color: rgba(0, 0, 0, 0.8);
-        text-shadow: -1px 0px $white, 0px 1px $white, 1px 0px $white, 0px -1px $white;
+        text-shadow: -1px 0px var(--white), 0px 1px var(--white), 1px 0px var(--white), 0px -1px var(--white);
         font-size: x-small;
-        fill: $black;
+        fill: var(--black);
     }
 
     .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
         //Balkenfarbe
-        stroke: $red;
+        stroke: var(--red);
     }
 
     //Tortenstücke:
     .ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
-        fill: $red;
+        fill: var(--red);
     }
 
     .ct-series-b .ct-area, .ct-series-b .ct-slice-pie {
-        fill: $brand-color-dark;
+        fill: var(--brand-color-dark);
     }
 
     .ct-series-c .ct-area, .ct-series-c .ct-slice-pie {
-        fill: $activity-color;
+        fill: var(--activity-color);
     }
 
     .ct-series-d .ct-area, .ct-series-d .ct-slice-pie {
-        fill: $content-color;
+        fill: var(--content-color);
     }
 
     .ct-series-e .ct-area, .ct-series-e .ct-slice-pie {
-        fill: $orange;
+        fill: var(--orange);
     }
 
     table tbody tr:last-child td {
@@ -338,7 +338,7 @@ $width: 270px;
         }
 
         .invalidation_notice {
-            color: $red;
+            color: var(--red);
         }
     }
 }
@@ -357,20 +357,20 @@ $width: 270px;
 
 .questionnaire .terms, .questionnaire_results .terms {
     text-align: center;
-    border-top: thin solid $content-color-40;
-    color: $light-gray-color;
+    border-top: thin solid var(--content-color-40);
+    color: var(--light-gray-color);
     margin: 0 -10px;
 }
 
 #qr_code {
     display: none;
-    background-color: $white;
+    background-color: var(--white);
     width: 100%;
     height: 100%;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    color: $dark-gray-color;
+    color: var(--dark-gray-color);
 
     .code > div {
         margin-left: auto;
diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss
index b82690e34bb9765029a5e81ced09b8442d26cf2e..ef6c37279f92c93b81bb8e6e10b9c3883ace8782 100644
--- a/resources/assets/stylesheets/scss/quicksearch.scss
+++ b/resources/assets/stylesheets/scss/quicksearch.scss
@@ -5,9 +5,9 @@ form#search_sem_quick_search_frame {
 }
 
 input.quicksearchbox {
-    background-color: $dark-gray-color-10;
-    border: 1px solid $dark-gray-color-40;
-    color: $base-color;
+    background-color: var(--dark-gray-color-10);
+    border: 1px solid var(--dark-gray-color-40);
+    color: var(--base-color);
     font-size: 14px;
     width: 250px;
     height: 19px;
@@ -21,7 +21,7 @@ div.quicksearch_frame {
         box-sizing: border-box;
         border-width: 1px 30px 1px 1px;
         border-style: solid;
-        border-color: $base-color-60;
+        border-color: var(--base-color-60);
         border-image: none;
         display: inline-block !important;
     }
@@ -85,7 +85,7 @@ div.quicksearch_frame {
         float: none;
         margin-left: 0;
         height: 30px;
-        background-color: $base-color-60;
+        background-color: var(--base-color-60);
         background-position: center center;
     }
 }
@@ -106,8 +106,8 @@ div.quicksearch_frame {
         .autocomplete__results {
             list-style-type: none;
             padding: 1px;
-            border: 1px solid $light-gray-color-40;
-            background-color: $white;
+            border: 1px solid var(--light-gray-color-40);
+            background-color: var(--white);
             max-height: 275px;
             width: 600px;
             overflow-x: auto;
@@ -120,8 +120,8 @@ div.quicksearch_frame {
                 align-items: flex-start;
 
                 &:hover, &.autocomplete__result--selected {
-                    background-color: $base-color;
-                    color: $white;
+                    background-color: var(--base-color);
+                    color: var(--white);
                 }
 
                 img {
diff --git a/resources/assets/stylesheets/scss/raumzeit.scss b/resources/assets/stylesheets/scss/raumzeit.scss
index f5e904e4e43f82f2242e5ebf31666adf16ff3bf3..8db05f06972317c72444187f88f98607b9b9af96 100644
--- a/resources/assets/stylesheets/scss/raumzeit.scss
+++ b/resources/assets/stylesheets/scss/raumzeit.scss
@@ -15,14 +15,14 @@ div.at_least_one_teacher {
 }
 
 .is_ex_termin {
-    color: $dark-gray-color-80;
+    color: var(--dark-gray-color-80);
     text-decoration: line-through;
 }
 
 .contentbox.timesrooms {
     > form {
         article {
-            border-color: $content-color-40;
+            border-color: var(--content-color-40);
             border-style: solid;
             border-width: 1px;
             margin: 10px;
@@ -76,13 +76,13 @@ div.at_least_one_teacher {
     }
     article header {
         &.red {
-            border-left: 3px solid $red;
+            border-left: 3px solid var(--red);
         }
         &.yellow {
-            border-left: 3px solid $activity-color;
+            border-left: 3px solid var(--activity-color);
         }
         &.green {
-            border-left: 3px solid $green;
+            border-left: 3px solid var(--green);
         }
         &.red .tooltip-icon {
             @include icon(before, radiobutton-checked, status-red);
diff --git a/resources/assets/stylesheets/scss/report.scss b/resources/assets/stylesheets/scss/report.scss
index d221b71011074f667f594c3043330bd43ed91891..3e89af696fcb7b769addf6ce0e2695f1415239e9 100644
--- a/resources/assets/stylesheets/scss/report.scss
+++ b/resources/assets/stylesheets/scss/report.scss
@@ -34,8 +34,8 @@
 
     &-info {
         .ui-dialog-titlebar {
-            background-color: $base-color;
-            color: white;
+            background-color: var(--base-color);
+            color: var(--white);
         }
         .ui-dialog-content {
             background-image: url("#{$image-path}/messagebox/info.png");
@@ -44,8 +44,8 @@
 
     &-success {
         .ui-dialog-titlebar {
-            background-color: $dark-green;
-            color: white;
+            background-color: var(--dark-green);
+            color: var(--white);
         }
 
         .ui-dialog-content {
@@ -55,7 +55,7 @@
 
     &-warning {
         .ui-dialog-titlebar {
-            background-color: $yellow;
+            background-color: var(--yellow);
             color: black;
         }
 
@@ -84,8 +84,8 @@
 
     &-error {
         .ui-dialog-titlebar {
-            background-color: $red;
-            color: white;
+            background-color: var(--red);
+            color: var(--white);
         }
         .ui-dialog-content {
             background-image: url("#{$image-path}/messagebox/error.png");
diff --git a/resources/assets/stylesheets/scss/resources.scss b/resources/assets/stylesheets/scss/resources.scss
index 95d7217655cc843a66f3aa7b053fc6a526efc55a..1d792a37988869c786404697da2bcbdbadbfb257 100644
--- a/resources/assets/stylesheets/scss/resources.scss
+++ b/resources/assets/stylesheets/scss/resources.scss
@@ -30,7 +30,7 @@
 
 tr.resource-planning-selected-request {
     td {
-        background: $yellow-40;
+        background: var(--yellow-40);
     }
 }
 
@@ -66,8 +66,8 @@ ul.resource-tree {
 
 .resource-tree {
     .selected-resource {
-        background-color: $origin-base-color;
-        color: $white;
+        background-color: var(--origin-base-color);
+        color: var(--white);
         padding: 2px;
         width: calc(100% - 21px);
     }
@@ -212,15 +212,15 @@ ul.resource-tree {
 
 .resource-request {
     .overlapping-requests {
-        color: $yellow-60;
+        color: var(--yellow-60);
     }
 
     .overlapping-bookings {
-        color: $red-60;
+        color: var(--red-60);
     }
 
     .resource-available {
-        color: $green-60;
+        color: var(--green-60);
     }
 }
 
@@ -262,7 +262,7 @@ ul.resource-tree {
         .booking-list-interval-date {
             &.not-taking-place {
                 text-decoration: line-through;
-                color: $light-gray-color;
+                color: var(--light-gray-color);
             }
 
             margin-right: 1.2em;
@@ -354,7 +354,7 @@ ul.resource-tree {
 }
 
 .fc-time, .fc-widget-header {
-    background-color: $content-color-20;
+    background-color: var(--content-color-20);
 }
 
 .request-list {
@@ -450,7 +450,7 @@ form#resolve-request, form#decline-request {
                                 > th {
                                     &:first-child {
                                         z-index: 2;
-                                        background-color: $content-color-20;
+                                        background-color: var(--content-color-20);
                                         min-width: 180px;
                                         left: 0;
                                     }
@@ -460,7 +460,7 @@ form#resolve-request, form#decline-request {
                                     z-index: 1;
                                     border-top: none;
                                     border-bottom: none !important;
-                                    box-shadow: inset 0 1px 0 $brand-color-darker;
+                                    box-shadow: inset 0 1px 0 var(--brand-color-darker);
                                 }
                             }
                         }
@@ -472,7 +472,7 @@ form#resolve-request, form#decline-request {
                                         position: sticky;
                                         left: 0;
                                         z-index: 1;
-                                        background: $white;
+                                        background: var(--white);
                                     }
                                 }
                             }
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 27e279e0c3e59aa9d1664be1b506bfbc77d6ca22..1c2d2f10d547a770bf95b4cf6b9d40b67d8f29ec 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -71,7 +71,7 @@ $sidebarOut: -330px;
 }
 
 #responsive-navigation-items {
-    background-color: $base-color;
+    background-color: var(--base-color);
     left: 0;
     max-height: calc(100vh - $header-bar-container-height - 5px);
     max-width: $responsive-menu-width;
@@ -132,7 +132,7 @@ $sidebarOut: -330px;
                     background-color: transparent;
 
                     &:hover {
-                        background-color: $base-color-80;
+                        background-color: var(--base-color-80);
                     }
                 }
             }
@@ -154,14 +154,14 @@ $sidebarOut: -330px;
     }
 
     .navigation-item {
-        background-color: $base-color;
+        background-color: var(--base-color);
         display: flex;
         flex-wrap: wrap;
         list-style-type: none;
         margin: 0px;
 
         &:not(:last-child) {
-            border-bottom: 1px solid $white;
+            border-bottom: 1px solid var(--white);
         }
 
         &.navigation-up,
@@ -177,22 +177,22 @@ $sidebarOut: -330px;
             }
 
             &:hover {
-                background-color: $base-color-80;
+                background-color: var(--base-color-80);
             }
 
         }
 
         &.navigation-item-active {
-            background-color: $base-color-80;
+            background-color: var(--base-color-80);
         }
 
         a {
-            color: $white;
+            color: var(--white);
             cursor: pointer;
         }
 
         button {
-            color: $white;
+            color: var(--white);
             cursor: pointer;
             display: flex;
             flex: 0;
@@ -205,20 +205,20 @@ $sidebarOut: -330px;
             }
 
             &.navigation-in {
-                border-left: 1px solid $base-color-60;
+                border-left: 1px solid var(--base-color-60);
             }
         }
 
         &:not(.navigation-current):not(.navigation-up) {
             button:hover {
-                background-color: $base-color-80;
+                background-color: var(--base-color-80);
             }
         }
 
     }
 
     .navigation-title {
-        color: $white;
+        color: var(--white);
         flex: 1;
 
         > a {
@@ -255,7 +255,7 @@ $sidebarOut: -330px;
         flex: 0;
 
         &:hover {
-            background-color: $base-color-80;
+            background-color: var(--base-color-80);
         }
 
     }
@@ -318,7 +318,7 @@ $sidebarOut: -330px;
     }
 
     #sidebar {
-        background-color: $white;
+        background-color: var(--white);
         max-height: calc(100vh - 100px);
         left: 15px;
         position: absolute;
@@ -722,8 +722,8 @@ html:not(.responsive-display):not(.fullscreen-mode) {
                 flex-direction: row;
                 flex-wrap: nowrap;
 
-                background-color: $dark-gray-color-10;
-                border-bottom: 1px solid $dark-gray-color-40;
+                background-color: var(--dark-gray-color-10);
+                border-bottom: 1px solid var(--dark-gray-color-40);
 
                 .colorblock,
                 #context-title,
diff --git a/resources/assets/stylesheets/scss/scroll-to-top.scss b/resources/assets/stylesheets/scss/scroll-to-top.scss
index aad5cd2e137e29145de1e845be0efdad43141345..531c1ca207441ee4ecfbdc5d80e1c05eb7c5129e 100644
--- a/resources/assets/stylesheets/scss/scroll-to-top.scss
+++ b/resources/assets/stylesheets/scss/scroll-to-top.scss
@@ -8,7 +8,7 @@ body #scroll-to-top {
     margin-right: $scroll-to-top-margin;
     margin-bottom: $scroll-to-top-margin;
     padding: 10px;
-    background: $base-color;
+    background: var(--base-color);
     border: 1px solid transparent;
     background-clip: padding-box;
     cursor: pointer;
@@ -19,7 +19,7 @@ body #scroll-to-top {
     transition: all 250ms ease-in-out;
     z-index: 1;
     &:hover {
-        background: $brand-color-darker;
+        background: var(--brand-color-darker);
         border-radius: 2px;
     }
     &.hide {
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index 8ba202a08fe835eaaa4ca1f743334a6493002170..7cc147472da2ff4c8bcfe5de2f590b1a22b45acb 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -1,12 +1,12 @@
 $icon-size: 32px;
 label.inactive-settings-category {
-    color: $red;
+    color: var(--red);
 }
 
 #search {
     // "Searching..." info
     #searching-gif {
-        color: $dark-gray-color-45;
+        color: var(--dark-gray-color-45);
         display: none;
         text-align: center;
 
@@ -42,13 +42,13 @@ label.inactive-settings-category {
         }
 
         article {
-            border: 1px solid $content-color-40;
+            border: 1px solid var(--content-color-40);
             margin-bottom: 8px;
             margin-top: 8px;
 
             > header {
-                background-color: $content-color-20;
-                color: $base-color;
+                background-color: var(--content-color-20);
+                color: var(--base-color);
 
                 display: flex;
                 flex-direction: row;
@@ -85,11 +85,11 @@ label.inactive-settings-category {
                 }
 
                 &:not(:first-child) {
-                    border-top: 1px solid $content-color-40;
+                    border-top: 1px solid var(--content-color-40);
                 }
 
                 &:hover {
-                    background-color: $light-gray-color-20;
+                    background-color: var(--light-gray-color-20);
                 }
 
                 &.search-extended-result {
@@ -131,7 +131,7 @@ label.inactive-settings-category {
                     }
 
                     .search-result-details {
-                        color: $dark-gray-color-80;
+                        color: var(--dark-gray-color-80);
                         font-size: $font-size-small;
                     }
                 }
@@ -145,7 +145,7 @@ label.inactive-settings-category {
 
 
                     .search-result-time {
-                        color: $dark-gray-color-80;
+                        color: var(--dark-gray-color-80);
                         flex: 1;
                         font-size: $font-size-small;
                         text-align: right;
@@ -153,7 +153,7 @@ label.inactive-settings-category {
                     }
 
                     .search-result-additional {
-                        color: $dark-gray-color-80;
+                        color: var(--dark-gray-color-80);
                         font-size: $font-size-small;
                         text-align: right;
                     }
@@ -180,7 +180,7 @@ label.inactive-settings-category {
 }
 
 a.no-result {
-    color: $base-gray;
+    color: var(--base-gray);
     pointer-events: none;
     cursor: default;
 }
@@ -191,9 +191,9 @@ div#div-search-input {
 
     // visual adjustments for the reset button
     button#reset-search {
-        background-color: $white;
-        border-bottom: 1px solid $light-gray-color-40;
-        border-top: 1px solid $light-gray-color-40;
+        background-color: var(--white);
+        border-bottom: 1px solid var(--light-gray-color-40);
+        border-top: 1px solid var(--light-gray-color-40);
         margin-left: -1px;
         padding-left: 10px;
     }
@@ -212,8 +212,8 @@ div#div-search-input {
 
     .filter-items {
         .button {
-            background-color: $content-color-20;
-            color: $brand-color-dark;
+            background-color: var(--content-color-20);
+            color: var(--brand-color-dark);
             min-width: auto;
             border: 0;
             white-space: nowrap;
diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss
index ff30ef5973418ba19a83ce40468c1e2ad11b945a..f963fd020a48f3f3a2669a4dc5dfe3d17e586163 100644
--- a/resources/assets/stylesheets/scss/select.scss
+++ b/resources/assets/stylesheets/scss/select.scss
@@ -7,7 +7,7 @@
     }
 
     .vs__option-color {
-        border: solid thin $content-color-40;
+        border: solid thin var(--content-color-40);
         padding-left: 20px;
         height: 16px;
         margin-right: 4px;
@@ -27,13 +27,13 @@
     }
 
     &.studip-v-select-drop-up {
-        border-bottom: solid thin $content-color-40;
+        border-bottom: solid thin var(--content-color-40);
         border-top: none;
     }
 
     &.studip-v-select-ul-drop-up {
         border-bottom: none;
-        border-top: solid thin $content-color-40;
+        border-top: solid thin var(--content-color-40);
         box-shadow: 0px -3px 6px 0 rgba(0, 0, 0, 0.15);
     }
 
@@ -45,4 +45,4 @@
 form.default .studip-v-select .vs__selected {
     padding: 0;
     margin: 2px 2px 0;
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/scss/selects.scss b/resources/assets/stylesheets/scss/selects.scss
index 22e152a1e7edd85a7dc0873ebf7098d6e3ce2648..d5256540689ab0e29320f800fe78d213e4c3708b 100644
--- a/resources/assets/stylesheets/scss/selects.scss
+++ b/resources/assets/stylesheets/scss/selects.scss
@@ -1,5 +1,5 @@
-$select-border: 1px solid $light-gray-color-40;
-$select-border-focus: 1px solid $brand-color-dark;
+$select-border: 1px solid var(--light-gray-color-40);
+$select-border-focus: 1px solid var(--brand-color-dark);
 $select-border-radius: 0;
 $select-height-default: 30px;
 $select-arrow-size: 10;
@@ -8,7 +8,7 @@ select {
     // Reset appearance
     box-sizing: border-box;
     appearance: none;
-    background-color: $white;
+    background-color: var(--white);
     font-size: 1em;
     vertical-align: baseline;
     &::-ms-expand {
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index b67a49e744d02559c3a4acbe3737fb694e6819b6..9a556a474ec0b4613fdd2af350ce61369e17321e 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -1,5 +1,5 @@
 #sidebar {
-    background: $white;
+    background: var(--white);
     border-left: 0;
     display: inline-block;
     height: max-content;
@@ -33,7 +33,7 @@
         flex: 0;
 
         background-color: rgba(255, 255, 255, 1);
-        border: 0px solid $base-color-20;
+        border: 0px solid var(--base-color-20);
         padding: 0px;
         max-height: 60px;
     }
@@ -46,7 +46,7 @@
         padding: 12px 15px 0;
         border-bottom: 12px solid transparent;
 
-        color: $white;
+        color: var(--white);
         font-size: 1.2em;
         overflow: hidden;
         word-break: break-word;
@@ -85,15 +85,15 @@
     }
     .sidebar-widget,
     .sidebar-widget-placeholder {
-        background: $white;
-        border: 1px solid $content-color-40;
+        background: var(--white);
+        border: 1px solid var(--content-color-40);
         margin: 15px 0 0;
         width: $sidebar-width - 5px;
     }
     .sidebar-widget-header,
     .sidebar-widget-extra {
-        background: $content-color-20;
-        color: $base-color;
+        background: var(--content-color-20);
+        color: var(--base-color);
         font-weight: bold;
         padding: 4px;
     }
@@ -152,27 +152,27 @@ div#sidebar-navigation {
     }
     span[disabled],
     a[disabled] {
-        color: $dark-gray-color-80;
+        color: var(--dark-gray-color-80);
         cursor: not-allowed;
         font-weight: lighter;
     }
     &.sidebar-navigation > li.active {
-        background-color: $base-color;
+        background-color: var(--base-color);
         margin-left: -4px;
         //#arrow > .right-border(14px, $content-color-20, 1px, $content-color-40, -5px);
         @include arrow-right-border(14px, $base-color, 1px, $base-color, -5px);
         a {
-            color: $white;
+            color: var(--white);
             padding-left: 4px;
         }
     }
     &.sidebar-views > li.active {
-        background: $activity-color-40;
+        background: var(--activity-color-40);
         margin-left: -5px;
-        box-shadow: inset 0 0 0 1px $activity-color;
+        box-shadow: inset 0 0 0 1px var(--activity-color);
         @include arrow-right-border(14px, $activity-color-40, 1px, $activity-color, -5px);
         a, button {
-            color: $base-color;
+            color: var(--base-color);
             padding-left: 5px;
         }
     }
@@ -218,7 +218,7 @@ div#sidebar-navigation {
 }
 
 .sidebar-widget {
-    background: $white;
+    background: var(--white);
 
     .widget-options {
         list-style: none;
@@ -261,7 +261,7 @@ div#sidebar-navigation {
     }
 }
 .sidebar-widget-content {
-    border-top: 1px solid $content-color-40;
+    border-top: 1px solid var(--content-color-40);
     overflow-wrap: break-word;
     padding: 4px;
     transition: all 0.5s;
@@ -301,7 +301,7 @@ select.sidebar-selectlist {
 
                 input[type=text] {
                     box-sizing: border-box;
-                    border: 1px solid $dark-gray-color-30;
+                    border: 1px solid var(--dark-gray-color-30);
                     border-right: none;
                     flex: 1;
                     padding: .25em .5em;
@@ -309,9 +309,9 @@ select.sidebar-selectlist {
                 }
 
                 .submit-search {
-                    background-color: $content-color-20;
-                    border: 1px solid $dark-gray-color-30;
-                    border-left-color: $light-gray-color-40;
+                    background-color: var(--content-color-20);
+                    border: 1px solid var(--dark-gray-color-30);
+                    border-left-color: var(--light-gray-color-40);
                     border-radius: 0;
                     color: transparent;
                     cursor: pointer;
diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss
index 3d4922212cc2e704fb52ca794c3b6ff138829c99..40c5126f07cf069e94889413e70909f86ea47fbe 100644
--- a/resources/assets/stylesheets/scss/skiplinks.scss
+++ b/resources/assets/stylesheets/scss/skiplinks.scss
@@ -1,7 +1,7 @@
 /* skiplink-area highlighting -------------------------------------------- */
 #skip_link_navigation {
-    background-color: $white;
-    border: 2px solid $orange;
+    background-color: var(--white);
+    border: 2px solid var(--orange);
     left: 50vw;
     margin: 0;
     padding: 10px;
@@ -30,15 +30,15 @@
 
 button.skiplink {
     border: 0;
-    background-color: $white;
-    color: $base-color;
+    background-color: var(--white);
+    color: var(--base-color);
     cursor: pointer;
     line-height: 1em;
     margin-bottom: 0.1em;
 
     &:hover,
     &:active {
-        color: $active-color;
+        color: var(--active-color);
     }
 
     @media not prefers-reduced-motion {
diff --git a/resources/assets/stylesheets/scss/start.scss b/resources/assets/stylesheets/scss/start.scss
index d3539f5f2dce18cf2d4c517257138646eace67b4..43bde3a5523d2f91171ef27f3745a4f967f7357a 100644
--- a/resources/assets/stylesheets/scss/start.scss
+++ b/resources/assets/stylesheets/scss/start.scss
@@ -8,7 +8,7 @@
 
 #main, #choices {
     width: 99%;
-    border: 1px solid $dark-gray-color-60;
+    border: 1px solid var(--dark-gray-color-60);
 }
 
 .studip-widget-wrapper {
@@ -17,13 +17,13 @@
 }
 
 .studip-widget {
-    border: 1px solid $base-color-20;
+    border: 1px solid var(--base-color-20);
     transition: border-color 300ms ease-in-out;
 
     .widget-header {
         box-sizing: border-box;
-        background-color: $content-color-20;
-        color: $brand-color-dark;
+        background-color: var(--content-color-20);
+        color: var(--brand-color-dark);
         font-size: 1.1em;
         font-weight: bold;
         line-height: 2em;
@@ -54,12 +54,12 @@
 }
 
 .studip-widget:hover {
-    border: 1px solid $brand-color-darker;
+    border: 1px solid var(--brand-color-darker);
     transition: border-color 300ms ease-in-out;
 
 }
 #widget_choices{
-    border-right: 1px dashed $brand-color-darker;
+    border-right: 1px dashed var(--brand-color-darker);
     margin-right: 25px;
 }
 .start-widgetcontainer {
@@ -80,7 +80,7 @@
     width: 100%;
 }
 .ui-widgetContainer {
-    color: $white;
+    color: var(--white);
     background-image: none;
 }
 
@@ -92,9 +92,9 @@
     line-height: 30px;
 
     text-align: center;
-    color: $white;
+    color: var(--white);
     font-size: 1.3em;
-    background-color: $content-color;
+    background-color: var(--content-color);
 }
 
 .ui-widget_head:hover {
@@ -104,24 +104,24 @@
 .ui-widget_head h1 {
     line-height: 100px;
     text-align: center;
-    color: $black;
+    color: var(--black);
 }
 
 .addclip-widgets {
-    color: $black;
+    color: var(--black);
     list-style: none;
     margin: 0;
     padding: 0;
 
     a:link, a:visited {
-        color: $black;
+        color: var(--black);
     }
     a:hover, a:active {
-        color: $active-color;
+        color: var(--active-color);
     }
 
     li {
-        border-top: 1px solid $content-color;
+        border-top: 1px solid var(--content-color);
         padding: 4px 0;
 
         &:first-child {
@@ -163,7 +163,7 @@ div.start-widgetcontainer {
             display: none;
         }
         &.move {
-            border: $base-color-80 dashed 1px;
+            border: var(--base-color-80) dashed 1px;
         }
     }
 }
@@ -192,7 +192,7 @@ div.available-widgets {
         }
 
         &.move {
-            border: $base-color-80 dashed 1px;
+            border: var(--base-color-80) dashed 1px;
         }
     }
 
diff --git a/resources/assets/stylesheets/scss/statusgroups.scss b/resources/assets/stylesheets/scss/statusgroups.scss
index c49bea6a45cb5033c3f7b6264fb40d79efc2318f..f5bfaee6a3b7e6cea9303d04e7367c5b80ce893e 100644
--- a/resources/assets/stylesheets/scss/statusgroups.scss
+++ b/resources/assets/stylesheets/scss/statusgroups.scss
@@ -19,8 +19,8 @@ section.course-statusgroups {
         }
 
         section {
-            border-left: 1px solid $content-color-20;
-            border-right: 1px solid $content-color-20;
+            border-left: 1px solid var(--content-color-20);
+            border-right: 1px solid var(--content-color-20);
 
             table {
                 td.memberactions {
@@ -29,7 +29,7 @@ section.course-statusgroups {
 
                 thead {
                     tr th {
-                        background-color: $content-color-20;
+                        background-color: var(--content-color-20);
                     }
                 }
 
@@ -37,14 +37,14 @@ section.course-statusgroups {
                     tr td {
                         span.member-invisible {
                             font-style: italic;
-                            color: $light-gray-color;
+                            color: var(--light-gray-color);
                         }
                     }
                 }
 
                 tfoot {
                     tr td {
-                        background-color: $content-color-20;
+                        background-color: var(--content-color-20);
                         padding-left: 5px;
                         padding-right: 0;
                     }
@@ -58,17 +58,16 @@ section.course-statusgroups {
         }
 
         &.draggable.open {
-            background-color: $white;
+            background-color: var(--white);
         }
 
     }
 
     footer {
-        background-color: $content-color-20;
-        border-top: 1px solid $black;
+        background-color: var(--content-color-20);
+        border-top: 1px solid var(--black);
         font-size: medium;
-        padding: 5px;
-        padding-left: 18px;
+        padding: 5px 5px 5px 18px;
         text-align: left;
     }
 
diff --git a/resources/assets/stylesheets/scss/studip-overlay.scss b/resources/assets/stylesheets/scss/studip-overlay.scss
index a3dd66a17a333263c77d64427dc15a9af1763c63..519ed8fe654cdc3183c9b9028637d6bdb7918157 100644
--- a/resources/assets/stylesheets/scss/studip-overlay.scss
+++ b/resources/assets/stylesheets/scss/studip-overlay.scss
@@ -42,7 +42,7 @@
             margin-bottom: 0;
             padding-bottom: 100px;
 
-            color: $white;
+            color: var(--white);
             border-bottom: 0;
         }
 
@@ -59,13 +59,14 @@
 
             border: none;
             border-radius: 2px;
-            box-shadow: 0 0 3px $light-gray-color-20;
+            box-shadow: 0 0 3px var(--light-gray-color-20);
 
-            background-color: $light-gray-color;
+            background-color: var(--light-gray-color);
 
-            &::-moz-progress-bar, &::-webkit-progress-value {
-                background-color: $yellow-40;
-                transition: all 300ms;
+            &::-moz-progress-bar,
+            &::-webkit-progress-value {
+                background-color: var(--yellow-40);
+                transition: all $transition-duration;
             }
         }
 
@@ -79,7 +80,7 @@
             margin: 60px 0 0;
             padding: 0;
             text-align: center;
-            color: $white;
+            color: var(--white);
             max-height: 120px;
             overflow: hidden;
         }
diff --git a/resources/assets/stylesheets/scss/studip-selection.scss b/resources/assets/stylesheets/scss/studip-selection.scss
index db539f1f797c22c35ac2e93986cd3697b9bea927..83282daacee67c2ade76dc637f6b80893e219cb6 100644
--- a/resources/assets/stylesheets/scss/studip-selection.scss
+++ b/resources/assets/stylesheets/scss/studip-selection.scss
@@ -24,7 +24,7 @@
     }
 
     li:not(.empty-placeholder) {
-        color: $base-color;
+        color: var(--base-color);
         cursor: pointer;
         margin: 1px 0;
         padding-right: 0.5em;
@@ -39,7 +39,7 @@
     }
 
     .studip-selection-selectable li.empty-placeholder {
-        color: $text-color;
+        color: var(--text-color);
         padding-left: 20px;
         position: relative;
 
@@ -106,7 +106,7 @@
             }
 
             .studip-selection-label {
-                color: $active-color;
+                color: var(--active-color);
             }
         }
     }
diff --git a/resources/assets/stylesheets/scss/study-area-selection.scss b/resources/assets/stylesheets/scss/study-area-selection.scss
index 44a314e553c388fd58cd352d7c2f78ac2f3a12bc..2d77ba5896b792624b17324cd505acd9716b1928 100644
--- a/resources/assets/stylesheets/scss/study-area-selection.scss
+++ b/resources/assets/stylesheets/scss/study-area-selection.scss
@@ -3,8 +3,8 @@
     padding: 1em;
 
     h3    { margin-top: 1em; }
-    .odd  { background-color: #f3f5f8; }
-    .even { background-color: $content-color-20; }
+    .odd  { background-color: var(--content-color-10); }
+    .even { background-color: var(--content-color-20); }
 }
 
 #study_area_selection_none,
diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss
index cfc0e3b186f18eabd674d59a9f74c006f4d666ad..63b0b969c3b14bb72f13cbed1998c8d0c408b9bc 100644
--- a/resources/assets/stylesheets/scss/table_of_contents.scss
+++ b/resources/assets/stylesheets/scss/table_of_contents.scss
@@ -33,11 +33,10 @@ ul.numberedchapters {
     position: absolute;
     right: -22px;
     top: -25px;
-    background-color: $white;
-    border: 1px solid #d0d7e3;
+    background-color: var(--white);
+    border: 1px solid var(--content-color-40);
     margin-bottom: 10px;
-    -webkit-box-shadow: 2px 2px #ccc;
-    box-shadow: 2px 2px #ccc;
+    box-shadow: 2px 2px var(--dark-gray-color-30);
 
 
     > section {
@@ -56,10 +55,10 @@ ul.numberedchapters {
 #toc_header {
     height: 58px;
     overflow: hidden;
-    background-color: $white;
-    color: $black;
+    background-color: var(--white);
+    color: var(--black);
     margin-bottom: -0.5em;
-    border-bottom: thin solid #d0d7e3;
+    border-bottom: thin solid var(--content-color-40);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -72,7 +71,7 @@ ul.numberedchapters {
 }
 
 #toc_h1 {
-    color: $black;
+    color: var(--black);
     font-weight: 500;
     margin-left: 10px;
     margin-bottom: unset;
@@ -93,7 +92,7 @@ ul.numberedchapters {
 #toc_nav {
     height: 40px;
     position: fixed;
-    background-color: $brand-color-darker;
+    background-color: var(--brand-color-darker);
 }
 
 #toc_icon {
@@ -131,7 +130,7 @@ section > .toc {
         font-size: 1em;
 
         > div {
-            border-bottom: 1px solid #E9E9E9;
+            border-bottom: 1px solid var(--dark-gray-color-10);
             margin-bottom: 5px;
         }
     }
@@ -147,21 +146,21 @@ section > .toc {
     }
 
     li div:hover {
-        background-color: $light-gray-color-20;
-        color: $base-color;
+        background-color: var(--light-gray-color-20);
+        color: var(--base-color);
 
     }
 
     li.active > div {
-        color: $black;
+        color: var(--black);
     }
 
     li.active > div:hover {
-        color: $white;
+        color: var(--white);
     }
 
     li.active > div a {
-        color: $black;
+        color: var(--black);
     }
 
     .toc > li {
@@ -176,14 +175,14 @@ section > .toc {
 
     .toc >li .selected {
         font-weight: 700;
-        background-color: $light-gray-color-20;
+        background-color: var(--light-gray-color-20);
     }
 
 }
 
 #wikifooter {
-    background-color: $content-color-20;
-    border-top: 1px solid $brand-color-darker;
+    background-color: var(--content-color-20);
+    border-top: 1px solid var(--brand-color-darker);
     clear: both;
     padding: 0;
     height: 58px;
@@ -234,8 +233,7 @@ section > .toc {
 
 
 #toc-button {
-    background-image: url(../images/icons/blue/table-of-contents.svg);
-    background-size: 24px;
+    background-image: url('#{$icon-path}blue/table-of-contents.svg');
 
     height: 24px;
     width: 24px;
diff --git a/resources/assets/stylesheets/scss/tabs.scss b/resources/assets/stylesheets/scss/tabs.scss
index 21731dba41047baacc4a86d3248afb4b50a2084e..b37005e0996d106439aec114f9745425fc4a4aac 100644
--- a/resources/assets/stylesheets/scss/tabs.scss
+++ b/resources/assets/stylesheets/scss/tabs.scss
@@ -19,7 +19,7 @@ div.clear
     }
     li { float: left; }
     a {
-        color: $black;
+        color: var(--black);
     }
 }
 
@@ -31,16 +31,16 @@ div.clear
     .quiet img { opacity: 0.25; }
 
     li {
-        background-color: $dark-gray-color-10;
+        background-color: var(--dark-gray-color-10);
 
         &:last-child {
             border-right: none;
         }
         &.current {
-            color: $base-color;
+            color: var(--base-color);
         }
         &:hover {
-            color: $base-color;
+            color: var(--base-color);
             padding-top: 0;
         }
 
@@ -48,12 +48,12 @@ div.clear
             padding-top: 0;
             line-height: 25px;
             a, span.quiet {
-                color: $base-color;
+                color: var(--base-color);
             }
         }
     }
     a, span.quiet {
-        color: $black;
+        color: var(--black);
         float: left;
         display: block;
 
@@ -92,8 +92,8 @@ div.clear
         right: inherit;
         padding: 0 0 10px 0;
         margin-top: 10px;
-        background: $content-color-20;
-        box-shadow: 1px 1px 1px $dark-gray-color-60;
+        background: var(--content-color-20);
+        box-shadow: 1px 1px 1px var(--dark-gray-color-60);
         text-align: left;
         white-space: nowrap;
 
@@ -103,7 +103,7 @@ div.clear
         }
 
         a:hover {
-            color: $red !important;
+            color: var(--red) !important;
         }
 
     }
@@ -122,13 +122,13 @@ div.clear
 
     .action-menu-content:before {
         border-color: rgba(194, 225, 245, 0);
-        border-bottom-color: $dark-gray-color-60;
+        border-bottom-color: var(--dark-gray-color-60);
         border-width: 9px;
         margin-left: -8px;
     }
     .action-menu-content:after {
         border-color: rgba(194, 225, 245, 0);
-        border-bottom-color: $content-color-20;
+        border-bottom-color: var(--content-color-20);
         border-width: 8px;
         margin-left: -8px;
     }
diff --git a/resources/assets/stylesheets/scss/tfa.scss b/resources/assets/stylesheets/scss/tfa.scss
index 178eb7aaf078d99e25fa65d53b0dc966076a6504..643b4ed5892f732afafcc42c8fedaa4f9a0d6c6c 100644
--- a/resources/assets/stylesheets/scss/tfa.scss
+++ b/resources/assets/stylesheets/scss/tfa.scss
@@ -20,7 +20,7 @@ form.default {
     .tfa-code-input {
         text-align: center;
         .tfa-code-wrapper {
-            border: 1px solid $base-gray;
+            border: 1px solid var(--base-gray);
             display: inline-block;
             font-size: 2em;
             line-height: 2em;
@@ -28,7 +28,7 @@ form.default {
         }
 
         input[type="number"] {
-            background: $dark-gray-color-10;
+            background: var(--dark-gray-color-10);
             border: 0;
             box-sizing: unset;
             font-family: monospace;
@@ -40,15 +40,15 @@ form.default {
             text-align: center;
             vertical-align: top;
 
-            color: $base-gray;
+            color: var(--base-gray);
             &:focus {
-                background-color: $activity-color-20;
-                color:$black;
+                background-color: var(--activity-color-20);
+                color:var(--black);
                 outline: 0;
             }
             &:invalid {
                 box-shadow: none;
-                color: $base-gray;
+                color: var(--base-gray);
                 outline: 0;
             }
 
diff --git a/resources/assets/stylesheets/scss/tooltip.scss b/resources/assets/stylesheets/scss/tooltip.scss
index a2f07e32469f7123b701e54f0fb0f75fe3b29013..4b7b36bbaffbfb769085c74e929393a4b22b8a4a 100644
--- a/resources/assets/stylesheets/scss/tooltip.scss
+++ b/resources/assets/stylesheets/scss/tooltip.scss
@@ -2,16 +2,16 @@
 %tooltip {
     @include arrow-bottom-border(9px, $dark-gray-color-5, 1px, $dark-gray-color-30, 5px);
 
-    background-color: $dark-gray-color-5;
-    border: 1px solid $dark-gray-color-30;
-    box-shadow: 0 1px 0 fade-out(#fff, 0.5) inset;
-    font-size: $font-size-base;
+    background-color: var(--dark-gray-color-5);
+    border: 1px solid var(--dark-gray-color-30);
+    box-shadow: 0 1px 0 fade-out($white, 0.5) inset;
+    font-size: var(--font-size-base);
     margin-bottom: 8px;
     max-width: 230px;
     padding: 10px;
     position: absolute;
     text-align: left;
-    text-shadow: 0 1px 0 fade-out(#fff, 0.5);
+    text-shadow: 0 1px 0 fade-out($white, 0.5);
     white-space: normal;
     z-index: 10000;
 
diff --git a/resources/assets/stylesheets/scss/tour.scss b/resources/assets/stylesheets/scss/tour.scss
index 006a732dd4ac72de831e1616a84037d7d7cde121..cfe6fc9145e57d7be77eb12a18be7aaea4a752ab 100644
--- a/resources/assets/stylesheets/scss/tour.scss
+++ b/resources/assets/stylesheets/scss/tour.scss
@@ -17,8 +17,8 @@
     bottom: 20px;
     right: 20px;
     z-index:20001;
-    border: solid 1px $base-color;
-    background-color: $white;
+    border: solid 1px var(--base-color);
+    background-color: var(--white);
     padding: 10px 10px;
     font-family: $font-family-base;
     overflow-y: auto;
@@ -30,7 +30,7 @@
 }
 
 .tour_focus_box {
-    border: 2px dashed $yellow;
+    border: 2px dashed var(--yellow);
 }
 
 #tour_tip {
@@ -41,9 +41,9 @@
     font-family: $font-family-base;
     font-size: 16px;
     box-sizing: border-box;
-    background-color: $base-color;
-    color: $white;
-    border: solid 1px $dark-gray-color-80;
+    background-color: var(--base-color);
+    color: var(--white);
+    border: solid 1px var(--dark-gray-color-80);
     box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
 
     a.link-extern {
@@ -53,11 +53,11 @@
         @include icon(before, link-intern, info-alt);
     }
     a, a:link, a:visited {
-        color: $white;
+        color: var(--white);
         text-decoration: none;
     }
     a:hover, a:active, a:hover.index, a:active.index, a:hover.tree {
-        color: $white;
+        color: var(--white);
         text-decoration: underline;
     }
 }
@@ -70,9 +70,9 @@
     font-family: $font-family-base;
     font-size: 16px;
     box-sizing: border-box;
-    background-color: $yellow;
-    color: $black;
-    border: solid 1px $dark-gray-color-10;
+    background-color: var(--yellow);
+    color: var(--black);
+    border: solid 1px var(--dark-gray-color-10);
     box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
 }
 
@@ -88,7 +88,7 @@
 }
 
 #tour_overlay {
-    background-color: $white;
+    background-color: var(--white);
     opacity: 0.4;
     position: fixed;
     z-index: 10000;
@@ -97,7 +97,7 @@
 }
 
 #tour_selector_overlay {
-    background-color: $white;
+    background-color: var(--white);
     opacity: 0.5;
     position: absolute;
 }
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 1c2efacf9781340ffea84f2bd32ac2d602265b3e..f801eb8227d04cd8f8c9b61a19331e8782764ad4 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -45,6 +45,7 @@ $transition-duration: .3s;
 :root {
     // The special handling for -- as #{"--"} seems to be neccessary to make
     // scss evaluate the color variables
+    #{"--"}text-color: $text-color;
     #{"--"}active-color: $active-color;
     #{"--"}activity-color: $activity-color;
     #{"--"}activity-color-20: $activity-color-20;
diff --git a/resources/assets/stylesheets/scss/wiki.scss b/resources/assets/stylesheets/scss/wiki.scss
index f428410e6d07eb719f2f6c50310ac3725c870c5f..4290f1fefece286a35b63767ae58f3f9c425f458 100644
--- a/resources/assets/stylesheets/scss/wiki.scss
+++ b/resources/assets/stylesheets/scss/wiki.scss
@@ -3,7 +3,7 @@ div.wikitoc {
     margin-bottom: 5px;
 
     h1, h2, h3, h4 {
-        color: black;
+        color: var(--black);
         font-size: 1em;
         margin: 0 0 0 -10px;
     }
@@ -94,36 +94,36 @@ a.wiki-restricted {
 }
 
 $authors: (
-     0: $dark-gray-color-20,
-     1: $red-20,
-     2: $green-20,
-     3: $brown-20,
-     4: $dark-violet-20,
-     5: $orange-20,
-     6: $dark-green-20,
-     7: $violet-20,
-     8: $yellow-20,
-     9: $petrol-20,
-    10: $dark-gray-color-40,
-    11: $red-40,
-    12: $green-40,
-    13: $brown-40,
-    14: $dark-violet-40,
-    15: $orange-40,
-    16: $dark-green-40,
-    17: $violet-40,
-    18: $yellow-40,
-    19: $petrol-40,
-    20: $dark-gray-color-60,
-    21: $red-60,
-    22: $green-60,
-    23: $brown-60,
-    24: $dark-violet-60,
-    25: $orange-60,
-    26: $dark-green-60,
-    27: $violet-60,
-    28: $yellow-60,
-    29: $petrol-60
+     0: var(--dark-gray-color-20),
+     1: var(--red-20),
+     2: var(--green-20),
+     3: var(--brown-20),
+     4: var(--dark-violet-20),
+     5: var(--orange-20),
+     6: var(--dark-green-20),
+     7: var(--violet-20),
+     8: var(--yellow-20),
+     9: var(--petrol-20),
+    10: var(--dark-gray-color-40),
+    11: var(--red-40),
+    12: var(--green-40),
+    13: var(--brown-40),
+    14: var(--dark-violet-40),
+    15: var(--orange-40),
+    16: var(--dark-green-40),
+    17: var(--violet-40),
+    18: var(--yellow-40),
+    19: var(--petrol-40),
+    20: var(--dark-gray-color-60),
+    21: var(--red-60),
+    22: var(--green-60),
+    23: var(--brown-60),
+    24: var(--dark-violet-60),
+    25: var(--orange-60),
+    26: var(--dark-green-60),
+    27: var(--violet-60),
+    28: var(--yellow-60),
+    29: var(--petrol-60)
 );
 
 @each $index, $bgcolor in $authors {
diff --git a/resources/assets/stylesheets/scss/wizard.scss b/resources/assets/stylesheets/scss/wizard.scss
index 3ad3650912afec31c7a43841ddab5acb7eb11108..b1fabf4cbb2c59d446dbfe2f4a6de87933b550c8 100644
--- a/resources/assets/stylesheets/scss/wizard.scss
+++ b/resources/assets/stylesheets/scss/wizard.scss
@@ -27,10 +27,10 @@
                         padding: 2px 0;
                         background-color: transparent;
                         border: none;
-                        color: $base-color;
+                        color: var(--base-color);
                         cursor: pointer;
                         &:hover {
-                            color: $red;
+                            color: var(--red);
                         }
                     }
                     img {
@@ -47,7 +47,7 @@
         margin-left: 15px;
 
         h2 span.required {
-            color: $red;
+            color: var(--red);
         }
 
         .wizard-progress {
@@ -59,7 +59,7 @@
                 display: inline-block;
                 position: relative;
                 margin-right: 60px;
-                border: solid 2px $base-color;
+                border: solid 2px var(--base-color);
                 button {
                     padding: 6px 0;
                     height: 36px;
@@ -69,25 +69,21 @@
                     border: none;
                 }
                 &.valid {
-                    background-color: $base-color;
+                    background-color: var(--base-color);
                 }
                 &.invalid {
                     background-color: white;
                 }
                 &.optional {
-                    border: dashed thin $base-color;
+                    border: dashed thin var(--base-color);
                 }
                 &::before {
                     position: absolute;
                     content: "";
                     width: 62px;
-                    border: solid thin $base-color;
+                    border: solid thin var(--base-color);
                     top: 50%;
                     transform: translateY(-50%);
-                    -o-transform: translateY(-50%);
-                    -ms-transform: translateY(-50%);
-                    -moz-transform: translateY(-50%);
-                    -webkit-transform: translateY(-50%);
                     left: 100%;
                 }
                 &.active::after {
@@ -95,7 +91,7 @@
                     content: "";
                     width: 38px;
                     height: 3px;
-                    background: $base-color;
+                    background: var(--base-color);
                     top: 44px;
                     left: -1px;
                 }
@@ -118,10 +114,10 @@
                     max-height: 475px;
                     overflow-y: auto;
                     scrollbar-width: thin;
-                    scrollbar-color: $base-color #f5f5f5;
+                    scrollbar-color: var(--base-color) var(--dark-gray-color-5);
 
                     .wizard-required {
-                        color: $red;
+                        color: var(--red);
                     }
 
                     textarea {
@@ -130,7 +126,7 @@
 
                     input[type="text"]::placeholder,
                     textarea::placeholder {
-                        color: $dark-gray-color-60;
+                        color: var(--dark-gray-color-60);
                     }
                 }
             }
@@ -158,7 +154,7 @@ form.default fieldset.radiobutton-set {
     }
     > label {
         cursor: pointer;
-        border: 1px solid $content-color-40;
+        border: 1px solid var(--content-color-40);
         transition: background-color 200ms;
         display: flex;
         justify-content: space-between;
@@ -182,20 +178,20 @@ form.default fieldset.radiobutton-set {
         }
     }
     > label:first-of-type {
-        border-top: 1px solid $content-color-40;
+        border-top: 1px solid var(--content-color-40);
     }
     > label:last-child::after {
         content: none;
     }
     > div {
-        border: 1px solid $content-color-40;
+        border: 1px solid var(--content-color-40);
         border-top: none;
         display: none;
         padding: 10px;
 
     }
     > input[type=radio]:checked + label {
-        background-color: $content-color-20;
+        background-color: var(--content-color-20);
         transition: background-color 200ms;
         > .unchecked {
             display: none;
@@ -211,4 +207,4 @@ form.default fieldset.radiobutton-set {
             animation-name: terms_of_use_fadein;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/resources/assets/stylesheets/studip-jquery-ui.less b/resources/assets/stylesheets/studip-jquery-ui.less
index 2303779361dbbd6d8c0b0f1684e6bda6ecd7b624..4da59c9cbf40f19477c0bc37921108fd076199dd 100644
--- a/resources/assets/stylesheets/studip-jquery-ui.less
+++ b/resources/assets/stylesheets/studip-jquery-ui.less
@@ -20,14 +20,14 @@
 
     .ms-selectable,
     .ms-selection {
-        color: @dark-gray-color;
+        color: var(--dark-gray-color);
         width: 47%;
 
         li.ms-elem-selectable,
         li.ms-elem-selection {
-            background: #fff;
-            border-bottom-color: @content-color-20;
-            color: @dark-gray-color;
+            background: var(--white);
+            border-bottom-color: var(--content-color-20);
+            color: var(--dark-gray-color);
             padding: @element-padding;
         }
         li {
@@ -38,12 +38,12 @@
             }
 
             &.ms-hover, &:hover {
-              background: @brand-color-dark;
-              color: #fff;
+              background: var(--brand-color-dark);
+              color: var(--white);
             }
             &.disabled {
-              background-color: @content-color-20;
-              color: @dark-gray-color;
+              background-color: var(--content-color-20);
+              color: var(--dark-gray-color);
               cursor: not-allowed;
             }
             &[style*="background-image"] {
@@ -68,7 +68,7 @@
             visibility: hidden;
         }
         &:hover {
-            background-color: @brand-color-dark;
+            background-color: var(--brand-color-dark);
             &::after {
                 visibility: visible;
             }
@@ -92,7 +92,7 @@
             visibility: hidden;
         }
         &:hover {
-            background-color: @brand-color-dark;
+            background-color: var(--brand-color-dark);
             &::before {
                 visibility: visible;
             }
@@ -101,12 +101,12 @@
 
     .ms-list {
         border-radius: 0;
-        border-color: @light-gray-color-40;
+        border-color: var(--light-gray-color-40);
         position: relative;
     }
 
     .ms-optgroup-label {
-        color: @dark-gray-color-60;
+        color: var(--dark-gray-color-60);
     }
 
     // Default multi select with STUDIP.MultiSelect.create()
@@ -132,8 +132,8 @@
             align-items: center;
             justify-content: space-between;
 
-            background: @dark-gray-color-10;
-            border: 1px solid @dark-gray-color-30;
+            background: var(--dark-gray-color-10);
+            border: 1px solid var(--dark-gray-color-30);
             border-bottom: 0;
 
             padding-left: 0.5em;
@@ -144,7 +144,7 @@
         }
 
         .ms-focus {
-            border-color: @brand-color-dark;
+            border-color: var(--brand-color-dark);
             box-shadow: none;
         }
 
diff --git a/resources/assets/stylesheets/studip.less b/resources/assets/stylesheets/studip.less
index 6c6cd33ff6f5751f99c90cf836f85158331ec340..1a2c7941b20ead9113e59a3541fb6cda30c111b7 100644
--- a/resources/assets/stylesheets/studip.less
+++ b/resources/assets/stylesheets/studip.less
@@ -20,7 +20,7 @@
 /* --- Standardvorgaben ----------------------------------------------------- */
 //TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!!
 body {
-    background-color: #d8dadc;
+    background-color: var(--dark-gray-color-20);
     background-repeat: repeat-x;
     margin: 0;
 }
@@ -42,7 +42,7 @@ table.content {
     border-collapse: collapse;
 
     td {
-        border: thin solid #666;
+        border: thin solid var(--dark-gray-color-80);
         padding: 3px;
     }
 
@@ -125,7 +125,7 @@ ul.clean, ol.clean {
 .nodisplay   { display: none; }
 
 .bordered    {
-    border: 1px solid @content-color-40;
+    border: 1px solid var(--content-color-40);
     padding: 10px;
 }
 .bordered + .bordered {
@@ -140,13 +140,13 @@ table.index_box {
 }
 
 td.index_box_cell {
-    background-color: @content-color-20;
+    background-color: var(--content-color-20);
     padding: 4px;
 }
 
 /* overdiv */
 div.overdiv {
-    background-color: @content-color-20;
+    background-color: var(--content-color-20);
     margin: 0;
     padding: 0;
     position: absolute;
@@ -159,12 +159,12 @@ div.overdiv {
         float: right;
     }
     div.title {
-        background: @brand-color-lighter;
+        background: var(--brand-color-lighter);
         height: 1.4em;
         padding: 0;
     }
     h4.title {
-        color: #fff;
+        color: var(--white);
         float: left;
         font-size: 1em;
         overflow: hidden;
@@ -173,7 +173,7 @@ div.overdiv {
     }
 
     div.content {
-        background-color: @content-color-20;
+        background-color: var(--content-color-20);
         clear: both;
         margin: 0;
         overflow: hidden;
@@ -201,7 +201,7 @@ div.overdiv {
         .right { float: right; }
 
         .ui-button {
-            background: @dark-gray-color-15;
+            background: var(--dark-gray-color-15);
             display: inline-block;
             height: 1.4em;
             line-height: 1.4;
@@ -209,8 +209,8 @@ div.overdiv {
             padding-bottom: 6px;
 
             &:hover {
-                background-color: @base-color-60;
-                color: @contrast-content-white;
+                background-color: var(--base-color-60);
+                color: var(--contrast-content-white);
             }
         }
     }
@@ -283,8 +283,8 @@ div.overdiv {
 
     a {
         box-sizing: border-box;
-        background-color: @content-color-20;
-        border: 1px solid #D0D0D0;
+        background-color: var(--content-color-20);
+        border: 1px solid var(--dark-gray-color-30);
         display: block;
         height: 11em;
         margin: 0 0 1em;
@@ -293,10 +293,12 @@ div.overdiv {
         position: relative;
 
         &:hover {
-            background-color: #F2F2F2;
-            border-color: #A4A4A4;
+            background-color: var(--content-color-10);
+            border-color: var(--dark-gray-color-45);
 
-            p { color: #000; }
+            p {
+                color: var(--black);
+            }
         }
     }
     img {
@@ -317,7 +319,7 @@ div.overdiv {
         padding: 0;
     }
     p {
-        color: #666;
+        color: var(--dark-gray-color-80);
     }
 }
 
@@ -353,9 +355,9 @@ h1:hover, h2:hover, h3:hover, h4:hover {
 
 /* error message */
 .error {
-    background-color: #fcc;
-    border: 1px solid #fcc;
-    color: #000;
+    background-color: var(--red-20);
+    border: 1px solid var(--red-20);
+    color: var(--black);
     display: none;
     font-size: 11px;
     padding: 4px 10px;
@@ -363,7 +365,7 @@ h1:hover, h2:hover, h3:hover, h4:hover {
     p { margin: 0; }
     div.arrow {
         border: 10px solid;
-        border-color: transparent transparent #FCC transparent;
+        border-color: transparent transparent var(--red-20) transparent;
         height: 0;
         left: 60px;
         position: absolute;
@@ -376,7 +378,7 @@ h1:hover, h2:hover, h3:hover, h4:hover {
     font-size: 0.9em;
     font-style: italic;
     text-align: right;
-    color: #444;
+    color: var(--base-gray);
 }
 
 pre.usercode {
@@ -535,5 +537,5 @@ details.studip {
 }
 
 mark {
-    background-color: @activity-color-60;
+    background-color: var(--activity-color-60);
 }
diff --git a/resources/vue/components/ContentModules.vue b/resources/vue/components/ContentModules.vue
index 0a9d54bee0779b526cdcf0bf949fe292f2f4fc67..a48dd9d69092ca4863e1158ea82ffd8c3f7e665b 100644
--- a/resources/vue/components/ContentModules.vue
+++ b/resources/vue/components/ContentModules.vue
@@ -191,7 +191,7 @@ export default {
             display: flex;
             flex-direction: row;
             .iconwrapper {
-                background-color: white;
+                background-color: var(--white);
                 border-radius: 50px;
                 display: flex;
                 align-items: center;
diff --git a/resources/vue/components/ContentmodulesEditTable.vue b/resources/vue/components/ContentmodulesEditTable.vue
index 144f920a7ac1aa6b20037dd8660fbcc017433d14..28e28435af5619242caf45614c00ce1d823865b6 100644
--- a/resources/vue/components/ContentmodulesEditTable.vue
+++ b/resources/vue/components/ContentmodulesEditTable.vue
@@ -77,21 +77,19 @@ export default {
 }
 </script>
 <style lang="scss">
-@use '../../assets/stylesheets/mixins/colors.scss';
-
 table.admin_contentmodules > tbody > tr  {
     > td:first-child {
-        background-image: linear-gradient(colors.$dark-gray-color-60, colors.$dark-gray-color-60);
+        background-image: linear-gradient(var(--dark-gray-color-60), var(--dark-gray-color-60));
         background-repeat: no-repeat;
         background-position: left;
         background-size: 10px auto;
         padding-left: 15px;
     }
     &.visibility-visible > td:first-child {
-        background-image: linear-gradient(colors.$green, colors.$green);
+        background-image: linear-gradient(var(--green), var(--green));
     }
     &.visibility-invisible > td:first-child {
-        background-image: linear-gradient(colors.$yellow, colors.$yellow);
+        background-image: linear-gradient(var(--yellow), var(--yellow));
     }
     > td {
         height: 31px; //to make all rows equally high
diff --git a/resources/vue/components/MyCoursesNavigation.vue b/resources/vue/components/MyCoursesNavigation.vue
index 739668c6f2cd1d7c27427f03c4ee30d55b644341..aa36499facca6723c9a26b1407238c5b91c84aed 100644
--- a/resources/vue/components/MyCoursesNavigation.vue
+++ b/resources/vue/components/MyCoursesNavigation.vue
@@ -29,7 +29,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use '../../assets/stylesheets/mixins.scss';
 $icon-padding: 3px;
 
 .my-courses-navigation {
@@ -65,7 +64,7 @@ $icon-padding: 3px;
 }
 .my-courses-navigation-important {
     $border-width: 1px;
-    border: $border-width solid mixins.$red;
+    border: $border-width solid var(--red);
 
     a {
         padding: $icon-padding - $border-width;
diff --git a/resources/vue/components/MyCoursesTables.vue b/resources/vue/components/MyCoursesTables.vue
index 83e1e41c5dc69712b26f16f44b17a23ef1a8137a..80d04dd36681bdad6aabfee826d25e17d89c215c 100644
--- a/resources/vue/components/MyCoursesTables.vue
+++ b/resources/vue/components/MyCoursesTables.vue
@@ -145,8 +145,6 @@ export default {
 </script>
 
 <style lang="scss">
-@use '../../assets/stylesheets/mixins/colors.scss' as *;
-
 table.mycourses {
     tbody td {
         vertical-align: top;
@@ -162,10 +160,10 @@ table.mycourses {
     }
 
     tr.has-subcourses td {
-        border-bottom: 1px solid $dark-gray-color-75;
+        border-bottom: 1px solid var(--dark-gray-color-75);
     }
     tr.subcourses {
-        background-color: $dark-gray-color-5;
+        background-color: var(--dark-gray-color-5);
 
         td.subcourse-indented {
             padding-left: 20px;
diff --git a/resources/vue/components/MyCoursesTiles.vue b/resources/vue/components/MyCoursesTiles.vue
index 071bd76aedbc7e0ba5fce7ed78feae054020a6bb..73f8aad308bc67f28922bab8a1d17cc97253603b 100644
--- a/resources/vue/components/MyCoursesTiles.vue
+++ b/resources/vue/components/MyCoursesTiles.vue
@@ -178,7 +178,7 @@ $tile-padding: 10px;
         flex-direction: column;
         position: relative; // For color picker
 
-        border: $tile-border-width solid mixins.$base-color-20;
+        border: $tile-border-width solid var(--base-color-20);
 
         padding: $tile-padding;
     }
@@ -221,7 +221,7 @@ $tile-padding: 10px;
 
 .group-label,
 .course-group-label {
-    color: mixins.$base-gray;
+    color: var(--base-gray);
 }
 
 .group-label {
@@ -245,15 +245,15 @@ article.studip.my-courses--group-hidden {
 
 // Border below according to selected group
 $group-colors: (
-    0: mixins.$group-color-0,
-    1: mixins.$group-color-1,
-    2: mixins.$group-color-2,
-    3: mixins.$group-color-3,
-    4: mixins.$group-color-4,
-    5: mixins.$group-color-5,
-    6: mixins.$group-color-6,
-    7: mixins.$group-color-7,
-    8: mixins.$group-color-8,
+    0: var(--group-color-0),
+    1: var(--group-color-1),
+    2: var(--group-color-2),
+    3: var(--group-color-3),
+    4: var(--group-color-4),
+    5: var(--group-color-5),
+    6: var(--group-color-6),
+    7: var(--group-color-7),
+    8: var(--group-color-8),
 );
 @for $i from 0 through 8 {
     .studip-grid-element.my-courses-group-#{$i} {
@@ -286,7 +286,7 @@ $group-colors: (
     left: 0;
     z-index: 2;
 
-    background: mixins.$white;
+    background: var(--white);
     grid-gap: $gap;
     padding: $gap;
 }
diff --git a/resources/vue/components/courseware/CoursewareBlockadderItem.vue b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
index 5e4b850971958ed555fa29359fe54ebdd2d4bcd3..921014aae394cf76fce0c9a3d9adbbecf390eafb 100644
--- a/resources/vue/components/courseware/CoursewareBlockadderItem.vue
+++ b/resources/vue/components/courseware/CoursewareBlockadderItem.vue
@@ -113,5 +113,3 @@ export default {
     },
 };
 </script>
-
-<style></style>
diff --git a/resources/vue/components/stock-images/SelectableImageCard.vue b/resources/vue/components/stock-images/SelectableImageCard.vue
index 777b0f93a1f8cc0afd35dc5cf1df1638434e75d8..e6d4c73a3d8d119a16ce3bda87b83010a6399340 100644
--- a/resources/vue/components/stock-images/SelectableImageCard.vue
+++ b/resources/vue/components/stock-images/SelectableImageCard.vue
@@ -33,7 +33,7 @@ export default {
     position: relative;
 }
 .stock-images-selectable-image > :last-child {
-    background: #ffffff;
+    background: var(--white);
     overflow: hidden;
     text-overflow: ellipsis;
     width: 8rem;