dark mode page panel/dashboard

app/globals.css

@@ -486,6 +486,10 @@ html {
   background: #ff975d !important;
 }
 
+.panel-jalaali .highlight {
+  background: #5559ce !important;
+}
+
 .panel-jalaali .panel-footer-wrapper,
 .panel-jalaali .panel-footer-rtl {
   display: none !important;
@@ -517,4 +521,82 @@ html {
   }
 }
 
+/* Dark Style */
+
+.dark tbody .MuiTableCell-root {
+  background: #222433;
+  border-color: #343645 !important;
+}
+
+.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline:hover,
+.dark .MuiInputBase-root .MuiOutlinedInput-notchedOutline {
+  border-color: #35343d !important;
+}
+
+.dark .MuiList-root {
+  background: #1f1d2b !important;
+  color: #a1a1a1 !important;
+}
+
+/* End Of Dark Style */
+
+/* Dark Date Picker */
+
+.dark .panel-elevation,
+.dark .panel-header-rtl,
+.dark .day-label-bar-inner-rtl,
+.dark .days-body {
+  background: #222433 !important;
+}
+
+.dark .icon-chevron-right::before,
+.dark .icon-chevron-left::before {
+  background: url(../public/assets/icons/arrow-right-light.svg) !important;
+}
+
+.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span {
+  color: #a1a1a1 !important;
+}
+
+.dark .MuiPaper-root {
+  box-shadow: 0px 4px 25px 10px #1f1d2b !important;
+  background: #222433 !important;
+  border: none !important;
+}
+
+.dark .panel-header-item-text,
+.dark .panel-header-year-picker span {
+  color: #a1a1a1 !important;
+}
+
+.dark .panel-date-holder-item span:hover {
+  color: #c7cef4 !important;
+}
+
+.dark .panel-jalaali .hovered:not(.disabled):hover {
+  background: transparent !important;
+}
+
+.dark .panel-jalaali .days-body .day.hovered:not(.weekend-day) span:hover {
+  color: #c7cef4 !important;
+}
+
+.dark .panel-jalaali .year-item,
+.dark .panel-jalaali .month-item {
+  color: #a1a1a1;
+}
+
+.dark .panel-jalaali .year-item:hover,
+.dark .panel-jalaali .month-item:hover {
+  background: rgba(199, 206, 244, 0.1) !important;
+}
+
+.dark .panel-jalaali .year-item-selected,
+.dark .panel-jalaali .month-item-selected {
+  background: #5559ce !important;
+  color: #fafafa;
+}
+
+/* End Of Dark Date Picker */
+
 /* End Date Picker Style */