diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less
index 8f239333b..c8c8c553c 100644
--- a/modules/doc/public/css/module.less
+++ b/modules/doc/public/css/module.less
@@ -2,13 +2,20 @@
 
 // Mixins
 
-.gradient(@a: @gray-lighter; @b: @gray-lightest) {
+.gradient(@a: ~"var(--gray-lighter, @{gray-lighter})"; @b: @gray-lightest) {
+  background: extract-variable-default(@a);
   background: @a;
+  background: -webkit-gradient(linear, left top, left bottom, from(extract-variable-default(@a, true)), to(extract-variable-default(@b, true)));
   background: -webkit-gradient(linear, left top, left bottom, from(@a), to(@b));
+  background: -webkit-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
   background: -webkit-linear-gradient(top, @a, @b);
+  background: -moz-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
   background: -moz-linear-gradient(top, @a, @b);
+  background: -ms-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
   background: -ms-linear-gradient(top, @a, @b);
+  background: -o-linear-gradient(top, extract-variable-default(@a, true), extract-variable-default(@b, true));
   background: -o-linear-gradient(top, @a, @b);
+  background: linear-gradient(to bottom, extract-variable-default(@a, true), extract-variable-default(@b, true));
   background: linear-gradient(to bottom, @a, @b);
 }
 
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index d5ff66dc1..574e44389 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -3,7 +3,8 @@
 .monitoring-statusbar {
   position: relative;
   .var(background-color, body-bg-color);
-  border-top: 1px solid @gray-lighter;
+  border-top: 1px solid;
+  .var(border-top-color, gray-lighter);
   padding: .25em @gutter;
   line-height: 1.3;
 
@@ -195,7 +196,7 @@
     padding: .25em .5em;
 
     &:hover {
-      background-color: @gray-lighter;
+      .var(background-color, gray-lighter);
       text-decoration: none;
     }
   }
@@ -285,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
 }
 
 div.box.monitoringfeatures {
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
 }
@@ -303,7 +305,8 @@ div.box.monitoringfeatures a.feature-highlight {
 }
 
 div.box.hostservicechecks {
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
 }
@@ -317,7 +320,8 @@ div.box.hostservicechecks th {
 div.box.process {
   width: 100%;
   max-width: 50em;
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
   margin-bottom: 1em;
@@ -326,7 +330,8 @@ div.box.process {
 
 .process div.box.header {
   min-height: 5em;
-  border-bottom:1px solid @gray-lighter;
+  border-bottom:1px solid;
+  .var(border-bottom-color, gray-lighter);
 }
 
 .process > .boxview > div.box {
@@ -337,7 +342,8 @@ div.box.process {
   margin-top: 0;
   margin-bottom: 1em;
   padding-bottom: 1em;
-  border-bottom:1px solid @gray-lighter;
+  border-bottom:1px solid;
+  .var(border-bottom-color, gray-lighter);
 }
 
 .process th {
@@ -376,14 +382,16 @@ div.backend-not-running {
 div.box.features {
   width: 100%;
   max-width: 50em;
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
 }
 
 .features div.box.header {
   min-height: 5em;
-  border-bottom:1px solid @gray-lighter;
+  border-bottom: 1px solid;
+  .var(border-bottom-color, gray-lighter);
 }
 
 .features > .boxview > div.box {
@@ -394,7 +402,8 @@ div.box.features {
   margin-top: 0;
   margin-bottom: 1em;
   padding-bottom: 1em;
-  border-bottom:1px solid @gray-lighter;
+  border-bottom: 1px solid;
+  .var(border-bottom-color, gray-lighter);
 }
 
 
@@ -403,7 +412,8 @@ div.box.features {
 div.box.stats {
   width: 100%;
   max-width: 50em;
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
   .var(color, text-color);
@@ -424,7 +434,8 @@ div.box.stats {
 
 .stats > h2 {
   text-align: left;
-  border-bottom: 1px solid @gray-lighter;
+  border-bottom: 1px solid;
+  .var(border-bottom-color, gray-lighter);
 
   > .hosts-summary,
   > .services-summary {
@@ -444,7 +455,8 @@ div.box.stats {
 div.timeline-legend {
   padding: 0.5em;
   margin-top: 2em;
-  border: 1px solid @gray-lighter;
+  border: 1px solid;
+  .var(border-color, gray-lighter);
   border-left: 15px solid;
   .var(border-left-color, "gray");
 
@@ -658,7 +670,8 @@ form.instance-features span.description, form.object-features span.description {
 }
 
 .plugin-output {
-  border-left: 5px solid @gray-lighter;
+  border-left: 5px solid;
+  .var(border-left-color, gray-lighter);
   padding: 0.66em 0.33em;
 
   .state-critical {
diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less
index 734017a12..6763237da 100644
--- a/public/css/icinga/audit.less
+++ b/public/css/icinga/audit.less
@@ -81,7 +81,8 @@
   }
 
   .connector {
-    border: 0 solid @gray-lighter;
+    border: 0 solid;
+    .var(border-color, gray-lighter);
     border-bottom-width: 2px;
 
     &.granted {
@@ -100,7 +101,8 @@
 
   .role {
     .rounded-corners(1em);
-    border: 2px solid @gray-lighter;
+    border: 2px solid;
+    .var(border-color, gray-lighter);
 
     &.granted {
       border: 2px solid @color-granted;
@@ -113,7 +115,7 @@
 
   .restriction {
     font-family: @font-family-fixed;
-    background-color: @gray-lighter;
+    .var(background-color, gray-lighter);
   }
 }
 
diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index eb49ff512..f86576a97 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -128,6 +128,7 @@
     --gray: #7F7F7F;
     --gray-semilight: #A9A9A9;
     --gray-light: #C9C9C9;
+    --gray-lighter: #EEEEEE;
   }
 }
 
@@ -164,7 +165,8 @@ blockquote, p, pre {
 }
 
 blockquote {
-  border-left: 5px solid @gray-lighter;
+  border-left: 5px solid;
+  .var(border-left-color, gray-lighter);
   padding: 0.667em 0.333em;
 }
 
@@ -174,7 +176,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  border-bottom: 1px solid @gray-lighter;
+  border-bottom: 1px solid;
+  .var(border-bottom-color, gray-lighter);
   font-size: 1.333em;
 }
 
diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less
index 549d31c76..1d6ce8d62 100644
--- a/public/css/icinga/controls.less
+++ b/public/css/icinga/controls.less
@@ -130,7 +130,7 @@ input.search {
       padding: 0.5em;
     }
     > a:hover {
-      background-color: @gray-lighter;
+      .var(background-color, gray-lighter);
       text-decoration: none;
     }
   }
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index 12d40258d..a6bdd4cb3 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -398,7 +398,7 @@ form.inline {
     .var(border-color, gray-light);
 
     &:before {
-      background-color: @gray-lighter;
+      .var(background-color, gray-lighter);
       .var(border-color, gray-light);
     }
   }
@@ -411,7 +411,7 @@ form.icinga-form .control-group.disabled .control-label-group {
 .icinga-controls {
   input[disabled],
   select[disabled] {
-    background: @gray-lighter;
+    .var(background-color, gray-lighter);
     border-color: transparent;
   }
 }
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index efb8464e5..b5d6d1d3d 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -105,7 +105,8 @@ a:hover > .icon-cancel {
   margin: 0;
 
   > dt {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid;
+    .var(border-bottom-color, gray-lighter);
     margin-bottom: 0.25em;
 
     &:hover {
@@ -275,7 +276,7 @@ a:hover > .icon-cancel {
     margin-top: -1em;
     margin-right: .25em;
 
-    background: @gray-lighter;
+    .var(background, gray-lighter);
     .var(color, "gray");
     border: none;
     -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 6bb7580e5..1597cb1a8 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -140,7 +140,8 @@
 // Columns
 
 #layout.twocols #col2 {
-  border-left: 1px solid @gray-lighter;
+  border-left: 1px solid;
+  .var(border-left-color, gray-lighter);
 }
 
 #layout.twocols.wide-layout #col2 {
@@ -158,7 +159,8 @@
 }
 
 #layout.twocols #col2 {
-  border-left: 1px solid @gray-lighter;
+  border-left: 1px solid;
+  .var(border-left-color, gray-lighter);
 
   &:empty {
     display: flex;
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index a2cea3852..8cb03bfe1 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -74,7 +74,7 @@
 }
 
 .tabs > .dropdown-nav-item > ul > li:hover > a {
-  background-color: @gray-lighter;
+  .var(background-color, gray-lighter);
   text-decoration: none;
 }
 
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index 42df27a72..5fddc53f5 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -7,7 +7,8 @@
   padding: 0;
 
   > li {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid;
+    .var(border-bottom-color, gray-lighter);
     line-height: 1.5em;
     padding: 0.5em 1em 0.5em 3em;
 
@@ -460,7 +461,8 @@ ul.tree li a.error:hover {
 
   .flyover-content {
     .var(background-color, body-bg-color);
-    border: 1px solid @gray-lighter;
+    border: 1px solid;
+    .var(border-color, gray-lighter);
     box-shadow: 0 0 .5em 0 rgba(0, 0, 0, 0.2);
     position: absolute;
     padding: @vertical-padding @horizontal-padding;
@@ -469,8 +471,10 @@ ul.tree li a.error:hover {
 
   &.flyover-arrow-top .flyover-content:before {
     .var(background, body-bg-color);
-    border-left: 1px solid @gray-lighter;
-    border-top: 1px solid @gray-lighter;
+    border-left: 1px solid;
+    .var(border-left-color, gray-lighter);
+    border-top: 1px solid;
+    .var(border-top-color, gray-lighter);
     content: "";
     height: 1em;
     -ms-transform: rotate(45deg);
diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less
index 2a4a1d552..040804ee1 100644
--- a/public/css/themes/icinga-light-theme.less
+++ b/public/css/themes/icinga-light-theme.less
@@ -1,3 +1,2 @@
 
-@gray-lighter: #EEEEEE;
 @gray-lightest: #F7F7F7;