Add light/dark/system theme switcher

- Wrap root layout with ThemeProvider (next-themes, defaultTheme=system) - Remove hardcoded dark class from <html> - Add ThemeToggle component with Sun/Moon/Monitor icons and checkmark on active selection - Mount toggle in dashboard header next to user menu Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-10 16:44:05 -07:00
parent c361922005
commit e27d4cfa58
3 changed files with 63 additions and 2 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import { Inter, JetBrains_Mono } from 'next/font/google'
 import { SessionProvider } from 'next-auth/react'
+import { ThemeProvider } from '@/components/theme-provider'
 import './globals.css'

 const inter = Inter({ subsets: ["latin"] });
@@ -41,9 +42,16 @@ export default function RootLayout({
  children: React.ReactNode
 }>) {
  return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
      <body className="font-sans antialiased">
-        <SessionProvider>{children}</SessionProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SessionProvider>{children}</SessionProvider>
+        </ThemeProvider>
      </body>
    </html>
  )