From 05acbd0a3f63dad533e22fac20f050ede1fdc89f Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Wed, 23 Jun 2021 11:15:35 +0200
Subject: [PATCH] Integrate light theme's `@menu-bg-color` using a media query

---
 public/css/icinga/base.less               | 6 ++++++
 public/css/icinga/layout.less             | 6 +++---
 public/css/icinga/login.less              | 2 +-
 public/css/icinga/menu.less               | 8 ++++----
 public/css/icinga/tabs.less               | 2 +-
 public/css/themes/icinga-light-theme.less | 2 --
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index 2da48ccdc..14eeaead3 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -60,6 +60,8 @@
 
 // Menu colors
 @menu-bg-color: #06062B;
+@menu-hover-bg-color: fade(@menu-bg-color, 50%);
+@menu-search-hover-bg-color: darken(@menu-bg-color, 20%);
 @menu-active-bg-color: #181742;
 @menu-color: #DBDBDB;
 @menu-active-color: @text-color;
@@ -104,6 +106,10 @@
     --text-color-on-icinga-blue: #F5F9FA;
     --menu-flyout-bg-color: #F5F9FA;
     --tab-hover-bg-color: fade(#F5F9FA, 50%);
+
+    --menu-bg-color: #DEECF1;
+    --menu-hover-bg-color: fade(#DEECF1, 50%);
+    --menu-search-hover-bg-color: darken(#DEECF1, 20%);
   }
 }
 
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index cc962f74a..d94fa9fe2 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -32,7 +32,7 @@
 }
 
 #header-logo-container {
-  background: @menu-bg-color;
+  .var(background, menu-bg-color);
   height: 6em;
   padding: 1.25em;
   width: 16em;
@@ -141,7 +141,7 @@
 
 // Mobile menu
 #layout.minimal-layout #sidebar {
-  background-color: @menu-bg-color;
+  .var(background-color, menu-bg-color);
 }
 
 #mobile-menu-toggle {
@@ -332,7 +332,7 @@
   }
 
   #search:focus {
-    background-color: @menu-bg-color;
+    .var(background-color, menu-bg-color);
     border-radius: 0 .25em .25em 0;
     box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
     color: @menu-color;
diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less
index f57f080d3..0b3e10c39 100644
--- a/public/css/icinga/login.less
+++ b/public/css/icinga/login.less
@@ -4,7 +4,7 @@
 
 #login {
   height: 100%;
-  background-color: @menu-bg-color;
+  .var(background-color, menu-bg-color);
   background-repeat:  no-repeat;
   background-position: center center;
   text-align: center;
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index f8007c021..fe7192dab 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -10,7 +10,7 @@
 @icon-width: 1.7em; // 1.5em width + 0.2em right margin
 
 #menu {
-  background-color: @menu-bg-color;
+  .var(background-color, menu-bg-color);
   width: 100%;
   flex: 1;
   overflow: auto;
@@ -92,7 +92,7 @@
 
   &:not(.selected) > a:hover,
   &:not(.selected) > a:focus {
-    background-color: fade(@menu-bg-color, 50%)
+    .var(background-color, menu-hover-bg-color);
   }
 
   // Balance icon weight for non active menu items
@@ -222,7 +222,7 @@
 
   &:hover,
   &:focus {
-    background-color: darken(@menu-bg-color, 20);
+    .var(background-color, menu-search-hover-bg-color);
   }
 }
 
@@ -402,7 +402,7 @@
 
   &:focus,
   &:hover {
-    background-color: darken(@menu-bg-color, 20);
+    .var(background-color, menu-search-hover-bg-color);
     outline: none;
   }
 }
diff --git a/public/css/icinga/tabs.less b/public/css/icinga/tabs.less
index b23b78b72..666915376 100644
--- a/public/css/icinga/tabs.less
+++ b/public/css/icinga/tabs.less
@@ -3,7 +3,7 @@
 // Styles for tab navigation of containers
 
 .tabs {
-  background-color: @menu-bg-color;
+  .var(background-color, menu-bg-color);
   letter-spacing: -0.417em;
 }
 
diff --git a/public/css/themes/icinga-light-theme.less b/public/css/themes/icinga-light-theme.less
index a65b84855..4e60dc7da 100644
--- a/public/css/themes/icinga-light-theme.less
+++ b/public/css/themes/icinga-light-theme.less
@@ -7,8 +7,6 @@
 
 @text-color: #535353;
 
-@menu-bg-color: #DEECF1;
-
 @menu-color: #676767;
 @menu-active-bg-color: #EDF7FC;