hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle default dark theme & install next-themes

Browse Source
This commit is contained in:
Ehsan
2024-09-27 15:41:17 +03:30
parent 68f75cd5f7
commit 3fe2b8ee85
9 changed files with 63 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Providers.js
+11
View File
@@ -0,0 +1,11 @@
"use client";
import { ThemeProvider } from "next-themes";
export function Providers({ children }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
);
}
app/layout.js
+5 -2
View File
@@ -1,6 +1,7 @@
import "./globals.css"; import "./globals.css";
import ThemeRegistry from "./component/ThemeRegistry"; import ThemeRegistry from "./component/ThemeRegistry";
import "jalaali-react-date-picker/lib/styles/index.css"; import "jalaali-react-date-picker/lib/styles/index.css";
import { Providers } from "./Providers";
export const metadata = { export const metadata = {
title: "نوبت724", title: "نوبت724",
@@ -13,9 +14,11 @@ export const metadata = {
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="fa" dir="rtl"> <html lang="fa" dir="rtl" suppressHydrationWarning>
<ThemeRegistry> <ThemeRegistry>
<body className="bg-[#FAFAFA]">{children}</body> <body className="bg-[#FAFAFA]">
<Providers>{children}</Providers>
</body>
</ThemeRegistry> </ThemeRegistry>
</html> </html>
); );
app/panel/(layout)/layout.js
+1 -1
View File
@@ -48,7 +48,7 @@ function LayoutPanel({ children }) {
setActive={setActive} setActive={setActive}
disableProfile={pathname.includes("dashboard")} 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} {children}
</section> </section>
</main> </main>
components/layoutPanel/header/icons/Theme.js
+31
View File
@@ -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.js → components/layoutPanel/header/icons/index.js
+2 -12
View File
@@ -4,22 +4,12 @@ import MoonP from "@/components/icons/MoonP";
import NotificationP from "@/components/icons/NotificationP"; import NotificationP from "@/components/icons/NotificationP";
import SettingP from "@/components/icons/SettingP"; import SettingP from "@/components/icons/SettingP";
import SearchHeaderP from "@/components/icons/SearchHeaderP"; import SearchHeaderP from "@/components/icons/SearchHeaderP";
import Theme from "./Theme";
function Icons() { function Icons() {
return ( return (
<div className="flex items-center justify-start gap-[12px]"> <div className="flex items-center justify-start gap-[12px]">
<Button <Theme />
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>
<Button <Button
className=" className="
!p-[8px] !border-[#EFEFEF] !rounded-[8px] !p-[8px] !border-[#EFEFEF] !rounded-[8px]
components/layoutPanel/header/index.js
+1 -1
View File
@@ -1,4 +1,4 @@
import Icons from "./Icons"; import Icons from "./icons";
import Search from "./Search"; import Search from "./Search";
import SideButton from "./sideButton"; import SideButton from "./sideButton";
import MenuProfile from "./MenuProfile"; import MenuProfile from "./MenuProfile";
package-lock.json
Generated
+10
View File
@@ -23,6 +23,7 @@
"jalaali-react-date-picker": "^1.0.18", "jalaali-react-date-picker": "^1.0.18",
"jalali-moment": "^3.3.11", "jalali-moment": "^3.3.11",
"next": "14.2.3", "next": "14.2.3",
"next-themes": "^0.3.0",
"npm": "^10.8.2", "npm": "^10.8.2",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18", "react-dom": "^18",
@@ -14334,6 +14335,15 @@
} }
} }
}, },
"node_modules/next-themes": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
"integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
"peerDependencies": {
"react": "^16.8 || ^17 || ^18",
"react-dom": "^16.8 || ^17 || ^18"
}
},
"node_modules/next/node_modules/postcss": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
package.json
+1
View File
@@ -24,6 +24,7 @@
"jalaali-react-date-picker": "^1.0.18", "jalaali-react-date-picker": "^1.0.18",
"jalali-moment": "^3.3.11", "jalali-moment": "^3.3.11",
"next": "14.2.3", "next": "14.2.3",
"next-themes": "^0.3.0",
"npm": "^10.8.2", "npm": "^10.8.2",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18", "react-dom": "^18",
tailwind.config.js
+1
View File
@@ -15,4 +15,5 @@ module.exports = {
}, },
}, },
plugins: [], plugins: [],
darkMode: "class",
}; };