added next-themes to handle toggling dark mode

steadyfall · steadyfall · commit 858ebb607822 · 2024-09-29T22:21:40.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "lucide-react": "^0.445.0",
     "next": "14.2.13",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-router-dom": "^6.26.2"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from 'next/font/google'
+import { Providers } from './providers'
 import "./globals.css";
 
 const inter = Inter({ subsets: ['latin'] })
@@ -18,9 +19,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={inter.className} suppressHydrationWarning>
       <body>
-        {children}
+        <Providers>
+          {children}
+        </Providers>
       </body>
     </html>
   );
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+    return <ThemeProvider attribute="class" defaultTheme='system' enableSystem>{children}</ThemeProvider>
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -41,5 +41,6 @@ const config: Config = {
     },
   },
   plugins: [],
+  darkMode: 'class',
 };
 export default config;
