feat: add theme toggle component with dropdown menu support to the layout

app/form/layout.tsx

@@ -3,6 +3,8 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { FormLayoutClient } from "./client";
 import LoginDialog from "@/components/login-dialog";
 import { Metadata } from "next";
+import { ThemeToggle } from "@/components/theme-toggle";
+import Link from 'next/link';
 
 const siteUrl = process.env.BASE_URL;
 
@@ -38,17 +40,22 @@ export default async function FormLayout({
   const session = await getServerSession(authOptions);
 
   return (
-    <div className="flex min-h-screen flex-col flex-1 w-full bg-background text-foreground dark">
+    <div className="flex min-h-screen flex-col flex-1 w-full bg-background text-foreground">
       <header className="border-b border-border px-6 py-3 flex items-center justify-between shrink-0">
-        <span className="font-semibold text-sm">
-          ฟอร์ม
-        </span>
-        {session?.user && (
-          <FormLayoutClient
-            userName={session.user.name ?? ""}
-            userImage={session.user.image ?? ""}
-          />
-        )}
+        <Link href="/form">
+          <span className="font-semibold text-sm">
+            Form
+          </span>
+        </Link>
+        <div className="flex items-center gap-2">
+          {session?.user && (
+            <FormLayoutClient
+              userName={session.user.name ?? ""}
+              userImage={session.user.image ?? ""}
+            />
+          )}
+          <ThemeToggle />
+        </div>
       </header>
       <main className="flex-1 p-6 md:p-8 overflow-y-auto max-w-6xl mx-auto w-full">
         {children}

app/layout.tsx

@@ -71,6 +71,7 @@ export const metadata: Metadata = {
 
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "sonner";
+import { ThemeProvider } from "@/components/theme-provider";
 
 export default function RootLayout({
   children,
@@ -80,13 +81,21 @@ export default function RootLayout({
   return (
     <html
       lang="th"
-      className={cn("h-full", "dark", "antialiased", anuphan.variable, geistSans.variable, "font-sans")}
+      className={cn("h-full", "antialiased", anuphan.variable, geistSans.variable, "font-sans")}
+      suppressHydrationWarning
     >
       <body className={`${anuphan.className} ${geistSans.className}`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
         <TooltipProvider>
           <Toaster richColors closeButton position="bottom-right" theme="dark" toastOptions={{ className: anuphan.className }} />
           {children}
         </TooltipProvider>
+        </ThemeProvider>
       </body>
     </html>
   );