diff --git a/bun.lockb b/bun.lockb index def0529..099e70a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 06124fe..232461f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "clsx": "^2.1.1", "lucide-react": "^0.474.0", "next": "15.1.6", + "next-themes": "^0.4.4", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^2.6.0", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f7fa87e..735557d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ +import "@/app/globals.css"; import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; +import { ThemeProvider } from "@/components/theme-provider"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -17,17 +18,24 @@ export const metadata: Metadata = { description: "Generated by create next app", }; -export default function RootLayout({ - children, -}: Readonly<{ +interface RootLayoutProps { children: React.ReactNode; -}>) { +} + +export default function RootLayout({ children }: RootLayoutProps) { return ( - + - {children} + + {children} + ); diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx new file mode 100644 index 0000000..189a2b1 --- /dev/null +++ b/src/components/theme-provider.tsx @@ -0,0 +1,11 @@ +"use client"; + +import * as React from "react"; +import { ThemeProvider as NextThemesProvider } from "next-themes"; + +export function ThemeProvider({ + children, + ...props +}: React.ComponentProps) { + return {children}; +} diff --git a/src/components/theme-switcher.tsx b/src/components/theme-switcher.tsx new file mode 100644 index 0000000..1c4cf63 --- /dev/null +++ b/src/components/theme-switcher.tsx @@ -0,0 +1,74 @@ +"use client"; + +import Image from "next/image"; +import { useTheme } from "next-themes"; +import { Check, Minus } from "lucide-react"; +import { useEffect, useState } from "react"; +import { Skeleton } from "@/components/ui/skeleton"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; + +const items = [ + { value: "light", label: "Light", image: "/ui-light.png" }, + { value: "dark", label: "Dark", image: "/ui-dark.png" }, + { value: "system", label: "System", image: "/ui-system.png" }, +]; + +export default function ThemeSwitcher() { + const { theme, setTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return ( +
+ {items.map((item) => ( +
+ + +
+ ))} +
+ ); + } + + return ( + + {items.map((item) => ( + + ))} + + ); +}