diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 574e44389..7b0920cd2 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -255,7 +255,7 @@
 .tactical div.box.header {
   margin: 10px;
   min-height: 8em;
-  color: @text-color-inverted;
+  .var(color, text-color-inverted);
   font-size: @font-size-dashboard;
 }
 
@@ -478,7 +478,7 @@ div.timeline-legend {
       font-weight: @font-weight-bold;
       font-size: 11px;
       text-align: center;
-      color: @text-color-inverted;
+      .var(color, text-color-inverted);
       padding-left: 5px;
       padding-right: 5px;
       padding-top: 2px;
diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less
index e851f6c88..3f83e927e 100644
--- a/modules/monitoring/public/css/tables.less
+++ b/modules/monitoring/public/css/tables.less
@@ -151,7 +151,7 @@
   &.state-critical,
   &.state-down {
     background-color: @color-critical;
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
@@ -162,7 +162,7 @@
 
   &.state-warning {
     background-color: @color-warning;
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
@@ -173,7 +173,7 @@
 
   &.state-unknown {
     background-color: @color-unknown;
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
@@ -184,7 +184,7 @@
 
   &.state-unreachable {
     background-color: @color-unreachable;
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index 7518b13a5..58225b8fc 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -354,7 +354,7 @@ form.inline {
   top: 0;
   left: 0;
 
-  background: @text-color-inverted;
+  .var(background, text-color-inverted);
   border-radius: 1em;
   border: 1px solid;
   .var(border-color, low-sat-blue);
diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less
index 0b3e10c39..42f52575e 100644
--- a/public/css/icinga/login.less
+++ b/public/css/icinga/login.less
@@ -125,7 +125,7 @@
     padding: 1em;
 
     a {
-      color: @text-color-inverted;
+      .var(color, text-color-inverted);
       font-weight: bold;
     }
   }
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 4355bffd0..faffc8a6e 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -110,11 +110,11 @@
 
 #menu ul:not(.nav-level-2) > .selected > a {
   background-color: @menu-highlight-color;
-  color: @text-color-inverted;
+  .var(color, text-color-inverted);
 
 
   &:hover {
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
   }
 
   &:after {
@@ -327,7 +327,7 @@
       }
 
       a.badge {
-         color: @text-color-inverted;
+        .var(color, text-color-inverted);
          flex: 0 1 auto;
          margin-right: 1em;
          padding: .25em;
@@ -521,7 +521,7 @@ html.no-js  #toggle-sidebar {
   }
 
   &.badge-nav-item a.badge {
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
     flex: 0 1 auto;
     margin-right: 1em;
     padding: .25em;
diff --git a/public/css/icinga/modal.less b/public/css/icinga/modal.less
index db06855ba..2aba4867b 100644
--- a/public/css/icinga/modal.less
+++ b/public/css/icinga/modal.less
@@ -67,7 +67,7 @@
     .var(background-color, "gray");
     border: none;
     border-radius: 50%;
-    color: @text-color-inverted;
+    .var(color, text-color-inverted);
     height: 1.5em;
     line-height: 1em;
     padding: 0;