From 3fe2b8ee85b5bfba96bfe9e766a00f48f22e31e7 Mon Sep 17 00:00:00 2001 From: Ehsan Date: Fri, 27 Sep 2024 15:41:17 +0330 Subject: [PATCH] handle default dark theme & install next-themes --- app/Providers.js | 11 +++++++ app/layout.js | 7 +++-- app/panel/(layout)/layout.js | 2 +- components/layoutPanel/header/icons/Theme.js | 31 +++++++++++++++++++ .../header/{Icons.js => icons/index.js} | 14 ++------- components/layoutPanel/header/index.js | 2 +- package-lock.json | 10 ++++++ package.json | 1 + tailwind.config.js | 1 + 9 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 app/Providers.js create mode 100644 components/layoutPanel/header/icons/Theme.js rename components/layoutPanel/header/{Icons.js => icons/index.js} (81%) diff --git a/app/Providers.js b/app/Providers.js new file mode 100644 index 0000000..61c2c84 --- /dev/null +++ b/app/Providers.js @@ -0,0 +1,11 @@ +"use client"; + +import { ThemeProvider } from "next-themes"; + +export function Providers({ children }) { + return ( + + {children} + + ); +} diff --git a/app/layout.js b/app/layout.js index 5d9a7e2..a027397 100644 --- a/app/layout.js +++ b/app/layout.js @@ -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 ( - + - {children} + + {children} + ); diff --git a/app/panel/(layout)/layout.js b/app/panel/(layout)/layout.js index efcefee..0d0e076 100644 --- a/app/panel/(layout)/layout.js +++ b/app/panel/(layout)/layout.js @@ -48,7 +48,7 @@ function LayoutPanel({ children }) { setActive={setActive} disableProfile={pathname.includes("dashboard")} /> -
+
{children}
diff --git a/components/layoutPanel/header/icons/Theme.js b/components/layoutPanel/header/icons/Theme.js new file mode 100644 index 0000000..cb1ed37 --- /dev/null +++ b/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 ( + + ); +} + +export default Theme; diff --git a/components/layoutPanel/header/Icons.js b/components/layoutPanel/header/icons/index.js similarity index 81% rename from components/layoutPanel/header/Icons.js rename to components/layoutPanel/header/icons/index.js index 6f83a41..55414ac 100644 --- a/components/layoutPanel/header/Icons.js +++ b/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 (
- +