feat: theming

poooi · Sep 29, 2024 · cadd96d · cadd96d
1 parent fbbeb4a
commit cadd96d
Show file tree

Hide file tree

Showing 8 changed files with 402 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@cloudflare/next-on-pages": "^1.13.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
@@ -22,6 +23,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.446.0",
     "next": "^14.2.4",
+    "next-themes": "^0.3.0",
     "polished": "^4.3.1",
     "random": "^5.1.0",
     "react": "^18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { GeistSans } from 'geist/font/sans'
 import { type Metadata } from 'next'
 
 import { Background } from '~/components/background'
+import { ThemeProvider } from '~/components/theme-provider'
 
 export const metadata: Metadata = {
   title: 'Create T3 App',
@@ -15,10 +16,21 @@ export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en" className={`${GeistSans.variable}`}>
+    <html
+      lang="en"
+      className={`${GeistSans.variable}`}
+      suppressHydrationWarning
+    >
       <body>
-        <Background />
-        {children}
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Background />
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,9 @@
+import { ThemeChooser } from '~/components/theme-chooser'
+
 export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center"></main>
+    <main className="flex min-h-screen flex-col items-center justify-center">
+      <ThemeChooser />
+    </main>
   )
 }
diff --git a/src/components/background.tsx b/src/components/background.tsx
@@ -2,6 +2,7 @@
 
 import debounce from 'lodash/debounce'
 import times from 'lodash/times'
+import { useTheme } from 'next-themes'
 import { rgba } from 'polished'
 import random from 'random'
 import { useEffect, useRef } from 'react'
@@ -57,18 +58,14 @@ const getRandomXY = (w: number, h: number) => {
 
 export const Background = () => {
   const canvas = useRef<HTMLCanvasElement>(null)
-
-  // const theme = useContext(ThemeContext)
-
-  const drawCanvasRef = useRef<() => void>()
+  const { theme } = useTheme()
 
   useEffect(() => {
     const drawCanvas = () => {
       const foreground = `hsl(${getComputedStyle(
         document.documentElement,
       ).getPropertyValue('--foreground')})`
 
-      console.log(foreground)
       if (!canvas.current) {
         return
       }
@@ -97,14 +94,15 @@ export const Background = () => {
       })
     }
 
-    if (drawCanvasRef.current) {
-      window.removeEventListener('resize', drawCanvasRef.current)
-    }
-    drawCanvasRef.current = debounce(drawCanvas, 100)
+    const debouncedDrawCanvas = debounce(drawCanvas, 100)
 
-    drawCanvas()
-    window.addEventListener('resize', drawCanvasRef.current)
-  }, [canvas])
+    // in current approach, the color is read from computed style, need to wait for theme change happen in DOM
+    requestAnimationFrame(drawCanvas)
+    window.addEventListener('resize', debouncedDrawCanvas)
+    return () => {
+      window.removeEventListener('resize', debouncedDrawCanvas)
+    }
+  }, [theme])
 
   return <canvas className="-z-1 t-0 l-0 fixed bg-background" ref={canvas} />
 }
diff --git a/src/components/theme-chooser.tsx b/src/components/theme-chooser.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { MoonIcon, SunIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '~/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu'
+
+export const ThemeChooser = () => {
+  const { theme, setTheme } = useTheme()
+
+  console.log('theme', theme)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          title="设置主题"
+          aria-label="设置主题"
+        >
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">设置主题</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+          <DropdownMenuRadioItem value="light">明</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="dark">暗</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="system">跟随系统</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ThemeProviderProps } from 'next-themes/dist/types'
+
+export const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}