diff --git a/modules/doc/public/css/module.less b/modules/doc/public/css/module.less
index a027e1e86..8f239333b 100644
--- a/modules/doc/public/css/module.less
+++ b/modules/doc/public/css/module.less
@@ -24,7 +24,8 @@ pre > code {
 }
 
 .chapter a {
-  border-bottom: 1px @gray-light dotted;
+  border-bottom: 1px dotted;
+  .var(border-bottom-color, gray-light);
   font-weight: @font-weight-bold;
 
   &:hover {
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 2b7ac465d..d5ff66dc1 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -35,7 +35,7 @@
     }
 
     &.-inactive {
-      color: @gray-light;
+      .var(color, gray-light);
     }
   }
 }
@@ -70,7 +70,7 @@
     color: white;
   }
   .group-grid-cell > div.state-none {
-    background-color: @gray-light;
+    .var(background-color, gray-light);
   }
 }
 
@@ -651,7 +651,7 @@ form.instance-features span.description, form.object-features span.description {
 
     & + span.hint {
       margin: .35em;
-      color: @gray-light;
+      .var(color, gray-light);
       font-style: italic;
     }
   }
@@ -702,7 +702,8 @@ form.instance-features span.description, form.object-features span.description {
 .markdown,
 .plugin-output {
   a {
-     border-bottom: 1px @gray-light dotted;
+    border-bottom: 1px dotted;
+    .var(border-bottom-color, gray-light);
 
     &:hover {
       border-bottom: 1px solid;
diff --git a/modules/monitoring/public/css/service-grid.less b/modules/monitoring/public/css/service-grid.less
index 3ab212843..c3f86bb8f 100644
--- a/modules/monitoring/public/css/service-grid.less
+++ b/modules/monitoring/public/css/service-grid.less
@@ -5,7 +5,7 @@
   white-space: nowrap;
 
   td {
-    color: @gray-light;
+    .var(color, gray-light);
     padding: 0.2em;
     text-align: center;
     width: 1em;
@@ -66,7 +66,7 @@ form.filter-toggle {
     display: inline-block;
     vertical-align: top;
     margin-left: .5em;
-    color: @gray-light;
+    .var(color, gray-light);
   }
 
   input[type="checkbox"]:checked ~ label {
diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less
index d41a68ecf..734017a12 100644
--- a/public/css/icinga/audit.less
+++ b/public/css/icinga/audit.less
@@ -20,7 +20,8 @@
   }
 
   h3 {
-    border-bottom: 1px solid @gray-light;
+    border-bottom: 1px solid;
+    .var(border-bottom-color, gray-light);
   }
 
   h3 em,
@@ -36,7 +37,7 @@
   }
 
   .icon {
-    color: @gray-light;
+    .var(color, gray-light);
 
     &.granted {
       color: @color-granted;
@@ -59,7 +60,8 @@
 
     &:hover .spacer {
       .transition(opacity .25s .25s ease-in);
-      border: 0 dashed @gray-light;
+      border: 0 dashed;
+      .var(border-color, gray-light);
       border-top-width: .2em;
       opacity: 1;
     }
diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index d21297a81..eb49ff512 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -127,6 +127,7 @@
 
     --gray: #7F7F7F;
     --gray-semilight: #A9A9A9;
+    --gray-light: #C9C9C9;
   }
 }
 
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index 993edcf8b..12d40258d 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -110,7 +110,8 @@ form.icinga-form.inline .control-label-group {
   margin: 0;
   padding: 0;
   border: none;
-  border-top: 1px solid @gray-light;
+  border-top: 1px solid;
+  .var(border-top-color, gray-light);
 
   legend, .description {
     margin-left: .7em;
@@ -393,12 +394,12 @@ form.inline {
   cursor: default;
 
   & > .toggle-slider {
-    background-color: @gray-light;
-    border-color: @gray-light;
+    .var(background-color, gray-light);
+    .var(border-color, gray-light);
 
     &:before {
       background-color: @gray-lighter;
-      border-color: @gray-light;
+      .var(border-color, gray-light);
     }
   }
 }
diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less
index b2efed065..41681a97a 100644
--- a/public/css/icinga/health.less
+++ b/public/css/icinga/health.less
@@ -36,7 +36,8 @@
   }
 
   tr:not(:last-child) td {
-    border: 0 solid @gray-light;
+    border: 0 solid;
+    .var(border-color, gray-light);
     border-bottom-width: 1px;
   }
 
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index ba3762ac1..63f788a2a 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -207,7 +207,8 @@
   .var(color, text-color);
   display: block;
   line-height: 2.5em;
-  border-left: .5em solid @gray-light;
+  border-left: .5em solid;
+  .var(border-left-color, gray-light);
   .var(background, body-bg-color);
   margin-bottom: 1px;
   box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index eb19f4240..efb8464e5 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -162,7 +162,8 @@ a:hover > .icon-cancel {
   }
 
   thead {
-    border-bottom: 1px solid @gray-light;
+    border-bottom: 1px solid;
+    .var(border-bottom-color, gray-light);
   }
 
   tbody tr {
@@ -282,7 +283,7 @@ a:hover > .icon-cancel {
     box-shadow: 0 0 1/3em rgba(0,0,0,.3);
 
     &:hover {
-      background: @gray-light;
+      .var(background, gray-light);
     }
   }
 
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 44273e547..4355bffd0 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -241,7 +241,8 @@
 #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
   > .nav-level-2 {
     background-color: @menu-flyout-bg-color;
-    border: 1px solid @gray-light;
+    border: 1px solid;
+    .var(border-color, gray-light);
     border-radius: .25em;
     box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
     padding: @vertical-padding 0;
@@ -253,8 +254,10 @@
       .transform(rotate(45deg));
 
       .var(background-color, body-bg-color);
-      border-bottom: 1px solid @gray-light;
-      border-left: 1px solid @gray-light;
+      border-bottom: 1px solid;
+      .var(border-bottom-color, gray-light);
+      border-left: 1px solid;
+      .var(border-left-color, gray-light);
       content: "";
       display: block;
       height: 1.1em;
@@ -415,19 +418,19 @@ input[type=text].search-input {
 }
 
 .search-input:focus:-moz-placeholder { // FF 18-
-  color: @gray-light;
+  .var(color, gray-light);
 }
 
 .search-input:focus::-moz-placeholder { // FF 19+
-  color: @gray-light;
+  .var(color, gray-light);
 }
 
 .search-input:focus:-ms-input-placeholder {
-  color: @gray-light;
+  .var(color, gray-light);
 }
 
 .search-input:focus::-webkit-input-placeholder {
-  color: @gray-light;
+  .var(color, gray-light);
 }
 
 .search-input ~ .search-reset {
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index 080caa47a..a2cea3852 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -65,7 +65,8 @@
   .rounded-corners(0 0 0.3em 0.3em);
 
   .var(background-color, body-bg-color);
-  border: 1px solid @gray-light;
+  border: 1px solid;
+  .var(border-color, gray-light);
   border-top: none;
   margin-left: -1px;
   min-width: 14em;
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index 7e5f8f45c..42df27a72 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -286,7 +286,8 @@ form.role-form {
     }
 
     .collapsible-control {
-      border-bottom: 1px solid @gray-light;
+      border-bottom: 1px solid;
+      .var(border-bottom-color, gray-light);
       cursor: pointer;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
@@ -362,7 +363,7 @@ ul.tree li::before, ul.tree li::after {
   position: absolute;
   right: auto;
   left: -0.2em;
-  border-color: @gray-light;
+  .var(border-color, gray-light);
   border-style: dotted;
   border-width: 0;
 }
@@ -543,8 +544,8 @@ ul.tree li a.error:hover {
 }
 
 .slice-state-not-checked {
-  stroke: @gray-light;
-  background: @gray-light;
+  .var(stroke, gray-light);
+  .var(background, gray-light);
 }
 
 .donut {
@@ -570,7 +571,7 @@ ul.tree li a.error:hover {
 }
 
 .donut-label-big {
-  color: @gray-light;
+  .var(color, gray-light);
   font-size: 6em;
   line-height: 0;
   text-anchor: middle;
diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less
index 8229b6da5..2a4a1d552 100644
--- a/public/css/themes/icinga-light-theme.less
+++ b/public/css/themes/icinga-light-theme.less
@@ -1,5 +1,3 @@
 
-@gray-semilight: #A9A9A9;
-@gray-light: #C9C9C9;
 @gray-lighter: #EEEEEE;
 @gray-lightest: #F7F7F7;