feat(web): add auto theme switcher

duongdev · duongdev · commit 57bd4dc55537 · 2024-04-11T23:19:36.000+07:00
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -37,6 +37,7 @@
     "loglevel": "^1.9.1",
     "lucide-react": "^0.363.0",
     "next": "14.1.4",
+    "next-themes": "^0.3.0",
     "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18",
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -2,11 +2,12 @@ import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import { Provider as JotaiProvider } from 'jotai'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { DM_Sans } from 'next/font/google'
 
 import './globals.css'
+import { ThemeProvider } from '@/components/theme-provider'
 
-const inter = Inter({ subsets: ['latin'] })
+const fontFamily = DM_Sans({ subsets: ['latin'] })
 
 // eslint-disable-next-line react-refresh/only-export-components
 export const metadata: Metadata = {
@@ -20,16 +21,26 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html suppressHydrationWarning lang="en">
       <head>
         <meta
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
           name="viewport"
         />
         <link href="/images/logo/logo-base-32x32.png" rel="icon" sizes="any" />
       </head>
-      <body className={inter.className}>
-        <JotaiProvider>{children}</JotaiProvider>
+      <body className={fontFamily.className}>
+        <JotaiProvider>
+          <ThemeProvider
+            disableTransitionOnChange
+            enableSystem
+            attribute="class"
+            defaultTheme="system"
+            storageKey="theme"
+          >
+            {children}
+          </ThemeProvider>
+        </JotaiProvider>
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/apps/web/src/components/theme-provider.tsx b/apps/web/src/components/theme-provider.tsx
@@ -0,0 +1,10 @@
+'use client'
+
+import * as React from 'react'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ThemeProviderProps } from 'next-themes/dist/types'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/bun.lockb b/bun.lockb
