add dark theme support

2025-08-16 10:33:37 -04:00
parent 69e61573cb
commit cecf3a8d5b
6 changed files with 360 additions and 6 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,15 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { ThemeProvider } from "next-themes";
+import { ModeToggle } from "@/components/mode-toggle";

 const inter = Inter({ subsets: ['latin'], variable: "--font-inter" })

-export const metadata = {
+export const metadata: Metadata = {
  title: 'iCal PWA',
  description: 'Minimal PWA for calendar events',
+  creator: "Dmytro Stanchiev",
 }

 export default function RootLayout({
@@ -15,14 +18,22 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
      <body
        className={`${inter.variable} antialiased min-h-screen flex flex-col bg-gray-50 text-gray-900`}
      >
-        <header className="bg-blue-600 text-white px-4 py-3 font-bold shadow">
-          iCal PWA
-        </header>
-        <main className="flex-1 p-4">{children}</main>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <header className="bg-blue-600 text-white px-4 py-3 font-bold shadow">
+            iCal PWA
+            <ModeToggle />
+          </header>
+          <main className="flex-1 p-4">{children}</main>
+        </ThemeProvider>
      </body>
    </html>
  );