feat: Dark Mode (#7471)

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -1,66 +1,64 @@
 @import '~vue2-datepicker/scss/index';
 
 .mx-datepicker-popup {
-  z-index: 99999;
+  @apply z-[99999];
 }
 
 .date-picker {
   &.no-margin {
     .mx-input {
-      margin-bottom: 0;
+      @apply mb-0;
     }
   }
 
   &:not(.auto-width) {
     .mx-datepicker-range {
-      width: 320px;
+      @apply w-[320px];
     }
   }
 
   .mx-datepicker {
-    width: 100%;
+    @apply w-full;
   }
 
   .mx-input {
-    border: 1px solid var(--s-200);
-    border-radius: var(--border-radius-normal);
-    box-shadow: none;
-    display: flex;
-    height: 2.5rem;
+    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
   }
 
   .mx-input:disabled,
   .mx-input[readonly] {
-    background-color: var(--white);
-    cursor: pointer;
+    @apply bg-white dark:bg-slate-900 cursor-pointer;
   }
 }
 
+.mx-calendar-content .cell:hover {
+  @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
+}
+
 .mx-datepicker-inline {
-  width: 100%;
+  @apply w-full;
 
   .mx-calendar {
-    width: 100%;
+    @apply w-full;
   }
 
   .cell.disabled {
-    background-color: var(--s-25);
-    color: var(--s-200);
+    @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
   }
 
   .mx-time-item.disabled {
-    background-color: var(--s-25);
+    @apply bg-slate-25 dark:bg-slate-900;
   }
 
   .today {
-    font-weight: var(--font-weight-bold);
+    @apply font-semibold;
   }
 
   .mx-datepicker-main {
-    border: 0;
+    @apply border-0 bg-white dark:bg-slate-800;
   }
 
   .mx-time-header {
-    border: 0;
+    @apply border-0;
   }
 }