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>