handle default dark theme & install next-themes

2024-09-27 15:41:17 +03:30
parent 68f75cd5f7
commit 3fe2b8ee85
9 changed files with 63 additions and 16 deletions
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}
@@ -1,6 +1,7 @@
 import "./globals.css";
 import ThemeRegistry from "./component/ThemeRegistry";
 import "jalaali-react-date-picker/lib/styles/index.css";
+import { Providers } from "./Providers";

 export const metadata = {
  title: "نوبت724",
@@ -13,9 +14,11 @@ export const metadata = {

 export default function RootLayout({ children }) {
  return (
-    <html lang="fa" dir="rtl">
+    <html lang="fa" dir="rtl" suppressHydrationWarning>
      <ThemeRegistry>
-        <body className="bg-[#FAFAFA]">{children}</body>
+        <body className="bg-[#FAFAFA]">
+          <Providers>{children}</Providers>
+        </body>
      </ThemeRegistry>
    </html>
  );
@@ -48,7 +48,7 @@ function LayoutPanel({ children }) {
          setActive={setActive}
          disableProfile={pathname.includes("dashboard")}
        />
-        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
+        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA] dark:bg-[#1F1D2B]">
          {children}
        </section>
      </main>