handle default dark theme & install next-themes

components/layoutPanel/header/icons/Theme.js

@@ -0,0 +1,31 @@
+import MoonP from "@/components/icons/MoonP";
+import { Button } from "@mui/material";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+
+function Theme() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  console.log(theme);
+
+  useState(() => setMounted(true), []);
+  return (
+    <Button
+      className="
+              !p-[8px] !border-[#EFEFEF] !rounded-[8px]
+              !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
+              !h-[32px] md:!h-[36px] lg:!h-[40px]
+              !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
+              !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
+          "
+      //   onClick={handleThemeSwitch}
+      onClick={() => setTheme(theme === 'light' ? 'dark' : "light")}
+      variant="outlined"
+    >
+      <MoonP />
+    </Button>
+  );
+}
+
+export default Theme;

components/layoutPanel/header/icons/index.js

@@ -4,22 +4,12 @@ import MoonP from "@/components/icons/MoonP";
 import NotificationP from "@/components/icons/NotificationP";
 import SettingP from "@/components/icons/SettingP";
 import SearchHeaderP from "@/components/icons/SearchHeaderP";
+import Theme from "./Theme";
 
 function Icons() {
   return (
     <div className="flex items-center justify-start gap-[12px]">
-      <Button
-        className="
-                    !p-[8px] !border-[#EFEFEF] !rounded-[8px]
-                    !w-[32px] md:!w-[36px] lg:!w-[40px]
-                    !h-[32px] md:!h-[36px] lg:!h-[40px]
-                    !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
-                    !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
-                "
-        variant="outlined"
-      >
-        <MoonP />
-      </Button>
+      <Theme />
       <Button
         className="
                     !p-[8px] !border-[#EFEFEF] !rounded-[8px]

components/layoutPanel/header/index.js

@@ -1,4 +1,4 @@
-import Icons from "./Icons";
+import Icons from "./icons";
 import Search from "./Search";
 import SideButton from "./sideButton";
 import MenuProfile from "./MenuProfile";