8000 add shadcn theme provider · xcodeassociated/nextjs-template@06adabd · GitHub
[go: up one dir, main page]
Skip to content

Commit 06adabd

Browse files
xcodeassociatedxcodeassociated
committed
add shadcn theme provider
1 parent f42a155 commit 06adabd

File tree

9 files changed

+310
-22
lines changed

9 files changed

+310
-22
lines changed

‎bun.lockb

17.7 KB
Binary file not shown.

‎package-lock.json

Lines changed: 45 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@radix-ui/react-dropdown-menu": "^2.1.1",
1213
"@radix-ui/react-slot": "^1.1.0",
1314
"class-variance-authority": "^0.7.0",
1415
"clsx": "^2.1.1",
1516
"lucide-react": "^0.403.0",
1617
"next": "14.2.4",
18+
"next-themes": "^0.3.0",
1719
"react": "^18",
1820
"react-dom": "^18",
1921
"tailwind-merge": "^2.4.0",

‎src/app/layout.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
3-
import { Inter as FontSans } from "next/font/google"
4-
import { cn } from "@/lib/utils"
5-
6-
7-
const fontSans = FontSans({
8-
subsets: ["latin"],
9-
variable: "--font-sans",
10-
})
3+
import { ThemeProvider } from "@/components/theme-provider"
114

125
export const metadata: Metadata = {
136
title: "Create Next App",
@@ -20,13 +13,16 @@ export default function RootLayout({
2013
children: React.ReactNode;
2114
}>) {
2215
return (
23-
<html lang="en">
24-
<body
25-
className={cn(
26-
"min-h-screen bg-background font-sans antialiased",
27-
fontSans.variable
28-
)}
29-
>{children}
16+
<html lang="en" suppressHydrationWarning>
17+
<body>
18+
<ThemeProvider
19+
attribute="class"
20+
defaultTheme="system"
21+
enableSystem
22+
disableTransitionOnChange
23+
>
24+
{children}
25+
</ThemeProvider>
3026
</body>
3127
</html>
3228
);

‎src/app/page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Image from "next/image";
22
import {Button} from "@/components/ui/button";
3+
import {ModeToggle} from "@/components/custom/mode-toggle";
34

45
export default function Home() {
56
return (
@@ -10,6 +11,8 @@ export default function Home() {
1011
<code className="font-mono font-bold">src/app/page.tsx</code>
1112
</p>
1213
<Button>Click</Button>
14+
<ModeToggle />
15+
test
1316
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
1417
<a
1518
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"

‎src/components/custom/mode-toggle.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { Moon, Sun } from "lucide-react"
5+
import { useTheme } from "next-themes"
6+
7+
import { Button } from "@/components/ui/button"
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from "@/components/ui/dropdown-menu"
14+
15+
export function ModeToggle() {
16+
const { setTheme } = useTheme()
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="outline" size="icon">
22+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme("light")}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme("dark")}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme("system")}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
)
40+
}

‎src/components/theme-provider.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { ThemeProvider as NextThemesProvider } from "next-themes"
5+
import { type ThemeProviderProps } from "next-themes/dist/types"
6+
7+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
9+
}

0 commit comments

Comments
 (0)
0