dark mode page panel/dashboard

app/component/CustomTable.js

@@ -10,7 +10,7 @@ import {
 function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
   return (
     <TableContainer
-      className="!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
+      className="!shadow-none dark:!border-[#35343D] table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]"
       sx={{
         "&.MuiTableContainer-root": {
           borderRadius: zeroRadius && "0 !important",
@@ -19,18 +19,14 @@ function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
     >
       <Table className="!rounded-0 !shadow-none !overflow-hidden">
         <TableHead>
-          <TableRow className="!bg-[#EFEFEF]">
+          <TableRow className="!bg-[#EFEFEF] dark:!bg-[#343645]">
             {tableHead.map((item, idx) => (
               <TableCell
                 key={idx}
                 className={`
-                                !text-[#616161] !text-[14px] !font-normal !py-[10px] !px-[18px]
-                                ${
-                                  centerTable.includes(idx)
-                                    ? "!text-center"
-                                    : "!text-start"
-                                }
-                            `}
+                  !text-[#616161] dark:!border-none dark:!text-[#D7D8ED] !text-[14px] !font-normal !py-[10px] !px-[18px]
+                  ${centerTable.includes(idx) ? "!text-center" : "!text-start"}
+                `}
               >
                 {item}
               </TableCell>

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 */