From 5187f1062d3f2fcaa7db435dd2c7e4e609f43016 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Wed, 17 Nov 2021 13:58:09 +0100
Subject: [PATCH] BUGFIX: datepicker didn't have a dark theme

---
 assets/scss/job/add.scss             |  1 +
 assets/scss/tempus-dominus-dark.scss | 85 ++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 assets/scss/tempus-dominus-dark.scss

diff --git a/assets/scss/job/add.scss b/assets/scss/job/add.scss
index 709f3f9..1bb0389 100644
--- a/assets/scss/job/add.scss
+++ b/assets/scss/job/add.scss
@@ -1,3 +1,4 @@
 @import "assets/scss/base";
 @import "assets/scss/icons";
 @import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";
+@import "assets/scss/tempus-dominus-dark";
\ No newline at end of file
diff --git a/assets/scss/tempus-dominus-dark.scss b/assets/scss/tempus-dominus-dark.scss
new file mode 100644
index 0000000..88744e8
--- /dev/null
+++ b/assets/scss/tempus-dominus-dark.scss
@@ -0,0 +1,85 @@
+$td-active-bg-alt: #375a7f !default;
+$td-active-color-alt: #222 !default;
+$td-btn-hover-bg-alt: #515151 !default;
+$td-disabled-color-alt: #b1b1b1 !default;
+$td-alternate-color-alt: #7e7e7e !default;
+$white-alt: #222 !default;
+
+@media (prefers-color-scheme: dark) {
+  .tempus-dominus-widget {
+    background-color: #222;
+
+    [data-action] {
+      &.disabled,
+      &.disabled:hover {
+        color: $td-disabled-color-alt;
+      }
+    }
+    .calendar-header {
+      color: $td-disabled-color-alt;
+    }
+
+    .toolbar {
+      & div {
+        color: $td-disabled-color-alt;
+
+        &:hover {
+          background: $td-btn-hover-bg-alt;
+        }
+      }
+    }
+
+    .date-container-days {
+
+      & .dow {
+        color: $td-disabled-color-alt;
+      }
+
+      & .cw {
+        color: $td-alternate-color-alt;
+      }
+    }
+
+    .date-container-decades, .date-container-years, .date-container-months, .date-container-days,
+    .time-container-clock, .time-container-hour, .time-container-minute, .time-container-second {
+      div:not(.no-highlight) {
+
+        &:hover {
+          background: $td-btn-hover-bg-alt;
+        }
+
+        &.active {
+          background-color: $td-active-bg-alt;
+          color: $td-active-color-alt;
+        }
+
+        &.active.today:before {
+          border-bottom-color: $white-alt;
+        }
+
+        &.old,
+        &.new {
+          color: $td-alternate-color-alt;
+        }
+
+        &.disabled,
+        &.disabled:hover {
+          color: $td-disabled-color-alt;
+        }
+
+        &.today {
+
+          &:before {
+            border-bottom-color: $td-active-bg-alt;
+          }
+        }
+      }
+    }
+
+    button {
+      color: $white-alt;
+      background-color: $td-active-bg-alt;
+      border-color: $td-active-bg-alt;
+    }
+  }
+}