From e6701bd4a1b153188da16c8206832b54a6cad30f Mon Sep 17 00:00:00 2001
From: Ramzi Abidi <ramzi@jobflow.de>
Date: Sun, 5 Jul 2026 16:09:08 +0100
Subject: [PATCH] feat: implement dark mode support and theme toggle
 functionality

- Added dark mode configuration in Tailwind CSS.
- Introduced useTheme hook for managing theme state and toggling between light and dark modes.
- Updated App component to integrate theme management.
- Enhanced various components to support dark mode styling, ensuring consistent UI across light and dark themes.
---
 client/src/App.tsx                            |  6 +++-
 client/src/components/chat/ChatArea.tsx       | 28 +++++++++++++----
 client/src/components/chat/ChatInput.tsx      | 10 ++++---
 client/src/components/chat/ChatList.tsx       | 29 +++++++++++-------
 client/src/components/chat/MessageBubble.tsx  | 11 ++++---
 client/src/components/chat/MessageList.tsx    |  8 ++---
 .../src/components/documents/DocumentList.tsx | 20 +++++++------
 client/src/components/layout/MobileDrawer.tsx |  8 ++---
 .../modals/DocumentPreviewModal.tsx           | 20 ++++++++-----
 client/src/components/modals/UploadModal.tsx  | 21 ++++++++-----
 client/src/components/ui/toast.tsx            | 25 ++++++++--------
 client/src/hooks/useTheme.ts                  | 30 +++++++++++++++++++
 client/tailwind.config.js                     |  1 +
 13 files changed, 146 insertions(+), 71 deletions(-)
 create mode 100644 client/src/hooks/useTheme.ts

diff --git a/client/src/App.tsx b/client/src/App.tsx
index a5d1d23..133fde7 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -3,6 +3,7 @@ import { ask, uploadDocs, listDocs, deleteDoc, Document, SessionMetadata } from
 import { Toaster } from '@/components/ui/toast';
 import { useToast } from '@/hooks/useToast';
 import { useSession, Message } from './hooks/useSession';
+import { useTheme } from './hooks/useTheme';
 import { DocumentList } from './components/documents/DocumentList';
 import { ChatArea } from './components/chat/ChatArea';
 import { ChatList } from './components/chat/ChatList';
@@ -22,6 +23,7 @@ export default function App() {
   const [previewDocument, setPreviewDocument] = useState<Document | null>(null);
   const [mobilePanel, setMobilePanel] = useState<MobilePanel>(null);
   const { toasts, toast, dismiss } = useToast();
+  const { theme, toggleTheme } = useTheme();
   const closePreview = useCallback(() => setPreviewDocument(null), []);
   const closeMobilePanel = useCallback(() => setMobilePanel(null), []);
 
@@ -120,7 +122,7 @@ export default function App() {
   };
 
   return (
-    <div className="flex h-[100dvh] overflow-hidden bg-gray-50">
+    <div className="flex h-[100dvh] overflow-hidden bg-gray-50 dark:bg-gray-950">
       <DocumentList {...documentListProps} className="hidden lg:flex" />
 
       <ChatArea
@@ -133,6 +135,8 @@ export default function App() {
         onNewChat={createNewSession}
         onOpenDocs={() => setMobilePanel('docs')}
         onOpenChats={() => setMobilePanel('chats')}
+        theme={theme}
+        onToggleTheme={toggleTheme}
       />
 
       <ChatList
diff --git a/client/src/components/chat/ChatArea.tsx b/client/src/components/chat/ChatArea.tsx
index 1dc9937..d322154 100644
--- a/client/src/components/chat/ChatArea.tsx
+++ b/client/src/components/chat/ChatArea.tsx
@@ -1,4 +1,4 @@
-import { FileText, MessageSquare, MessageSquarePlus } from 'lucide-react';
+import { FileText, MessageSquare, MessageSquarePlus, Moon, Sun } from 'lucide-react';
 import { MessageList } from './MessageList';
 import { ChatInput } from './ChatInput';
 import { Message } from '../../hooks/useSession';
@@ -13,6 +13,8 @@ interface ChatAreaProps {
   onNewChat: () => void;
   onOpenDocs?: () => void;
   onOpenChats?: () => void;
+  theme: 'light' | 'dark';
+  onToggleTheme: () => void;
 }
 
 export function ChatArea({
@@ -25,39 +27,53 @@ export function ChatArea({
   onNewChat,
   onOpenDocs,
   onOpenChats,
+  theme,
+  onToggleTheme,
 }: ChatAreaProps) {
   return (
     <div className="flex min-h-0 flex-1 flex-col min-w-0 w-full">
-      <div className="h-14 shrink-0 border-b border-gray-200 bg-white flex items-center gap-2 px-3 sm:px-6">
+      <div className="h-14 shrink-0 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 flex items-center gap-2 px-3 sm:px-6">
         {onOpenDocs ? (
           <button
             type="button"
             onClick={onOpenDocs}
-            className="lg:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition"
+            className="lg:hidden rounded-lg p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-100 transition"
             aria-label="Open documents"
           >
             <FileText size={20} />
           </button>
         ) : null}
 
-        <h1 className="flex-1 truncate text-lg sm:text-xl font-bold text-gray-800">RTFM For Me</h1>
+        <h1 className="flex-1 truncate text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100">
+          RTFM For Me
+        </h1>
 
         <div className="flex items-center gap-1 sm:gap-2 shrink-0">
           {onOpenChats ? (
             <button
               type="button"
               onClick={onOpenChats}
-              className="lg:hidden rounded-lg p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition"
+              className="lg:hidden rounded-lg p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-100 transition"
               aria-label="Open chats"
             >
               <MessageSquare size={20} />
             </button>
           ) : null}
 
+          <button
+            type="button"
+            onClick={onToggleTheme}
+            className="rounded-lg p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-100 transition"
+            title="Toggle theme"
+            aria-label="Toggle theme"
+          >
+            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
+          </button>
+
           <button
             type="button"
             onClick={onNewChat}
-            className="flex items-center gap-2 rounded-lg px-2 sm:px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition"
+            className="flex items-center gap-2 rounded-lg px-2 sm:px-3 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-100 transition"
             title="Start new conversation"
           >
             <MessageSquarePlus size={18} />
diff --git a/client/src/components/chat/ChatInput.tsx b/client/src/components/chat/ChatInput.tsx
index 97b1621..48e9dd8 100644
--- a/client/src/components/chat/ChatInput.tsx
+++ b/client/src/components/chat/ChatInput.tsx
@@ -36,9 +36,9 @@ export function ChatInput({ input, loading, onInputChange, onSend }: ChatInputPr
   };
 
   return (
-    <div className="border-t border-gray-200 bg-white p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+    <div className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
       <div className="max-w-3xl mx-auto">
-        <div className="relative flex items-end border border-gray-300 rounded-xl focus-within:ring-2 focus-within:ring-blue-500 bg-white">
+        <div className="relative flex items-end border border-gray-300 dark:border-gray-700 rounded-xl focus-within:ring-2 focus-within:ring-blue-500 bg-white dark:bg-gray-900">
           <textarea
             ref={textareaRef}
             value={input}
@@ -46,7 +46,7 @@ export function ChatInput({ input, loading, onInputChange, onSend }: ChatInputPr
             onKeyDown={handleKeyDown}
             placeholder="Ask a question..."
             rows={1}
-            className="flex-1 resize-none px-4 py-3 bg-transparent focus:outline-none text-gray-800 placeholder-gray-400"
+            className="flex-1 resize-none px-4 py-3 bg-transparent focus:outline-none text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
             style={{ maxHeight: '200px' }}
             disabled={loading}
           />
@@ -58,7 +58,9 @@ export function ChatInput({ input, loading, onInputChange, onSend }: ChatInputPr
             <Send size={18} />
           </button>
         </div>
-        <p className="text-xs text-gray-400 mt-1 ml-1">Enter to send · Shift+Enter for new line</p>
+        <p className="text-xs text-gray-400 dark:text-gray-500 mt-1 ml-1">
+          Enter to send · Shift+Enter for new line
+        </p>
       </div>
     </div>
   );
diff --git a/client/src/components/chat/ChatList.tsx b/client/src/components/chat/ChatList.tsx
index ba5a5cb..7d1b191 100644
--- a/client/src/components/chat/ChatList.tsx
+++ b/client/src/components/chat/ChatList.tsx
@@ -22,19 +22,19 @@ export function ChatList({
   return (
     <div
       className={cn(
-        'w-64 shrink-0 bg-white border-l border-gray-200 flex flex-col h-full',
+        'w-64 shrink-0 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 flex flex-col h-full',
         className,
       )}
     >
       {showHeader ? (
-        <div className="hidden lg:block p-4 border-b border-gray-200">
-          <h2 className="font-semibold text-gray-700">Chats</h2>
+        <div className="hidden lg:block p-4 border-b border-gray-200 dark:border-gray-800">
+          <h2 className="font-semibold text-gray-700 dark:text-gray-200">Chats</h2>
         </div>
       ) : null}
 
       <div className="flex-1 overflow-y-auto">
         {sessions.length === 0 ? (
-          <p className="text-gray-400 text-sm text-center p-4">No chats yet</p>
+          <p className="text-gray-400 dark:text-gray-500 text-sm text-center p-4">No chats yet</p>
         ) : (
           <ul className="p-2 space-y-1">
             {sessions.map((session) => (
@@ -42,28 +42,35 @@ export function ChatList({
                 key={session.id}
                 className={`group p-3 rounded-lg cursor-pointer transition-colors ${
                   activeSessionId === session.id
-                    ? 'bg-blue-50 border border-blue-200'
-                    : 'hover:bg-gray-50'
+                    ? 'bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800'
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-800'
                 }`}
                 onClick={() => onSwitch(session)}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
-                      <MessageSquare size={16} className="text-gray-400 flex-shrink-0" />
-                      <h3 className="text-sm font-medium text-gray-900 truncate">
+                      <MessageSquare
+                        size={16}
+                        className="text-gray-400 dark:text-gray-500 flex-shrink-0"
+                      />
+                      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                         {session.title}
                       </h3>
                     </div>
-                    <p className="text-xs text-gray-500 mt-1 truncate">{session.lastMessage}</p>
-                    <p className="text-xs text-gray-400 mt-1">{session.messageCount} messages</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
+                      {session.lastMessage}
+                    </p>
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                      {session.messageCount} messages
+                    </p>
                   </div>
                   <button
                     onClick={(e) => {
                       e.stopPropagation();
                       onDelete(session.id);
                     }}
-                    className="opacity-100 lg:opacity-0 lg:group-hover:opacity-100 text-gray-400 hover:text-red-500 transition-opacity flex-shrink-0 ml-2 p-1 -m-1"
+                    className="opacity-100 lg:opacity-0 lg:group-hover:opacity-100 text-gray-400 dark:text-gray-500 hover:text-red-500 transition-opacity flex-shrink-0 ml-2 p-1 -m-1"
                   >
                     <Trash2 size={14} />
                   </button>
diff --git a/client/src/components/chat/MessageBubble.tsx b/client/src/components/chat/MessageBubble.tsx
index 3ff37df..5cd8d74 100644
--- a/client/src/components/chat/MessageBubble.tsx
+++ b/client/src/components/chat/MessageBubble.tsx
@@ -14,14 +14,14 @@ export function MessageBubble({ role, content, sources }: MessageBubbleProps) {
       <div
         className={`p-4 rounded-lg ${
           role === 'user'
-            ? 'bg-[#edf3fe] text-gray-800 ml-auto max-w-[85%] sm:max-w-md'
-            : 'bg-white border border-gray-200 max-w-full sm:max-w-2xl'
+            ? 'bg-[#edf3fe] dark:bg-blue-950 text-gray-800 dark:text-blue-50 ml-auto max-w-[85%] sm:max-w-md'
+            : 'bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 max-w-full sm:max-w-2xl'
         }`}
       >
         {role === 'user' ? (
           <p className="whitespace-pre-wrap">{content}</p>
         ) : (
-          <div className="prose prose-sm max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:my-2 prose-pre:bg-gray-50 prose-pre:text-gray-800 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded-lg prose-pre:shadow-none prose-pre:[&_code]:bg-transparent prose-pre:[&_code]:p-0 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
+          <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1 prose-pre:my-2 prose-pre:bg-gray-50 dark:prose-pre:bg-gray-800 prose-pre:text-gray-800 dark:prose-pre:text-gray-100 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:rounded-lg prose-pre:shadow-none prose-pre:[&_code]:bg-transparent prose-pre:[&_code]:p-0 prose-code:text-blue-600 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-950 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
             <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
           </div>
         )}
@@ -30,7 +30,10 @@ export function MessageBubble({ role, content, sources }: MessageBubbleProps) {
       {sources && sources.length > 0 ? (
         <div className="mt-2 flex flex-wrap gap-2">
           {sources.map((src, j) => (
-            <span key={j} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
+            <span
+              key={j}
+              className="text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 px-2 py-1 rounded"
+            >
               {src.fileName}
               {src.section && `#${src.section}`}
             </span>
diff --git a/client/src/components/chat/MessageList.tsx b/client/src/components/chat/MessageList.tsx
index d3e5044..bf8b052 100644
--- a/client/src/components/chat/MessageList.tsx
+++ b/client/src/components/chat/MessageList.tsx
@@ -20,7 +20,7 @@ export function MessageList({ messages, loading, hasDocuments }: MessageListProp
     <div className="flex-1 overflow-y-auto p-4 sm:p-6">
       {messages.length === 0 && !hasDocuments ? (
         <div className="h-full flex items-center justify-center">
-          <div className="text-center text-gray-400">
+          <div className="text-center text-gray-400 dark:text-gray-500">
             <FileText size={48} className="mx-auto mb-4" />
             <p>Upload your docs to get started</p>
           </div>
@@ -29,7 +29,7 @@ export function MessageList({ messages, loading, hasDocuments }: MessageListProp
 
       {messages.length === 0 && hasDocuments ? (
         <div className="h-full flex items-center justify-center">
-          <div className="text-center text-gray-400">
+          <div className="text-center text-gray-400 dark:text-gray-500">
             <p>Ask a question about your docs</p>
           </div>
         </div>
@@ -41,8 +41,8 @@ export function MessageList({ messages, loading, hasDocuments }: MessageListProp
         ))}
 
         {loading ? (
-          <div className="bg-white border border-gray-200 p-4 rounded-lg max-w-full sm:max-w-2xl">
-            <div className="flex items-center gap-2 text-gray-400">
+          <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 rounded-lg max-w-full sm:max-w-2xl">
+            <div className="flex items-center gap-2 text-gray-400 dark:text-gray-500">
               <Loader2 size={16} className="animate-spin" />
               Thinking...
             </div>
diff --git a/client/src/components/documents/DocumentList.tsx b/client/src/components/documents/DocumentList.tsx
index 234fb30..7103d36 100644
--- a/client/src/components/documents/DocumentList.tsx
+++ b/client/src/components/documents/DocumentList.tsx
@@ -22,20 +22,20 @@ export function DocumentList({
   return (
     <div
       className={cn(
-        'w-64 shrink-0 bg-white border-r border-gray-200 flex flex-col h-full',
+        'w-64 shrink-0 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-full',
         className,
       )}
     >
       {showHeader ? (
-        <div className="hidden lg:block p-4 border-b border-gray-200">
-          <h2 className="font-semibold text-gray-700">Documents</h2>
+        <div className="hidden lg:block p-4 border-b border-gray-200 dark:border-gray-800">
+          <h2 className="font-semibold text-gray-700 dark:text-gray-200">Documents</h2>
         </div>
       ) : null}
 
       <div className="p-4">
         <button
           onClick={onUploadClick}
-          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-[#edf3fe] text-gray-800 rounded-lg hover:bg-[#dce8fc] transition"
+          className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-[#edf3fe] dark:bg-blue-950 text-gray-800 dark:text-blue-50 rounded-lg hover:bg-[#dce8fc] dark:hover:bg-blue-900 transition"
         >
           <Upload size={18} />
           Upload
@@ -44,26 +44,28 @@ export function DocumentList({
 
       <div className="flex-1 overflow-y-auto px-4">
         {documents.length === 0 ? (
-          <p className="text-gray-400 text-sm">No files yet</p>
+          <p className="text-gray-400 dark:text-gray-500 text-sm">No files yet</p>
         ) : (
           <ul className="space-y-2">
             {documents.map((doc) => (
               <li
                 key={doc.id}
-                className="flex items-center justify-between p-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition"
+                className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
               >
                 <button
                   type="button"
                   onClick={() => onPreview(doc)}
                   className="flex items-center gap-2 min-w-0 flex-1 text-left"
                 >
-                  <FileText size={16} className="text-gray-400 flex-shrink-0" />
-                  <span className="text-sm text-gray-700 truncate">{doc.fileName}</span>
+                  <FileText size={16} className="text-gray-400 dark:text-gray-500 flex-shrink-0" />
+                  <span className="text-sm text-gray-700 dark:text-gray-200 truncate">
+                    {doc.fileName}
+                  </span>
                 </button>
                 <button
                   type="button"
                   onClick={() => onDelete(doc.id)}
-                  className="text-gray-400 hover:text-red-500 flex-shrink-0 p-2 -m-1"
+                  className="text-gray-400 dark:text-gray-500 hover:text-red-500 flex-shrink-0 p-2 -m-1"
                   aria-label={`Delete ${doc.fileName}`}
                 >
                   <X size={16} />
diff --git a/client/src/components/layout/MobileDrawer.tsx b/client/src/components/layout/MobileDrawer.tsx
index 7f3bb93..2e8fe10 100644
--- a/client/src/components/layout/MobileDrawer.tsx
+++ b/client/src/components/layout/MobileDrawer.tsx
@@ -17,19 +17,19 @@ export function MobileDrawer({ open, onClose, side, title, children }: MobileDra
       <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden="true" />
       <div
         className={cn(
-          'absolute inset-y-0 flex w-[min(20rem,85vw)] flex-col bg-white shadow-xl',
+          'absolute inset-y-0 flex w-[min(20rem,85vw)] flex-col bg-white dark:bg-gray-900 shadow-xl',
           side === 'left' ? 'left-0' : 'right-0',
         )}
         role="dialog"
         aria-modal="true"
         aria-label={title}
       >
-        <div className="flex items-center justify-between border-b border-gray-200 p-4">
-          <h2 className="font-semibold text-gray-700">{title}</h2>
+        <div className="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 p-4">
+          <h2 className="font-semibold text-gray-700 dark:text-gray-200">{title}</h2>
           <button
             type="button"
             onClick={onClose}
-            className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            className="rounded-lg p-2 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-300"
             aria-label="Close panel"
           >
             <X size={20} />
diff --git a/client/src/components/modals/DocumentPreviewModal.tsx b/client/src/components/modals/DocumentPreviewModal.tsx
index f6ffd16..302b179 100644
--- a/client/src/components/modals/DocumentPreviewModal.tsx
+++ b/client/src/components/modals/DocumentPreviewModal.tsx
@@ -67,17 +67,21 @@ export function DocumentPreviewModal({ document, onClose, toast }: DocumentPrevi
       onClick={onClose}
     >
       <div
-        className="bg-white flex flex-col w-full h-full md:h-auto md:max-h-[85vh] md:max-w-3xl md:rounded-lg shadow-xl"
+        className="bg-white dark:bg-gray-900 flex flex-col w-full h-full md:h-auto md:max-h-[85vh] md:max-w-3xl md:rounded-lg shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between gap-4 p-4 border-b border-gray-200">
+        <div className="flex items-center justify-between gap-4 p-4 border-b border-gray-200 dark:border-gray-800">
           <div className="min-w-0">
-            <h3 className="text-lg font-semibold text-gray-900 truncate">{document.fileName}</h3>
-            {detail ? <p className="text-sm text-gray-500">{detail.chunks} chunks</p> : null}
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">
+              {document.fileName}
+            </h3>
+            {detail ? (
+              <p className="text-sm text-gray-500 dark:text-gray-400">{detail.chunks} chunks</p>
+            ) : null}
           </div>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 flex-shrink-0 p-1"
+            className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0 p-1"
             aria-label="Close preview"
           >
             <X size={20} />
@@ -86,7 +90,7 @@ export function DocumentPreviewModal({ document, onClose, toast }: DocumentPrevi
 
         <div className="flex-1 overflow-y-auto p-4 md:p-6">
           {loading ? (
-            <div className="flex items-center justify-center gap-2 text-gray-400 py-12">
+            <div className="flex items-center justify-center gap-2 text-gray-400 dark:text-gray-500 py-12">
               <Loader2 size={20} className="animate-spin" />
               Loading document...
             </div>
@@ -94,11 +98,11 @@ export function DocumentPreviewModal({ document, onClose, toast }: DocumentPrevi
 
           {detail && !loading ? (
             isMarkdownFile(detail.fileName) ? (
-              <div className="prose prose-sm max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-pre:my-3 prose-pre:bg-gray-50 prose-pre:text-gray-800 prose-pre:border prose-pre:border-gray-200 prose-pre:rounded-lg prose-pre:shadow-none prose-pre:[&_code]:bg-transparent prose-pre:[&_code]:p-0 prose-code:text-blue-600 prose-code:bg-blue-50 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
+              <div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-2 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-pre:my-3 prose-pre:bg-gray-50 dark:prose-pre:bg-gray-800 prose-pre:text-gray-800 dark:prose-pre:text-gray-100 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:rounded-lg prose-pre:shadow-none prose-pre:[&_code]:bg-transparent prose-pre:[&_code]:p-0 prose-code:text-blue-600 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-950 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none">
                 <ReactMarkdown remarkPlugins={[remarkGfm]}>{detail.content}</ReactMarkdown>
               </div>
             ) : (
-              <pre className="whitespace-pre-wrap text-sm text-gray-800 font-sans">
+              <pre className="whitespace-pre-wrap text-sm text-gray-800 dark:text-gray-100 font-sans">
                 {detail.content}
               </pre>
             )
diff --git a/client/src/components/modals/UploadModal.tsx b/client/src/components/modals/UploadModal.tsx
index c5f2723..0bddecd 100644
--- a/client/src/components/modals/UploadModal.tsx
+++ b/client/src/components/modals/UploadModal.tsx
@@ -15,21 +15,26 @@ export function UploadModal({ show, uploading, onClose, onUpload }: UploadModalP
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
-      <div className="bg-white rounded-lg p-6 w-full max-w-md">
+      <div className="bg-white dark:bg-gray-900 rounded-lg p-6 w-full max-w-md">
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold">Upload Documents</h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Upload Documents
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+          >
             <X size={20} />
           </button>
         </div>
 
         <div
-          className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition"
+          className="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition"
           onClick={() => fileInputRef.current?.click()}
         >
-          <Upload size={32} className="mx-auto mb-2 text-gray-400" />
-          <p className="text-gray-600">Drop files here or click to browse</p>
-          <p className="text-sm text-gray-400 mt-1">.md, .txt files</p>
+          <Upload size={32} className="mx-auto mb-2 text-gray-400 dark:text-gray-500" />
+          <p className="text-gray-600 dark:text-gray-300">Drop files here or click to browse</p>
+          <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">.md, .txt files</p>
         </div>
 
         <input
@@ -42,7 +47,7 @@ export function UploadModal({ show, uploading, onClose, onUpload }: UploadModalP
         />
 
         {uploading && (
-          <div className="mt-4 flex items-center justify-center gap-2 text-blue-500">
+          <div className="mt-4 flex items-center justify-center gap-2 text-blue-500 dark:text-blue-400">
             <Loader2 size={16} className="animate-spin" />
             Uploading...
           </div>
diff --git a/client/src/components/ui/toast.tsx b/client/src/components/ui/toast.tsx
index 35ac205..55646d9 100644
--- a/client/src/components/ui/toast.tsx
+++ b/client/src/components/ui/toast.tsx
@@ -21,9 +21,10 @@ export function Toast({ id, title, description, variant = 'default', onClose }:
       className={cn(
         'pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all',
         {
-          'bg-white border-gray-200': variant === 'default',
-          'bg-green-50 border-green-200': variant === 'success',
-          'bg-red-50 border-red-200': variant === 'destructive',
+          'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-800': variant === 'default',
+          'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800':
+            variant === 'success',
+          'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800': variant === 'destructive',
         },
       )}
     >
@@ -31,9 +32,9 @@ export function Toast({ id, title, description, variant = 'default', onClose }:
         {title && (
           <p
             className={cn('text-sm font-semibold', {
-              'text-gray-900': variant === 'default',
-              'text-green-800': variant === 'success',
-              'text-red-800': variant === 'destructive',
+              'text-gray-900 dark:text-gray-100': variant === 'default',
+              'text-green-800 dark:text-green-200': variant === 'success',
+              'text-red-800 dark:text-red-200': variant === 'destructive',
             })}
           >
             {title}
@@ -42,9 +43,9 @@ export function Toast({ id, title, description, variant = 'default', onClose }:
         {description && (
           <p
             className={cn('text-sm', {
-              'text-gray-600': variant === 'default',
-              'text-green-700': variant === 'success',
-              'text-red-700': variant === 'destructive',
+              'text-gray-600 dark:text-gray-300': variant === 'default',
+              'text-green-700 dark:text-green-300': variant === 'success',
+              'text-red-700 dark:text-red-300': variant === 'destructive',
             })}
           >
             {description}
@@ -54,9 +55,9 @@ export function Toast({ id, title, description, variant = 'default', onClose }:
       <button
         onClick={() => onClose(id)}
         className={cn('rounded-md p-1 opacity-70 hover:opacity-100', {
-          'text-gray-500': variant === 'default',
-          'text-green-600': variant === 'success',
-          'text-red-600': variant === 'destructive',
+          'text-gray-500 dark:text-gray-400': variant === 'default',
+          'text-green-600 dark:text-green-400': variant === 'success',
+          'text-red-600 dark:text-red-400': variant === 'destructive',
         })}
       >
         <X size={16} />
diff --git a/client/src/hooks/useTheme.ts b/client/src/hooks/useTheme.ts
new file mode 100644
index 0000000..a6b59a3
--- /dev/null
+++ b/client/src/hooks/useTheme.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState, useCallback } from 'react';
+
+type Theme = 'light' | 'dark';
+
+function getInitialTheme(): Theme {
+  if (typeof window === 'undefined') return 'light';
+  const stored = localStorage.getItem('theme');
+  if (stored === 'light' || stored === 'dark') return stored;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+  }, []);
+
+  return { theme, toggleTheme };
+}
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index e88f055..e34a44f 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {