enable dark mode just in panel page

app/Providers.js

@@ -3,8 +3,14 @@
 import { ThemeProvider } from "next-themes";
 
 export function Providers({ children }) {
+  const isDark = window.location.pathname.includes("/panel");
+
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider
+      attribute={isDark ? "class" : "data-"}
+      defaultTheme="system"
+      enableSystem
+    >
       {children}
     </ThemeProvider>
   );

app/panel/(layout)/layout.js

@@ -31,17 +31,17 @@ function LayoutPanel({ children }) {
       <BgGray isActive={active} setIsActive={setActive} />
       <main
         className={`
-                w-full transition-all duration-500 dark:bg-[#1F1D2B]
+          w-full transition-all duration-500 dark:bg-[#1F1D2B]
-                ${
+          ${
-                  pathname.includes("dashboard")
+            pathname.includes("dashboard")
-                    ? open
+              ? open
-                      ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
+                ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
-                      : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
+                : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
-                    : open
+              : open
-                    ? "md:w-[calc(100%-243px)]"
+              ? "md:w-[calc(100%-243px)]"
-                    : "md:w-[calc(100%-96px)]"
+              : "md:w-[calc(100%-96px)]"
-                }
+          }
-            `}
+        `}
       >
         <Header
           data={Information}

components/dashboard/userAccount/Head.js

@@ -8,7 +8,7 @@ function Head({ user }) {
     <div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
       <div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
         <div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
-          <p className="text-[3B3B3B] text-[16px] font-bold">
+          <p className="text-[#3B3B3B] text-[16px] font-bold">
             {user.name}{" "}
             <span className="text-[#3B3B3B] text-[16px] font-normal">
               عزیز!

components/layoutPanel/header/icons/Theme.js

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 function Theme() {
   const [mounted, setMounted] = useState(false);
-  const { theme, setTheme, resolvedTheme } = useTheme();
+  const { theme, setTheme } = useTheme();
 
   useState(() => setMounted(true), []);
 

components/panel/dashboard/list/index.js

@@ -6,7 +6,7 @@ import ColTable from "../../ColTable";
 function List({ data, loading }) {
   return (
     <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-transparent md:dark:bg-[#222433] dark:border-transparent">
-      <div className="hidden items-center justify-between p-[16px] md:dark:flex">
+      <div className="items-center justify-between p-[16px] flex">
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
           لیست نوبت های پزشکان
         </p>