rannes.dev/titles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set up next-theme and dark mode with toggle example #5

Merged
christian merged 1 commits from next-themes into main 2024-05-17 09:16:36 +00:00
Conversation 0 Commits 1 Files Changed 6 +58 -4
6 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6dd60de8f4 - Show all commits

4
app/layout.tsx
View File

@ -1,7 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { NextUIProvider } from "@nextui-org/system"; import { Providers } from "./providers";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -18,7 +18,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<NextUIProvider>{children}</NextUIProvider> <Providers>{children}</Providers>
</body> </body>
</html> </html>
); );

8
app/page.tsx
View File

@ -2,13 +2,17 @@ import { getUsers } from "@/drizzle/db";
import SignIn from "@/components/SignIn"; import SignIn from "@/components/SignIn";
import { auth } from "@/auth"; import { auth } from "@/auth";
import { Session } from "next-auth"; import { Session } from "next-auth";
import { ThemeSwitcher } from "@/components/ThemeSwitcher";
export default async function Home() { export default async function Home() {
const users = await getUsers(); const users = await getUsers();
const session: Session | null = await auth(); const session: Session | null = await auth();
return ( return (
<main className="bg-black text-white"> <main>
<SignIn session={session} /> <div className="w-full h-full flex flex-col items-center">
<SignIn session={session} />
<ThemeSwitcher />
</div>
</main> </main>
); );
} }

14
app/providers.tsx Normal file
View File

@ -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 (
<NextUIProvider>
<NextThemesProvider attribute="class" defaultTheme="dark">
{children}
</NextThemesProvider>
</NextUIProvider>
);
}

25
components/ThemeSwitcher.tsx Normal file
View File

@ -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 (
<div>
The current theme is: {theme}
<Button onClick={() => setTheme("light")}>Light Mode</Button>
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
</div>
);
}

10
package-lock.json generated
View File

@ -19,6 +19,7 @@
"framer-motion": "^11.2.4", "framer-motion": "^11.2.4",
"next": "14.2.3", "next": "14.2.3",
"next-auth": "^5.0.0-beta.18", "next-auth": "^5.0.0-beta.18",
"next-themes": "^0.3.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^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": { "node_modules/next-tick": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz", "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",

1
package.json
View File

@ -20,6 +20,7 @@
"framer-motion": "^11.2.4", "framer-motion": "^11.2.4",
"next": "14.2.3", "next": "14.2.3",
"next-auth": "^5.0.0-beta.18", "next-auth": "^5.0.0-beta.18",
"next-themes": "^0.3.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1"
}, },