dark mode side bar panel page

app/globals.css

@@ -600,3 +600,13 @@ html {
 /* End Of Dark Date Picker */
 
 /* End Date Picker Style */
+
+.dark-active-icon svg path {
+  stroke: #5559ce !important;
+  fill: #5559ce !important;
+}
+
+.dark-deactive-icon svg path {
+  stroke: #a1a1a1 !important;
+  fill: #a1a1a1 !important;
+}

components/layoutPanel/sidebar/HeadMd.js

@@ -20,8 +20,8 @@ function HeadMd({ open, setOpen }) {
       <Button
         onClick={() => setOpen(!open)}
         className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
-                    !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320] 
+          !transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320]  dark:!bg-[#222433] dark:!border-[#343645]
-                ${open ? "!rotate-180" : "!rotate-0 !ml-[7px]"}`}
+        ${open ? "!rotate-180" : "!rotate-0 !ml-[7px]"}`}
       >
         <DoubleArrowLeftP />
       </Button>

components/layoutPanel/sidebar/Links.js

@@ -38,10 +38,14 @@ function Links({ open }) {
               variant="text"
               className={`
                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                ${item.src === pathname ? "!bg-[#5559CE]" : ""}
+                ${
+                  item.src === pathname
+                    ? "!bg-[#5559CE] dark:!bg-[#1F1D2B] dark-active-icon"
+                    : " dark-deactive-icon"
+                }
               `}
             >
-              <div className="p-[3px] bg-[#E5E9FF] rounded-[4px] w-fit">
+              <div className="p-[3px] bg-[#E5E9FF] dark:bg-transparent rounded-[4px] w-fit">
                 <div className="w-[20px] h-[20px]">{item.icon}</div>
               </div>
               <p
@@ -50,8 +54,8 @@ function Links({ open }) {
                                 ${open ? "opacity-100" : "md:opacity-0"}
                                 ${
                                   item.src === pathname
-                                    ? "!text-[#FAFAFA] !font-bold"
+                                    ? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
-                                    : "!text-[#525252] !font-medium"
+                                    : "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
                                 }
                             `}
               >