diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index b8cecd4ad..d02575d0c 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -264,12 +264,12 @@
 }
 
 div.box.ok_hosts.state_up {
-  background-color: @color-ok;
+  .var(background-color, color-ok);
   border: 1px solid white;
 }
 
 div.box.problem_hosts.state_down {
-  background-color: @color-critical;
+  .var(background-color, color-critical);
   border: 1px solid white;
 }
 
@@ -294,11 +294,11 @@ div.box.monitoringfeatures {
 
 div.box.monitoringfeatures div.box-separator {
   color: white;
-  background-color: @color-ok;
+  .var(background-color, color-ok);
 }
 
 div.box.monitoringfeatures div.feature-highlight {
-  background-color: @color-critical;
+  .var(background-color, color-critical);
 }
 
 div.box.monitoringfeatures a.feature-highlight {
@@ -358,7 +358,7 @@ div.box.process {
 }
 
 div.backend-running {
-  background: @color-ok;
+  .var(background, color-ok);
   color: white;
   text-align: center;
   margin-top: 1em;
@@ -370,7 +370,7 @@ div.backend-running {
 }
 
 div.backend-not-running {
-  background: @color-critical;
+  .var(background, color-critical);
   color: white;
   text-align: center;
   padding: 0.1em;
@@ -675,37 +675,37 @@ form.instance-features span.description, form.object-features span.description {
   padding: 0.66em 0.33em;
 
   .state-critical {
-    background-color: @color-critical;
+    .var(background-color, color-critical);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
 
   .state-ok {
-    background-color: @color-ok;
+    .var(background-color, color-ok);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
 
   .state-unknown {
-    background-color: @color-unknown;
+    .var(background-color, color-unknown);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
 
   .state-warning {
-    background-color: @color-warning;
+    .var(background-color, color-warning);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
 
   .state-down {
-    background-color: @color-down;
+    .var(background-color, color-down);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
 
   .state-up {
-    background-color: @color-up;
+    .var(background-color, color-up);
     .var(color, body-bg-color);
     padding: 0.2em;
   }
diff --git a/modules/monitoring/public/css/tables.less b/modules/monitoring/public/css/tables.less
index 1f7f6feea..1ea584e22 100644
--- a/modules/monitoring/public/css/tables.less
+++ b/modules/monitoring/public/css/tables.less
@@ -52,7 +52,7 @@
 
 // Link to unhandled services in the hosts overview
 .host-services-incidents {
-  color: @color-critical;
+  .var(color, color-critical);
   font-family: @font-family-wide;
   font-size: @font-size-small;
 }
@@ -141,55 +141,61 @@
 .state-col {
   &.state-ok,
   &.state-up {
-    border-left: @border-left-width solid @color-ok;
+    border-left: @border-left-width solid;
+    .var(border-left-color, color-ok);
   }
 
   &.state-pending {
-    border-left: @border-left-width solid @color-pending;
+    border-left: @border-left-width solid;
+    .var(border-left-color, color-pending);
   }
 
   &.state-critical,
   &.state-down {
-    background-color: @color-critical;
+    .var(background-color, color-critical);
     .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
       color: inherit;
-      border-left: @border-left-width solid @color-critical-handled;
+      border-left: @border-left-width solid;
+      .var(border-left-color, color-critical-handled);
     }
   }
 
   &.state-warning {
-    background-color: @color-warning;
+    .var(background-color, color-warning);
     .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
       color: inherit;
-      border-left: @border-left-width solid @color-warning-handled;
+      border-left: @border-left-width solid;
+      .var(border-left-color, color-warning-handled);
     }
   }
 
   &.state-unknown {
-    background-color: @color-unknown;
+    .var(background-color, color-unknown);
     .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
       color: inherit;
-      border-left: @border-left-width solid @color-unknown-handled;
+      border-left: @border-left-width solid;
+      .var(border-left-color, color-unknown-handled);
     }
   }
 
   &.state-unreachable {
-    background-color: @color-unreachable;
+    .var(background-color, color-unreachable);
     .var(color, text-color-inverted);
 
     &.handled {
       background-color: inherit;
       color: inherit;
-      border-left: @border-left-width solid @color-unreachable-handled;
+      border-left: @border-left-width solid;
+      .var(border-left-color, color-unreachable-handled);
     }
   }
 
diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less
index a05ad0be5..725899e42 100644
--- a/public/css/icinga/audit.less
+++ b/public/css/icinga/audit.less
@@ -40,15 +40,15 @@
     .var(color, gray-light);
 
     &.granted {
-      color: @color-granted;
+      .var(color, color-granted);
     }
 
     &.refused {
-      color: @color-refused;
+      .var(color, color-refused);
     }
 
     &.restricted {
-      color: @color-restricted;
+      .var(color, color-restricted);
     }
   }
 
@@ -72,11 +72,11 @@
     border-left-width: 2px;
 
     &.granted {
-      border-color: @color-granted;
+      .var(border-color, color-granted);
     }
 
     &.refused {
-      border-color: @color-refused;
+      .var(border-color, color-refused);
     }
   }
 
@@ -86,11 +86,11 @@
     border-bottom-width: 2px;
 
     &.granted {
-      border-color: @color-granted;
+      .var(border-color, color-granted);
     }
 
     &.refused {
-      border-color: @color-refused;
+      .var(border-color, color-refused);
     }
 
     &:first-child {
@@ -105,11 +105,13 @@
     .var(border-color, gray-lighter);
 
     &.granted {
-      border: 2px solid @color-granted;
+      border: 2px solid;
+      .var(border-color, color-granted);
     }
 
     &.refused {
-      border: 2px solid @color-refused;
+      border: 2px solid;
+      .var(border-color, color-refused);
     }
   }
 
diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index 08468187f..ec6312190 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -21,6 +21,7 @@
 @color-warning-handled: #ffcc66;
 @color-critical: #ff5566;
 @color-critical-handled: #ff99aa;
+@color-critical-accentuated: darken(@color-critical, 10%);
 @color-down: @color-critical;
 @color-down-handled: @color-critical-handled;
 @color-unknown: #aa44ff;
@@ -75,6 +76,11 @@
 @menu-flyout-color: @text-color;
 @tab-hover-bg-color: fade(@body-bg-color, 50%);
 
+// Form colors
+@form-info-bg-color: fade(@color-ok, 20%);
+@form-error-bg-color: fade(@color-critical, 30%);
+@form-warning-bg-color: fade(@color-warning, 40%);
+
 // Other colors
 @color-granted: #59cd59;
 @color-refused: #ee7373;
diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less
index e98cdffc8..678a6cbdd 100644
--- a/public/css/icinga/forms.less
+++ b/public/css/icinga/forms.less
@@ -292,7 +292,7 @@ form.icinga-form .form-controls {
   }
 
   input[type="submit"].btn-remove {
-    .button(~"var(--body-bg-color, @{body-bg-color})", @color-critical, darken(@color-critical, 10%));
+    .button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--color-critical, @{color-critical})", ~"var(--color-critical-accentuated, @{color-critical-accentuated})");
   }
 
   input[type="submit"].btn-cancel {
@@ -449,15 +449,15 @@ form.icinga-form {
 
   .form-notifications {
     &.info {
-      background-color: fade(@color-ok, 20%);
+      .var(background-color, form-info-bg-color);
     }
 
     &.error {
-      background-color: fade(@color-critical, 30%);
+      .var(background-color, form-error-bg-color);
     }
 
     &.warning {
-      background-color: fade(@color-warning, 40%);
+      .var(background-color, form-warning-bg-color);
     }
   }
 
diff --git a/public/css/icinga/health.less b/public/css/icinga/health.less
index b673edbbc..5c9fe01e0 100644
--- a/public/css/icinga/health.less
+++ b/public/css/icinga/health.less
@@ -11,19 +11,19 @@
 
   span {
     &.state-ok {
-      background-color: @color-ok;
+      .var(background-color, color-ok);
     }
 
     &.state-warning {
-      background-color: @color-warning;
+      .var(background-color, color-warning);
     }
 
     &.state-critical {
-      background-color: @color-critical;
+      .var(background-color, color-critical);
     }
 
     &.state-unknown {
-      background-color: @color-unknown;
+      .var(background-color, color-unknown);
     }
   }
 
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index 63f788a2a..382354524 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -224,8 +224,8 @@
   }
 
   &.error {
-    border-color: @color-down;
-    background: @color-down;
+    .var(border-color, color-down);
+    .var(background, color-down);
     .var(color, body-bg-color);
 
     .icon {
@@ -234,24 +234,24 @@
   }
 
   &.info {
-    border-color: @color-pending;
+    .var(border-color, color-pending);
 
     .icon {
-      color: @color-pending;
+      .var(color, color-pending);
     }
   }
 
   &.success {
-    border-color: @color-ok;
+    .var(border-color, color-ok);
 
     .icon {
-      color: @color-ok;
+      .var(color, color-ok);
     }
   }
 
   &.warning {
-    border-color: @color-warning;
-    background: @color-warning;
+    .var(border-color, color-warning);
+    .var(background, color-warning);
     .var(color, body-bg-color);
 
     .icon {
diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less
index 42f52575e..6d831afe0 100644
--- a/public/css/icinga/login.less
+++ b/public/css/icinga/login.less
@@ -56,7 +56,7 @@
   }
 
   .errors {
-    background-color: @color-critical;
+    .var(background-color, color-critical);
     color: white;
   }
 
@@ -118,7 +118,7 @@
   }
 
   .config-note {
-    background-color: @color-critical;
+    .var(background-color, color-critical);
     margin: 0 auto 2em auto; // Center horizontally w/ bottom margin
     max-width: 50%;
     min-width: 24em;
diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index b6bf8816e..c52967f5d 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -76,7 +76,7 @@
 }
 
 a:hover > .icon-cancel {
-  color: @color-critical;
+  .var(color, color-critical);
 }
 
 .icon-stateful {
@@ -376,7 +376,7 @@ a:hover > .icon-cancel {
 
 .module-dependencies {
   .unmet-dependencies {
-    background-color: @color-warning;
+    .var(background-color, color-warning);
     .var(color, text-color-on-icinga-blue);
     padding: .25em .5em;
     margin-left: -.5em;
@@ -394,7 +394,7 @@ a:hover > .icon-cancel {
     }
 
     .missing {
-      color: @color-critical;
+      .var(color, color-critical);
       font-weight: bold;
     }
   }
diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less
index 2624871ad..28917dc65 100644
--- a/public/css/icinga/mixins.less
+++ b/public/css/icinga/mixins.less
@@ -146,86 +146,86 @@
 // Mixin for stateful foreground colors, e.g. text or icons
 .fg-stateful {
   &.state-ok {
-    color: @color-ok;
+    .var(color, color-ok);
   }
   &.state-up {
-    color: @color-up;
+    .var(color, color-up);
   }
   &.state-warning {
-    color: @color-warning;
+    .var(color, color-warning);
     &.handled {
-      color: @color-warning-handled;
+      .var(color, color-warning-handled);
     }
   }
   &.state-critical {
-    color: @color-critical;
+    .var(color, color-critical);
     &.handled {
-      color: @color-critical-handled;
+      .var(color, color-critical-handled);
     }
   }
   &.state-down {
-    color: @color-down;
+    .var(color, color-down);
     &.handled {
-      color: @color-down-handled;
+      .var(color, color-down-handled);
     }
   }
   &.state-unreachable {
-    color: @color-unreachable;
+    .var(color, color-unreachable);
     &.handled {
-      color: @color-unreachable-handled;
+      .var(color, color-unreachable-handled);
     }
   }
   &.state-unknown {
-    color: @color-unknown;
+    .var(color, color-unknown);
     &.handled {
-      color: @color-unknown-handled;
+      .var(color, color-unknown-handled);
     }
   }
   &.state-pending {
-    color: @color-pending;
+    .var(color, color-pending);
   }
 }
 
 // Mixin for stateful background colors
 .bg-stateful {
   &.state-ok {
-    background-color: @color-ok;
+    .var(background-color, color-ok);
   }
   &.state-up {
-    background-color: @color-up;
+    .var(background-color, color-up);
   }
   &.state-warning {
-    background-color: @color-warning;
+    .var(background-color, color-warning);
     &.handled {
-      background-color: @color-warning-handled;
+      .var(background-color, color-warning-handled);
     }
   }
   &.state-critical {
-    background-color: @color-critical;
+    .var(background-color, color-critical);
     &.handled {
-      background-color: @color-critical-handled;
+      .var(background-color, color-critical-handled);
     }
   }
   &.state-down {
-    background-color: @color-down;
+    .var(background-color, color-down);
     &.handled {
-      background-color: @color-down-handled;
+      .var(background-color, color-down-handled);
     }
   }
   &.state-unreachable {
-    background-color: @color-unreachable;
+    .var(background-color, color-unreachable);
     &.handled {
-      background-color: @color-unreachable-handled;
+      .var(background-color, color-unreachable-handled);
     }
   }
   &.state-unknown {
-    background-color: @color-unknown;
+    .var(background-color, color-unknown);
     &.handled {
-      background-color: @color-unknown-handled;
+      .var(background-color, color-unknown-handled);
     }
   }
   &.state-pending {
-    background-color: @color-pending;
+    .var(background-color, color-pending);
   }
 }
 
diff --git a/public/css/icinga/setup.less b/public/css/icinga/setup.less
index e4e3bdafc..30071291b 100644
--- a/public/css/icinga/setup.less
+++ b/public/css/icinga/setup.less
@@ -104,7 +104,7 @@
         }
 
         &.complete {
-          background-color: @color-ok;
+          .var(background-color, color-ok);
         }
 
         &.visited {
@@ -228,7 +228,7 @@ form#setup_requirements {
       padding: 0.4em;
 
       &.fulfilled {
-        background-color: @color-ok;
+        .var(background-color, color-ok);
       }
 
       &.not-available {
@@ -237,7 +237,7 @@ form#setup_requirements {
       }
 
       &.missing {
-        background-color: @color-critical;
+        .var(background-color, color-critical);
       }
     }
   }
@@ -314,11 +314,11 @@ form#setup_requirements {
     color: white;
 
     &.success {
-      background-color: @color-ok;
+      .var(background-color, color-ok);
     }
 
     &.failure {
-      background-color: @color-critical;
+      .var(background-color, color-critical);
     }
   }
 
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index faa9c3e8e..2edfcec03 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -61,7 +61,7 @@
 }
 
 #application-state-summary > div {
-  background-color: @color-critical;
+  .var(background-color, color-critical);
   color: #fff;
   line-height: 1.5em;
   padding: 0.5em 1em 0.5em 3em;
@@ -239,15 +239,15 @@ form.role-form {
 
     .privilege-preview .icon {
       &.granted {
-        color: @color-granted;
+        .var(color, color-granted);
       }
 
       &.refused {
-        color: @color-refused;
+        .var(color, color-refused);
       }
 
       &.restricted {
-        color: @color-restricted;
+        .var(color, color-restricted);
       }
     }
   }
@@ -277,11 +277,11 @@ form.role-form {
         text-align: center;
 
         &.icon-ok {
-          color: @color-granted;
+          .var(color, color-granted);
         }
 
         &.icon-cancel {
-          color: @color-refused;
+          .var(color, color-refused);
         }
       }
     }
@@ -412,7 +412,7 @@ ul.tree li a {
 }
 
 ul.tree li a.error {
-  color: @color-critical-handled;
+  .var(color, color-critical-handled);
 }
 
 ul.tree li a:hover {
@@ -421,7 +421,7 @@ ul.tree li a:hover {
 }
 
 ul.tree li a.error:hover {
-  color: @color-critical;
+  .var(color, color-critical);
 }
 
 /* charts should grow as much as possible but never beyond the current viewport's size */
@@ -498,53 +498,53 @@ ul.tree li a.error:hover {
 }
 
 .slice-state-ok {
-  stroke: @color-ok;
-  background: @color-ok;
+  .var(stroke, color-ok);
+  .var(background, color-ok);
 }
 
 .slice-state-warning-handled {
-  stroke: @color-warning-handled;
-  background: @color-warning-handled;
+  .var(stroke, color-warning-handled);
+  .var(background, color-warning-handled);
 }
 
 .slice-state-warning {
-  stroke: @color-warning;
-  background: @color-unreachable-handled;
+  .var(stroke, color-warning);
+  .var(background, color-unreachable-handled);
 }
 
 .slice-state-critical-handled {
-  stroke: @color-critical-handled;
-  background: @color-critical-handled;
+  .var(stroke, color-critical-handled);
+  .var(background, color-critical-handled);
 }
 
 .slice-state-critical {
-  stroke: @color-critical;
-  background: @color-critical;
+  .var(stroke, color-critical);
+  .var(background, color-critical);
 }
 
 .slice-state-unknown-handled {
-  stroke: @color-unknown-handled;
-  background: @color-unknown-handled;
+  .var(stroke, color-unknown-handled);
+  .var(background, color-unknown-handled);
 }
 
 .slice-state-unknown {
-  stroke: @color-unknown;
-  background: @color-unknown;
+  .var(stroke, color-unknown);
+  .var(background, color-unknown);
 }
 
 .slice-state-unreachable-handled {
-  stroke: @color-unreachable-handled;
-  background: @color-unreachable-handled;
+  .var(stroke, color-unreachable-handled);
+  .var(background, color-unreachable-handled);
 }
 
 .slice-state-unreachable {
-  stroke: @color-unreachable;
-  background: @color-unreachable;
+  .var(stroke, color-unreachable);
+  .var(background, color-unreachable);
 }
 
 .slice-state-pending {
-  stroke: @color-pending;
-  background: @color-pending;
+  .var(stroke, color-pending);
+  .var(background, color-pending);
 }
 
 .slice-state-not-checked {
@@ -585,7 +585,7 @@ ul.tree li a.error:hover {
 }
 
 .donut-label-big-eye-catching {
-  color: @color-critical;
+  .var(color, color-critical);
 }
 
 .donut-label-small {