Add settings page with dark mode toggle

src/app/ThemeProvider.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState, useEffect, createContext, useContext } from "react";
+
+const ThemeContext = createContext<{
+  theme: "light" | "dark";
+  toggle: () => void;
+}>({ theme: "light", toggle: () => {} });
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  useEffect(() => {
+    const saved = localStorage.getItem("tia_theme") as "light" | "dark";
+    if (saved) setTheme(saved);
+  }, []);
+
+  const toggle = () => {
+    const next = theme === "light" ? "dark" : "light";
+    setTheme(next);
+    localStorage.setItem("tia_theme", next);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggle }}>
+      <div className={theme}>{children}</div>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

src/app/globals.css

@@ -1,10 +1,17 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
-  --background: #ffffff;
+  --background: #fdf2f2;
   --foreground: #171717;
 }
 
+.dark {
+  --background: #111827;
+  --foreground: #f9fafb;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -12,13 +19,6 @@
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   background: var(--background);
   color: var(--foreground);

src/app/settings/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem("tia_theme");
+    setDarkMode(saved === "dark");
+    if (saved === "dark") {
+      document.documentElement.classList.add("dark");
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const next = !darkMode;
+    setDarkMode(next);
+    localStorage.setItem("tia_theme", next ? "dark" : "light");
+    if (next) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
+      <div className="p-4 flex items-center gap-4">
+        <button onClick={() => router.back()} className="p-2">
+          ←
+        </button>
+        <h1 className="text-xl font-bold">Settings</h1>
+      </div>
+
+      <div className="px-4 space-y-3">
+        {/* Dark Mode Toggle */}
+        <div className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div>
+            <div className="font-medium">Dark Mode</div>
+            <div className="text-sm text-gray-500 dark:text-gray-400">Switch to dark theme</div>
+          </div>
+          <button
+            onClick={toggleDarkMode}
+            className={`w-14 h-8 rounded-full transition-colors ${
+              darkMode ? "bg-rose-500" : "bg-gray-300"
+            }`}
+          >
+            <div
+              className={`w-6 h-6 bg-white rounded-full transition-transform ${
+                darkMode ? "translate-x-7" : "translate-x-1"
+              }`}
+            />
+          </button>
+        </div>
+
+        {/* Other Settings */}
+        <Link href="/profile" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="font-medium">Profile</div>
+          <div className="text-gray-400">→</div>
+        </Link>
+
+        <Link href="/notifications" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="font-medium">Notifications</div>
+          <div className="text-gray-400">→</div>
+        </Link>
+
+        <Link href="/family" className="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="font-medium">Family Members</div>
+          <div className="text-gray-400">→</div>
+        </Link>
+
+        <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
+          <div className="font-medium">App Version</div>
+          <div className="text-sm text-gray-500">Tia v1.0.0</div>
+        </div>
+      </div>
+    </div>
+  );
+}