diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index 7cecc9c9e..266e61dc0 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -113,10 +113,11 @@
 @vertical-padding: 0.5em; // 6px
 @horizontal-padding: 1em; // 12px
 
-@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
-
+@light-mode: {
   @light-body-bg-color: #F5F9FA;
 
+  @iplWebLightRules();
+
   :root {
     --body-bg-color: @light-body-bg-color;
     --body-bg-color-transparent: fade(@light-body-bg-color, 0);
@@ -151,7 +152,7 @@
     --gray-lighter: #e8ecef;
     --gray-lightest: #F7F7F7;
   }
-}
+};
 
 // Make padding not affect the final computed width of an element
 html {
@@ -293,11 +294,11 @@ td, th {
   }
 }
 
-@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
+@light-mode: {
   .container {
     &:before,
     > .content:before {
       background-image: url(../img/icinga-loader-light.gif)
     }
   }
-}
+};
diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less
index 8d89f952c..01cf1526d 100644
--- a/public/css/icinga/controls.less
+++ b/public/css/icinga/controls.less
@@ -43,13 +43,13 @@ input.search {
   }
 }
 
-@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
+@light-mode: {
   #menu input.search,
   .controls input.search,
   input.search {
     background-image: url(../img/icons/search.png);
   }
-}
+};
 
 .backend-selection,
 .pagination-control,
@@ -241,7 +241,7 @@ input.search {
   }
 }
 
-@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
+@light-mode: {
   :root {
     // These are actually the default colors for the flatpickr
 
@@ -276,6 +276,6 @@ input.search {
     --fp-hoverNumChooserBg: fadeout(black, 90%);
     --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
   }
-}
+};
 
 // Datetime picker colors (end)
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index e6570c613..f2a97e100 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -366,10 +366,10 @@
   }
 }
 
-@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
+@light-mode: {
   #header-logo,
   #mobile-menu-logo,
   #about .icinga-logo {
     filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
   }
-}
+};