Fix date range picker in dark mode, improve light mode.

Fixes #421.
emaijala · Dec 17, 2024 · 5469db5 · 5469db5
1 parent bd8fb66
commit 5469db5
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 2 deletions.
diff --git a/css/_daterangepicker_overrides.scss b/css/_daterangepicker_overrides.scss
@@ -0,0 +1,79 @@
+@use "sass:color";
+
+.daterangepicker {
+    color: inherit;
+    background-color: inherit;
+    .ranges li {
+        &.active {
+            color: #fff;
+            background-color: var(--#{$prefix}primary);
+        }
+        &:hover {
+            color: #fff;
+            background-color: var(--#{$prefix}primary);
+        }
+    }
+}
+
+.daterangepicker
+
+.daterangepicker .ranges li.active {
+    color: #fff;
+    background-color: var(--#{$prefix}primary);
+}
+
+.daterangepicker .calendar-table {
+    border: 1px solid var(--#{$prefix}body-color);
+    border-radius: 4px;
+    background-color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+    font-size: 80%;
+    color: #ccc;
+}
+
+.daterangepicker td.in-range {
+    background-color: var(--#{$prefix}primary-bg-subtle);
+    color: var(--#{$prefix}primary-text-emphasis);
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: var(--#{$prefix}primary);
+    color: #fff;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+    background-color: var(--#{$prefix}primary);
+    border-color: transparent;
+    color: #fff;
+}
+
+// Dark theme
+[data-bs-theme=dark] {
+    .daterangepicker td.week, .daterangepicker th.week {
+        color: #444;
+    }
+
+    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+        background-color: inherit;
+        color: #999;
+    }
+
+    .daterangepicker.show-ranges.single.rtl .drp-calendar.left {
+        border-right: 1px solid #333;
+    }
+
+    .daterangepicker.show-ranges.single.ltr .drp-calendar.left {
+        border-left: 1px solid #333;
+    }
+
+    .daterangepicker.show-ranges.rtl .drp-calendar.right {
+        border-right: 1px solid #333;
+    }
+
+    .daterangepicker.show-ranges.ltr .drp-calendar.left {
+        border-left: 1px solid #333;
+    }
+}
+
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/style.scss b/css/style.scss
@@ -5,6 +5,8 @@
 @import "../node_modules/select2/src/scss/core";
 @import "../node_modules/select2-bootstrap-5-theme/src/include-all";
 
+@import "daterangepicker_overrides";
+
 html {
   height: 100%;
   font-size: 0.8rem;