diff --git a/app/layout.tsx b/app/layout.tsx
index 1325844..47ee209 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
-import { NextUIProvider } from "@nextui-org/system";
+import { Providers } from "./providers";
const inter = Inter({ subsets: ["latin"] });
@@ -18,7 +18,7 @@ export default function RootLayout({
return (
- {children}
+ {children}
);
diff --git a/app/page.tsx b/app/page.tsx
index 4e1f965..233bd16 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,13 +2,17 @@ import { getUsers } from "@/drizzle/db";
import SignIn from "@/components/SignIn";
import { auth } from "@/auth";
import { Session } from "next-auth";
+import { ThemeSwitcher } from "@/components/ThemeSwitcher";
export default async function Home() {
const users = await getUsers();
const session: Session | null = await auth();
return (
-
-
+
+
+
+
+
);
}
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..66dc7f5
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { NextUIProvider } from "@nextui-org/react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..c99f558
--- /dev/null
+++ b/components/ThemeSwitcher.tsx
@@ -0,0 +1,25 @@
+// app/components/ThemeSwitcher.tsx
+"use client";
+
+import { Button } from "@nextui-org/button";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeSwitcher() {
+ const [mounted, setMounted] = useState(false);
+ const { theme, setTheme } = useTheme();
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ return (
+
+ The current theme is: {theme}
+
+
+
+ );
+}
diff --git a/package-lock.json b/package-lock.json
index 15901b1..6bc8f0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"framer-motion": "^11.2.4",
"next": "14.2.3",
"next-auth": "^5.0.0-beta.18",
+ "next-themes": "^0.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
@@ -7280,6 +7281,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-tick": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
diff --git a/package.json b/package.json
index 34ef1bf..9e4733f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"framer-motion": "^11.2.4",
"next": "14.2.3",
"next-auth": "^5.0.0-beta.18",
+ "next-themes": "^0.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},