From e36414b8c27c817c8ae1a4dc5110badd03eaa12e Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Tue, 9 Nov 2021 15:54:16 +0100
Subject: [PATCH] NEW FEATURE: dark theme

Because sysadmins don't have a 9 to 5
---
 assets/scss/base.scss           | 94 ++++++++++++++++++++++++++++++++-
 assets/scss/job/index.scss      | 29 ++++++++++
 assets/scss/security/login.scss |  3 +-
 3 files changed, 124 insertions(+), 2 deletions(-)

diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index 3dc130c..2af0ab2 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -1 +1,93 @@
-@import "~bootstrap/dist/css/bootstrap.css";
\ No newline at end of file
+@import "~bootstrap/dist/css/bootstrap.css";
+
+$light-bgcolor: #ffffff;
+$light-textcolor: #212529;
+
+$dark-bgcolor: #212529;
+$dark-bordercolor: #656565;
+$dark-textcolor: #ffffff;
+
+body {
+  background-color: $light-bgcolor;
+  color: $light-textcolor;
+}
+
+.table {
+
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: $dark-bgcolor;
+    color: $dark-textcolor;
+  }
+
+  .table {
+    color: $dark-textcolor
+  }
+  .modal-content {
+    background-color: $dark-bgcolor;
+  }
+
+  .form-control {
+    border: 1px solid $dark-bordercolor;
+    background-color: $dark-bgcolor;
+    color: $dark-textcolor;
+
+    &:disabled {
+      border: 1px solid $dark-bordercolor;
+      background-color: $dark-bordercolor;
+      color: $dark-textcolor;
+    }
+
+    &:focus {
+      border: 1px solid $dark-bordercolor;
+      background-color: $dark-bgcolor;
+      color: $dark-textcolor;
+    }
+  }
+
+  .tempus-dominus-widget {
+    background-color: $dark-bgcolor;
+
+    .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-color: $dark-bordercolor
+        }
+
+
+        &.old,
+        &.new {
+          color: $dark-bordercolor;
+        }
+
+      }
+    }
+
+    .date-container-days .dow {
+      color: $dark-bordercolor
+    }
+
+    .toolbar {
+      div:hover {
+        background-color: $dark-bordercolor;
+      }
+    }
+  }
+
+  .accordion-item {
+    background-color: $dark-bgcolor;
+
+    .accordion-button {
+      background-color: $dark-bordercolor;
+      color: $dark-textcolor;
+
+      &:not(.collapsed) {
+        background-color: $dark-bgcolor;
+      }
+    }
+  }
+
+}
diff --git a/assets/scss/job/index.scss b/assets/scss/job/index.scss
index 015c816..c85d31a 100644
--- a/assets/scss/job/index.scss
+++ b/assets/scss/job/index.scss
@@ -3,10 +3,39 @@
 
 tr.norun td {
   background-color: #f8d7da;
+
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+    color: #f8d7da;
+
+    .btn-outline-danger {
+      color: #f8d7da;
+      border-color: #f8d7da;
+
+      &:hover {
+        background-color: #f8d7da;
+      }
+    }
+  }
 }
 
 tr.running td {
   background-color: #d4edda;
+
+
+  @media (prefers-color-scheme: dark) {
+    background-color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+    color: #d4edda;
+
+    .btn-outline-success {
+      color: #d4edda;
+      border-color: #d4edda;
+      &:hover {
+        background-color: #d4edda;
+      }
+    }
+  }
 }
 
 .big-icon {
diff --git a/assets/scss/security/login.scss b/assets/scss/security/login.scss
index 3dc130c..732267d 100644
--- a/assets/scss/security/login.scss
+++ b/assets/scss/security/login.scss
@@ -1 +1,2 @@
-@import "~bootstrap/dist/css/bootstrap.css";
\ No newline at end of file
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "assets/scss/base";
\ No newline at end of file