feat: implement curated themes and profile integration

backend/requirements.txt

@@ -65,5 +65,5 @@ python-magic; sys_platform != "win32"
 python-docx
 pypdf
 reportlab
-crawl4ai
-ddgs
+# crawl4ai
+# ddgs

frontend/src/app/globals.css

@@ -142,6 +142,93 @@
   --sidebar-ring: oklch(0.55 0.23 265);
 }
 
+.ocean {
+  --background: oklch(0.18 0.05 250);
+  --foreground: oklch(0.98 0.02 240);
+  --card: oklch(0.22 0.06 250);
+  --card-foreground: oklch(0.98 0.02 240);
+  --popover: oklch(0.22 0.06 250);
+  --popover-foreground: oklch(0.98 0.02 240);
+  --primary: oklch(0.65 0.15 220);
+  --primary-foreground: oklch(0.98 0.02 240);
+  --secondary: oklch(0.28 0.07 250);
+  --secondary-foreground: oklch(0.98 0.02 240);
+  --muted: oklch(0.28 0.07 250);
+  --muted-foreground: oklch(0.7 0.05 240);
+  --accent: oklch(0.65 0.15 220);
+  --accent-foreground: oklch(0.98 0.02 240);
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.35 0.08 250 / 50%);
+  --input: oklch(0.35 0.08 250 / 50%);
+  --ring: oklch(0.65 0.15 220);
+  --sidebar: oklch(0.16 0.05 250);
+  --sidebar-foreground: oklch(0.98 0.02 240);
+  --sidebar-primary: oklch(0.65 0.15 220);
+  --sidebar-primary-foreground: oklch(0.98 0.02 240);
+  --sidebar-accent: oklch(0.22 0.06 250);
+  --sidebar-accent-foreground: oklch(0.98 0.02 240);
+  --sidebar-border: oklch(0.35 0.08 250 / 50%);
+  --sidebar-ring: oklch(0.65 0.15 220);
+}
+
+.forest {
+  --background: oklch(0.2 0.04 150);
+  --foreground: oklch(0.98 0.02 140);
+  --card: oklch(0.24 0.05 150);
+  --card-foreground: oklch(0.98 0.02 140);
+  --popover: oklch(0.24 0.05 150);
+  --popover-foreground: oklch(0.98 0.02 140);
+  --primary: oklch(0.6 0.12 140);
+  --primary-foreground: oklch(0.98 0.02 140);
+  --secondary: oklch(0.3 0.06 150);
+  --secondary-foreground: oklch(0.98 0.02 140);
+  --muted: oklch(0.3 0.06 150);
+  --muted-foreground: oklch(0.7 0.05 140);
+  --accent: oklch(0.6 0.12 140);
+  --accent-foreground: oklch(0.98 0.02 140);
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.35 0.07 150 / 50%);
+  --input: oklch(0.35 0.07 150 / 50%);
+  --ring: oklch(0.6 0.12 140);
+  --sidebar: oklch(0.18 0.04 150);
+  --sidebar-foreground: oklch(0.98 0.02 140);
+  --sidebar-primary: oklch(0.6 0.12 140);
+  --sidebar-primary-foreground: oklch(0.98 0.02 140);
+  --sidebar-accent: oklch(0.24 0.05 150);
+  --sidebar-accent-foreground: oklch(0.98 0.02 140);
+  --sidebar-border: oklch(0.35 0.07 150 / 50%);
+  --sidebar-ring: oklch(0.6 0.12 140);
+}
+
+.sunset {
+  --background: oklch(0.18 0.06 330);
+  --foreground: oklch(0.98 0.03 350);
+  --card: oklch(0.22 0.08 330);
+  --card-foreground: oklch(0.98 0.03 350);
+  --popover: oklch(0.22 0.08 330);
+  --popover-foreground: oklch(0.98 0.03 350);
+  --primary: oklch(0.65 0.18 15);
+  --primary-foreground: oklch(0.98 0.03 350);
+  --secondary: oklch(0.28 0.09 330);
+  --secondary-foreground: oklch(0.98 0.03 350);
+  --muted: oklch(0.28 0.09 330);
+  --muted-foreground: oklch(0.7 0.06 340);
+  --accent: oklch(0.65 0.18 15);
+  --accent-foreground: oklch(0.98 0.03 350);
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.35 0.1 330 / 50%);
+  --input: oklch(0.35 0.1 330 / 50%);
+  --ring: oklch(0.65 0.18 15);
+  --sidebar: oklch(0.16 0.06 330);
+  --sidebar-foreground: oklch(0.98 0.03 350);
+  --sidebar-primary: oklch(0.65 0.18 15);
+  --sidebar-primary-foreground: oklch(0.98 0.03 350);
+  --sidebar-accent: oklch(0.22 0.08 330);
+  --sidebar-accent-foreground: oklch(0.98 0.03 350);
+  --sidebar-border: oklch(0.35 0.1 330 / 50%);
+  --sidebar-ring: oklch(0.65 0.18 15);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

frontend/src/app/layout.tsx

@@ -33,6 +33,7 @@ export default function RootLayout({
           defaultTheme="dark"
           enableSystem={false}
           disableTransitionOnChange
+          themes={["light", "dark", "ocean", "forest", "sunset"]}
         >
           <AuthProvider>
             <I18nProvider>

frontend/src/app/page.tsx

@@ -3,7 +3,8 @@
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
-import { FileText, MessageSquare, Brain, Shield, Zap, Search } from "lucide-react";
+import { FileText, MessageSquare, Brain, Shield, Zap, Search, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import ContributorsPanel from "@/components/layout/ContributorsPanel";
@@ -13,6 +14,19 @@ export default function HomePage() {
   const { user, loading } = useAuth();
   const router = useRouter();
   const [hallOfFameOpen, setHallOfFameOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    // Force only light/dark mode on the home page
+    if (mounted && theme !== "light" && theme !== "dark") {
+      setTheme("dark");
+    }
+  }, [mounted, theme, setTheme]);
 
   useEffect(() => {
     if (!loading && user) {
@@ -29,7 +43,19 @@ export default function HomePage() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="min-h-screen flex flex-col relative">
+      {mounted && (
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-4 right-4 z-50 rounded-full"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+          title="Toggle theme"
+        >
+          {theme === "dark" ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+        </Button>
+      )}
+
       {/* ── Hero ────────────────────────────────────── */}
       <div className="flex-1 flex flex-col items-center justify-center px-6 py-20">
         {/* Glow effect */}

frontend/src/components/layout/Header.tsx

@@ -11,6 +11,12 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
 } from "@/components/ui/dropdown-menu";
 import {
   Brain,
@@ -19,12 +25,12 @@ import {
   PanelRightClose,
   PanelRightOpen,
   LogOut,
-  Moon,
-  Sun,
   Menu,
   X,
+  Palette,
+  Briefcase, 
+  ChevronDown
 } from "lucide-react";
-import { Briefcase, ChevronDown } from "lucide-react";
 import { useWorkspaceStore, WORKSPACES, type WorkspaceId } from "@/store/workspace-store";
 import { api } from "@/lib/api";
 import { useTheme } from "next-themes";
@@ -59,9 +65,6 @@ export default function Header({
   const workspace = useWorkspaceStore((s) => s.workspace);
   const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);
 
-  const isDark = theme === "dark";
-  const toggleTheme = () => setTheme(isDark ? "light" : "dark");
-
   const handleLogout = () => {
     logout();
     router.replace("/login");
@@ -137,18 +140,6 @@ export default function Header({
             )}
           </Button>
 
-          {mounted && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8"
-              onClick={toggleTheme}
-              title={isDark ? "Light mode" : "Dark mode"}
-            >
-              {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
-            </Button>
-          )}
-
           {/* Workspace switcher */}
           <DropdownMenu>
             <DropdownMenuTrigger className="flex items-center h-8 gap-2 px-2 rounded-md hover:bg-accent transition-colors cursor-pointer">
@@ -175,7 +166,7 @@ export default function Header({
           <DropdownMenu>
             <DropdownMenuTrigger className="flex items-center h-8 gap-2 px-2 rounded-md hover:bg-accent transition-colors cursor-pointer">
               <Avatar className="w-6 h-6">
-                <AvatarFallback className="text-[10px] bg-primary/20 text-primary">
+                <AvatarFallback className="text-[10px] bg-primary text-primary-foreground">
                   {user?.username?.slice(0, 2).toUpperCase() || "U"}
                 </AvatarFallback>
               </Avatar>
@@ -187,6 +178,24 @@ export default function Header({
                 <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
               </div>
               <DropdownMenuSeparator />
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger className="cursor-pointer">
+                  <Palette className="w-4 h-4 mr-2" />
+                  Theme
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuRadioGroup value={mounted ? theme : "dark"} onValueChange={setTheme}>
+                      <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="ocean">Ocean</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="forest">Forest</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="sunset">Sunset</DropdownMenuRadioItem>
+                    </DropdownMenuRadioGroup>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+              <DropdownMenuSeparator />
               <DropdownMenuItem
                 className="text-destructive cursor-pointer"
                 onClick={handleLogout}