css: Apply theme mode also to the datetime picker

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)

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);