Implemented theme switcher as an exercise

2026-01-23 16:38:04 +01:00
parent 497741fe1b
commit d07ec05ecc
5 changed files with 74 additions and 20 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
+import { ThemeProvider } from "next-themes";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeToggle } from "../components/ThemeToggle";
 import "./globals.css";

 const geistSans = Geist({
@@ -23,11 +25,14 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <ThemeProvider defaultTheme="system" enableSystem>
+          <nav className="bg-gray-100 dark:bg-gray-800 p-4">
+            <ThemeToggle />
+          </nav>
+          {children}
+        </ThemeProvider>
      </body>
    </html>
  );