From 3b6a10ecaabcd7093a2535c8a1cc21c972771877 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 24 Jun 2021 17:33:28 +0200
Subject: [PATCH] css: Apply theme mode also to the datetime picker

---
 public/css/icinga/controls.less       | 66 +++++++++++++++++++++++++++
 public/css/themes/solarized-dark.less | 27 -----------
 2 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less
index 1d6ce8d62..1a500912b 100644
--- a/public/css/icinga/controls.less
+++ b/public/css/icinga/controls.less
@@ -213,3 +213,69 @@ input.search {
     max-height: 2em;
   }
 }
+
+// Datetime picker colors
+
+// The less variables are essentially the official dark theme for the flatpickr
+@fp-calendarBackground: #3f4458;
+@fp-calendarBorderColor: darken(#3f4458, 50%);
+
+@fp-monthForeground: #fff;
+@fp-monthBackground: #3f4458;
+
+@fp-weekdaysBackground: transparent;
+@fp-weekdaysForeground: #fff;
+
+@fp-dayForeground: fadeout(white, 5%);
+@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%);
+
+@fp-todayColor: #eee;
+@fp-today_fg_color: #3f4458;
+
+@fp-selectedDayBackground: #80CBC4;
+
+.icinga-datetime-picker .flatpickr-day.today {
+  &:hover,
+  &:focus {
+    .var(color, fp-today_fg_color);
+  }
+}
+
+@media (min-height: @prefer-light-color-scheme), (prefers-color-scheme: light) and (min-height: @enable-color-preference) {
+  :root {
+    // These are actually the default colors for the flatpickr
+
+    @fp-dayForeground: #393939;
+    @fp-dayHoverBackground: #e6e6e6;
+
+    --fp-calendarBackground: #ffffff;
+    --fp-calendarBorderColor: @fp-dayHoverBackground;
+
+    --fp-arrowColor: fadeout(@fp-dayForeground, 40%);
+    --fp-arrow_hover_color: #f64747;
+
+    --fp-monthForeground: fadeout(black, 10%);
+    --fp-monthBackground: transparent;
+
+    --fp-weekdaysBackground: transparent;
+    --fp-weekdaysForeground: fadeout(black, 46%);
+    --fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%);
+
+    --fp-dayForeground: @fp-dayForeground;
+    --fp-dayHoverBackground: @fp-dayHoverBackground;
+    --fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%);
+    --fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%);
+    --fp-selectedDayBackground: #569FF7;
+    --fp-todayColor: #959ea9;
+
+    --fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3);
+
+    --fp-hoverInvertedBg: fadeout(black, 95%);
+
+    --fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%);
+    --fp-hoverNumChooserBg: fadeout(black, 90%);
+    --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
+  }
+}
+
+// Datetime picker colors (end)
diff --git a/public/css/themes/solarized-dark.less b/public/css/themes/solarized-dark.less
index 3e6a90f89..c4cdd7687 100644
--- a/public/css/themes/solarized-dark.less
+++ b/public/css/themes/solarized-dark.less
@@ -57,33 +57,6 @@
 // Form colors
 @button-primary-color: lighten(@base02, 20);
 
-// Datetime picker colors
-@fp-calendarBackground: #3f4458;
-@fp-calendarBorderColor: darken(#3f4458, 50%);
-
-@fp-monthForeground: #fff;
-@fp-monthBackground: #3f4458;
-
-@fp-weekdaysBackground: transparent;
-@fp-weekdaysForeground: #fff;
-
-@fp-dayForeground: fadeout(white, 5%);
-@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%);
-
-@fp-todayColor: #eee;
-@fp-today_fg_color: #3f4458;
-
-@fp-selectedDayBackground: #80CBC4;
-
-.icinga-datetime-picker .flatpickr-day.today {
-  &:hover,
-  &:focus {
-    color: @fp-today_fg_color;
-  }
-}
-
-// Datetime picker colors (end)
-
 #sidebar {
   background-color: @base02;
   box-shadow: inset -0.5em 0 1em rgba(0,0,0,0.3);