初始化模版工程

components/provider/Theme/theme-provider.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      forcedTheme="light"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}

components/provider/Theme/theme-toggle.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Button } from '@/components/ui/button'
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const isDark = resolvedTheme === 'dark'
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="icon"
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+      className="fixed top-4 right-4 z-50"
+      aria-label="Toggle theme"
+      title={isDark ? '切换到浅色模式' : '切换到深色模式'}
+    >
+      {isDark ? <Sun /> : <Moon />}
+    </Button>
+  )
+}