feat: Add light/dark mode support with backend persistence

frontend/src/App.tsx

@@ -9,8 +9,10 @@ import { ChatService, type MessageResponse } from "./services/chat"
 import { type Conversation } from "./components/layout/HistorySidebar"
 import { registerUnauthorizedCallback } from "./services/api"
 import { Button } from "./components/ui/button"
+import { useTheme } from "./components/theme-provider"
 
 function App() {
+  const { setTheme } = useTheme()
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [user, setUser] = useState<UserResponse | null>(null)
   const [authMode, setAuthMode] = useState<"login" | "register">("login")
@@ -34,6 +36,9 @@ function App() {
         const userData = await AuthService.getMe()
         setUser(userData)
         setIsAuthenticated(true)
+        if (userData.theme_preference) {
+          setTheme(userData.theme_preference as "light" | "dark")
+        }
         // Load history after successful auth
         loadHistory()
       } catch (err: unknown) {
@@ -61,6 +66,9 @@ function App() {
       const userData = await AuthService.getMe()
       setUser(userData)
       setIsAuthenticated(true)
+      if (userData.theme_preference) {
+        setTheme(userData.theme_preference as "light" | "dark")
+      }
       loadHistory()
     } catch (err: unknown) {
       console.error("Failed to fetch user profile after login:", err)

frontend/src/components/chat/MarkdownContent.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown, { type Components } from "react-markdown"
 import remarkGfm from "remark-gfm"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"
+import { cn } from "@/lib/utils"
 
 interface MarkdownContentProps {
   content: string
@@ -27,7 +28,7 @@ export function MarkdownContent({ content }: MarkdownContentProps) {
           </SyntaxHighlighter>
         )
       }
-      return <code className={className}>{children}</code>
+      return <code className={cn("bg-muted px-1.5 py-0.5 rounded font-mono text-[0.8em]", className)}>{children}</code>
     },
     table({ children }) {
       return (

frontend/src/components/chat/MessageBubble.tsx

@@ -55,7 +55,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
                 <Button
                   key={`stream-${index}`}
                   variant="ghost"
-                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
+                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white dark:bg-muted/20"
                   onClick={() => setSelectedPlot(src)}
                 >
                   <img
@@ -75,7 +75,7 @@ export function MessageBubble({ message }: MessageBubbleProps) {
                 <Button
                   key={`history-${index}`}
                   variant="ghost"
-                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white"
+                  className="relative group p-0 h-auto w-full max-w-2xl mx-auto overflow-hidden hover:bg-transparent flex justify-center border bg-white dark:bg-muted/20"
                   onClick={() => setSelectedPlot(src)}
                 >
                   <img

frontend/src/components/layout/MainLayout.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
 import { HistorySidebar, type Conversation } from "./HistorySidebar"
+import { ThemeToggle } from "./ThemeToggle"
 
 interface MainLayoutProps {
   children: React.ReactNode
@@ -33,9 +34,12 @@ export function MainLayout({
           onDelete={onDelete}
         />
         <SidebarInset className="flex flex-col flex-1 h-full overflow-hidden">
-          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4" role="navigation">
-            <SidebarTrigger />
-            <div className="font-semibold">Chat</div>
+          <header className="flex h-16 shrink-0 items-center justify-between border-b px-4" role="navigation">
+            <div className="flex items-center gap-2">
+              <SidebarTrigger />
+              <div className="font-semibold">Chat</div>
+            </div>
+            <ThemeToggle />
           </header>
           <main className="flex-1 flex flex-col p-6 overflow-hidden bg-muted/10">
             {children}

frontend/src/components/layout/ThemeToggle.tsx

@@ -0,0 +1,20 @@
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/components/theme-provider"
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      title={`Switch to ${theme === "light" ? "dark" : "light"} mode`}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

frontend/src/components/theme-provider.tsx

@@ -0,0 +1,55 @@
+import { createContext, useContext, useEffect, useState } from "react"
+import { AuthService } from "@/services/auth"
+
+type Theme = "light" | "dark"
+
+interface ThemeContextType {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export function ThemeProvider({
+  children,
+  initialTheme = "light",
+}: {
+  children: React.ReactNode
+  initialTheme?: Theme
+}) {
+  const [theme, setThemeState] = useState<Theme>(initialTheme)
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove("light", "dark")
+    root.classList.add(theme)
+  }, [theme])
+
+  const setTheme = async (newTheme: Theme) => {
+    setThemeState(newTheme)
+    try {
+      await AuthService.updateTheme(newTheme)
+    } catch (error) {
+      console.error("Failed to sync theme to backend:", error)
+    }
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light")
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}

frontend/src/main.tsx

@@ -4,13 +4,16 @@ import './index.css'
 import App from './App.tsx'
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { BrowserRouter } from "react-router-dom"
+import { ThemeProvider } from "./components/theme-provider"
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <BrowserRouter>
-      <TooltipProvider>
-        <App />
-      </TooltipProvider>
+      <ThemeProvider>
+        <TooltipProvider>
+          <App />
+        </TooltipProvider>
+      </ThemeProvider>
     </BrowserRouter>
   </StrictMode>,
 )

frontend/src/services/auth.ts

@@ -9,6 +9,7 @@ export interface UserResponse {
   id: string
   email: string
   display_name?: string
+  theme_preference: string
 }
 
 export const AuthService = {
@@ -49,4 +50,9 @@ export const AuthService = {
   async logout() {
     await api.post("/auth/logout")
   },
+
+  async updateTheme(theme: string): Promise<UserResponse> {
+    const response = await api.patch<UserResponse>("/auth/theme", { theme })
+    return response.data
+  },
 }