dark mode

2024-10-28 21:55:29 -07:00
parent 103cbb82a9
commit b73d83d942
7 changed files with 94 additions and 40 deletions
@@ -1,11 +1,11 @@
-import { inter } from "~/lib/fonts"
-import "~/styles/globals.css"
-import { Navigation } from "~/components/Navigation"
-import { Sidebar } from "~/components/Sidebar"
-import { ThemeProvider } from 'next-themes'
-import { Footer } from "~/components/Footer"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
+import { ThemeProvider } from "next-themes"
+import { Footer } from "~/components/Footer"
+import { Navigation } from "~/components/Navigation"
+import { Sidebar } from "~/components/Sidebar"
+import { inter } from "~/lib/fonts"
+import "~/styles/globals.css"

 export const metadata = {
  title: "Sean O'Connor",
@@ -17,22 +17,28 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html lang="en" className={inter.className}>
      <body className="font-sans bg-background text-foreground min-h-screen flex flex-col">
-        <Analytics />
-        <SpeedInsights />
-        <Navigation />
-        <div className="flex-1">
-          <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex flex-col lg:flex-row lg:gap-12">
-              <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
-                <Sidebar />
-              </aside>
-              <main className="flex-1 overflow-y-auto py-8">
-                {children}
-              </main>
+        <ThemeProvider
+          attribute="data-theme"
+          defaultTheme="system"
+          enableSystem
+        >
+          <Analytics />
+          <SpeedInsights />
+          <Navigation />
+          <div className="flex-1">
+            <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex flex-col lg:flex-row lg:gap-12">
+                <aside className="lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] overflow-y-auto">
+                  <Sidebar />
+                </aside>
+                <main className="flex-1 overflow-y-auto py-8">
+                  {children}
+                </main>
+              </div>
            </div>
          </div>
-        </div>
-        <Footer />
+          <Footer />
+        </ThemeProvider>
      </body>
    </html>
  )