ENHANCEMENT: a better dark theme

Because hot water appears to be invented already

assets/scss/base.scss

@@ -1,93 +1,2 @@
 @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;
-      }
-    }
-  }
-
-}
+@import "~bootstrap-dark-5/dist/css/bootstrap-dark.css";

assets/scss/job/add.scss

@@ -1,3 +1,3 @@
-@import "../base";
-@import "../icons";
+@import "assets/scss/base";
+@import "assets/scss/icons";
 @import "~@eonasdan/tempus-dominus/dist/css/tempus-dominus.css";

assets/scss/job/index.scss

@@ -1,40 +1,19 @@
-@import "../base";
-@import "../icons";
+@import "assets/scss/base";
+@import "assets/scss/icons";
 
 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;
-      }
-    }
+    background-color: initial;
   }
 }
 
 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;
-      }
-    }
+    background-color: initial;
   }
 }
 

assets/scss/job/view.scss

@@ -1 +1 @@
-@import "../base";
+@import "assets/scss/base";

assets/scss/security/login.scss

@@ -1,2 +1 @@
-@import "~bootstrap/dist/css/bootstrap.css";
 @import "assets/scss/base";

package.json

@@ -8,7 +8,8 @@
   "dependencies": {
     "@eonasdan/tempus-dominus": "^6.0.0-alpha14",
     "@popperjs/core": "^2.10.2",
-    "bootstrap": "^5.1.3"
+    "bootstrap": "^5.1.3",
+    "bootstrap-dark-5": "^1.1.3"
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^1.6.1",