From 8808b4fb9bd9bfbcf95dda3cd1a53ec060342003 Mon Sep 17 00:00:00 2001 From: ngc2207 Date: Mon, 9 Dec 2024 16:48:38 +0800 Subject: [PATCH] feat(theme): add theme switching functionality with ModeSwitcher and ThemeProvider --- package.json | 1 + src/app/dashboard/layout.tsx | 2 ++ src/app/layout.tsx | 10 +++++++++- src/components/mode-switcher.tsx | 26 ++++++++++++++++++++++++++ src/components/theme-provider.tsx | 11 +++++++++++ 5 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 src/components/mode-switcher.tsx create mode 100644 src/components/theme-provider.tsx diff --git a/package.json b/package.json index c6f03e8..f304634 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "lucide-react": "^0.468.0", "next": "15.0.4", "next-auth": "^5.0.0-beta.25", + "next-themes": "^0.4.4", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^2.5.5", diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index aa09dac..c81eed9 100644 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -14,6 +14,7 @@ import { import { SessionProvider } from "next-auth/react"; import { AppSidebar } from "@/components/app-sidebar"; import { Separator } from "@/components/ui/separator"; +import { ModeSwitcher } from "@/components/mode-switcher"; import ConfirmationDialog from "@/dialogs/ConfirmationDialog"; export default function DashboardLayout({ @@ -27,6 +28,7 @@ export default function DashboardLayout({
+ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ee7f1f3..0d3f843 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import "@/app/globals.css"; import { cn } from "@/lib/utils"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; +import { ThemeProvider } from "@/components/theme-provider"; const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }); @@ -21,7 +22,14 @@ export default function RootLayout({ -
{children}
+ +
{children}
+ ); diff --git a/src/components/mode-switcher.tsx b/src/components/mode-switcher.tsx new file mode 100644 index 0000000..30a5119 --- /dev/null +++ b/src/components/mode-switcher.tsx @@ -0,0 +1,26 @@ +"use client"; + +import * as React from "react"; +import { useTheme } from "next-themes"; +import { Sun, Moon } from "lucide-react"; +import { Button } from "@/components/ui/button"; + +export function ModeSwitcher() { + const { setTheme, resolvedTheme } = useTheme(); + + const toggleTheme = React.useCallback(() => { + setTheme(resolvedTheme === "dark" ? "light" : "dark"); + }, [resolvedTheme, setTheme]); + + return ( + + ); +} 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}; +}