Add ModeToggle component and integrate it into Navbar; enhance dark mode handling in Layout

src/components/ModeToggle.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Moon, Sun, Laptop } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const THEME_KEY = "theme";
+
+type Theme = "light" | "dark" | "system";
+
+function getSystemTheme(): Theme {
+	if (typeof window !== "undefined" && window.matchMedia) {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches
+			? "dark"
+			: "light";
+	}
+	return "light";
+}
+
+function getStoredTheme(): Theme | null {
+	if (typeof localStorage !== "undefined") {
+		const t = localStorage.getItem(THEME_KEY);
+		if (t === "light" || t === "dark" || t === "system") return t;
+	}
+	return null;
+}
+
+function setStoredTheme(theme: Theme | null) {
+	if (typeof localStorage !== "undefined") {
+		if (theme) {
+			localStorage.setItem(THEME_KEY, theme);
+		} else {
+			localStorage.removeItem(THEME_KEY);
+		}
+	}
+}
+
+function applyTheme(theme: Theme) {
+	const root = document.documentElement;
+	if (theme === "system") {
+		root.classList.toggle("dark", getSystemTheme() === "dark");
+	} else {
+		root.classList.toggle("dark", theme === "dark");
+	}
+}
+
+export function ModeToggle() {
+	const [theme, setTheme] = React.useState<Theme>(
+		() => getStoredTheme() || "system"
+	);
+
+	React.useEffect(() => {
+		const stored = getStoredTheme();
+		if (stored) setTheme(stored);
+	}, []);
+
+	React.useEffect(() => {
+		setStoredTheme(theme === "system" ? null : theme);
+		applyTheme(theme);
+	}, [theme]);
+
+	React.useEffect(() => {
+		if (theme === "system") {
+			const mq = window.matchMedia("(prefers-color-scheme: dark)");
+			const handler = () => applyTheme("system");
+			mq.addEventListener("change", handler);
+			return () => mq.removeEventListener("change", handler);
+		}
+	}, [theme]);
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
+					Dark
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>
+					System
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

src/components/Navbar.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { BarChart3, LogOut, User as UserIcon } from 'lucide-react';
+import { ModeToggle } from './ModeToggle';
 
 export function Navbar() {
   const [user, setUser] = useState<User | null>(null);
@@ -39,21 +40,22 @@ export function Navbar() {
   };
 
   return (
-    <nav className="border-b bg-white">
+    <nav className="border-b bg-white dark:bg-background">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-16">
           <div className="flex items-center gap-3">
             <BarChart3 className="h-8 w-8 text-primary" />
-            <a href="/" className="text-xl font-bold text-gray-900">
+            <a href="/" className="text-xl font-bold text-gray-900 dark:text-foreground">
               InboxNegotiator
             </a>
           </div>
 
           <div className="flex items-center gap-4">
+            <ModeToggle />
             {user ? (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="ghost\" className="relative h-8 w-8 rounded-full">
+                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                     <Avatar className="h-8 w-8">
                       <AvatarFallback className="text-xs">
                         {getInitials(user.email || '')}

src/layouts/Layout.astro

@@ -8,17 +8,36 @@ const { title } = Astro.props;
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+	<meta charset="UTF-8" />
+	<meta name="description" content="Astro description" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	<meta name="generator" content={Astro.generator} />
+	<title>{title}</title>
+	<script is:inline>
+	  // shadcn dark mode script for Astro
+	  const themeKey = 'theme';
+	  function getThemePreference() {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem(themeKey)) {
+		  return localStorage.getItem(themeKey);
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	  }
+	  const isDark = getThemePreference() === 'dark';
+	  document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+	  if (typeof localStorage !== 'undefined') {
+		const observer = new MutationObserver(() => {
+		  const isDark = document.documentElement.classList.contains('dark');
+		  localStorage.setItem(themeKey, isDark ? 'dark' : 'light');
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+	  }
+	</script>
+  </head>
+  <body>
+	<slot />
+  </body>
 </html>
 <style is:global>
 	:root {