feat(frontend/components): add theme toggle and dark mode support

Implemented a theme toggle button to switch between light, dark, and system themes. Updated various components to support dark mode styling, enhancing user experience across the application.

Modified files (12):
- globals.css: Added dark mode styles and variables
- layout.tsx: Integrated ThemeProvider for theme management
- ChatHeader.tsx: Included ThemeToggle component
- ErrorToast.tsx: Updated styles for dark mode
- SuggestionsBar.tsx: Enhanced styles for dark mode
- ConversationItem.tsx: Adjusted styles for dark mode
- ConversationList.tsx: Updated loading and empty states for dark mode
- ConversationSidebar.tsx: Improved sidebar styles for dark mode
- DeleteConfirmModal.tsx: Enhanced modal styles for dark mode
- LoadingIndicator.tsx: Updated loading indicator styles for dark mode
- ThemeToggle.tsx: New component for theme switching

Author: cristofima

src/frontend/task-agent-web/app/globals.css

@@ -1,10 +1,19 @@
 @import "tailwindcss";
 
+/* Configure dark mode to use class strategy instead of media query */
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
 }
 
+/* Dark mode CSS variables (activated by .dark class on html) */
+.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -16,13 +25,6 @@
   --animate-bounce: bounce 1s infinite;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 body {
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
@@ -99,6 +101,21 @@ html {
   background: #555;
 }
 
+/* Dark mode scrollbar */
+@media (prefers-color-scheme: dark) {
+  .overflow-auto::-webkit-scrollbar-track {
+    background: #1f2937;
+  }
+
+  .overflow-auto::-webkit-scrollbar-thumb {
+    background: #4b5563;
+  }
+
+  .overflow-auto::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+  }
+}
+
 /* Markdown content styling for chat messages */
 .markdown-content {
   line-height: 1.6;
@@ -170,6 +187,13 @@ html {
   border-radius: 3px;
   font-size: 85%;
   font-family: "Courier New", Consolas, Monaco, monospace;
+  background-color: #f3f4f6;
+  color: #1f2937;
+}
+
+.dark .markdown-content code {
+  background-color: #374151;
+  color: #e5e7eb;
 }
 
 /* Code blocks */
@@ -178,13 +202,19 @@ html {
   padding: 16px;
   overflow-x: auto;
   margin: 1em 0;
+  background-color: #1f2937;
+}
+
+.dark .markdown-content pre {
+  background-color: #111827;
 }
 
 .markdown-content pre code {
   background-color: transparent;
   padding: 0;
   font-size: 90%;
   line-height: 1.45;
+  color: #e5e7eb;
 }
 
 /* Tables */
@@ -194,23 +224,48 @@ html {
   margin: 1em 0;
   display: block;
   overflow-x: auto;
+  background-color: transparent;
 }
 
 .markdown-content table th,
 .markdown-content table td {
-  border: 1px solid currentColor;
+  border: 1px solid #d1d5db;
   padding: 8px 12px;
   text-align: left;
-  opacity: 0.8;
+}
+
+:where(.dark) .markdown-content table th,
+:where(.dark) .markdown-content table td {
+  border-color: #4b5563;
 }
 
 .markdown-content table th {
   font-weight: 600;
-  opacity: 0.9;
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+:where(.dark) .markdown-content table th {
+  background-color: #374151 !important;
+  color: #e5e7eb !important;
+}
+
+.markdown-content table td {
+  background-color: #ffffff;
+  color: #374151;
+}
+
+:where(.dark) .markdown-content table td {
+  background-color: #1f2937 !important;
+  color: #e5e7eb !important;
+}
+
+.markdown-content table tr:nth-child(even) td {
+  background-color: #f9fafb;
 }
 
-.markdown-content table tr:nth-child(even) {
-  opacity: 0.95;
+.dark .markdown-content table tr:nth-child(even) td {
+  background-color: #111827;
 }
 
 /* Links */

src/frontend/task-agent-web/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -24,11 +25,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

src/frontend/task-agent-web/components/chat/ChatHeader.tsx

@@ -2,10 +2,12 @@
 
 /**
  * ChatHeader Component
- * Displays the chat header with sidebar toggle and title
+ * Displays the chat header with sidebar toggle, title, and theme toggle
  * Always visible in both desktop and mobile
  */
 
+import { ThemeToggle } from "@/components/shared/ThemeToggle";
+
 interface ChatHeaderProps {
   onToggleSidebar: () => void;
   isSidebarOpen?: boolean;
@@ -16,12 +18,12 @@ export function ChatHeader({
   isSidebarOpen,
 }: ChatHeaderProps) {
   return (
-    <header className="flex-shrink-0 bg-white border-b border-gray-200 px-3 sm:px-4 py-3 sticky top-0 z-30">
+    <header className="flex-shrink-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-3 sm:px-4 py-3 sticky top-0 z-30">
       <div className="flex items-center gap-2 sm:gap-3">
         {/* Sidebar toggle button - only visible on mobile */}
         <button
           onClick={onToggleSidebar}
-          className="md:hidden p-2 rounded-lg hover:bg-gray-100 text-gray-700 transition-colors cursor-pointer"
+          className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors cursor-pointer"
           aria-label={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
         >
           <svg
@@ -42,15 +44,16 @@ export function ChatHeader({
         {/* Logo and Title */}
         <div className="flex items-center gap-2">
           <span className="text-xl sm:text-2xl">📋</span>
-          <h1 className="font-semibold text-gray-900 text-base sm:text-lg">
+          <h1 className="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">
             Task Agent
           </h1>
         </div>
 
         {/* Spacer */}
         <div className="flex-1"></div>
 
-        {/* Optional: Add more actions here like settings, user menu, etc */}
+        {/* Theme Toggle */}
+        <ThemeToggle />
       </div>
     </header>
   );

src/frontend/task-agent-web/components/chat/ErrorToast.tsx

@@ -13,9 +13,9 @@ export function ErrorToast({ error }: ErrorToastProps) {
   if (!error) return null;
 
   return (
-    <div className="fixed top-4 right-4 max-w-md bg-red-50 border-2 border-red-200 border-l-4 border-l-red-500 rounded-lg shadow-lg p-4 animate-fadeIn z-50">
+    <div className="fixed top-4 right-4 max-w-md bg-red-50 dark:bg-red-900/30 border-2 border-red-200 dark:border-red-800 border-l-4 border-l-red-500 rounded-lg shadow-lg p-4 animate-fadeIn z-50">
       <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 text-red-600">
+        <div className="flex-shrink-0 text-red-600 dark:text-red-400">
           <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
             <path
               fillRule="evenodd"
@@ -25,8 +25,8 @@ export function ErrorToast({ error }: ErrorToastProps) {
           </svg>
         </div>
         <div className="flex-1">
-          <h3 className="text-sm font-semibold text-red-900 mb-1">⚠️ Error</h3>
-          <p className="text-sm text-red-800">{error.message}</p>
+          <h3 className="text-sm font-semibold text-red-900 dark:text-red-300 mb-1">⚠️ Error</h3>
+          <p className="text-sm text-red-800 dark:text-red-400">{error.message}</p>
         </div>
       </div>
     </div>

src/frontend/task-agent-web/components/chat/SuggestionsBar.tsx

@@ -34,9 +34,9 @@ export function SuggestionsBar({
   };
 
   return (
-    <div className="mt-3 pt-3 border-t border-gray-200">
+    <div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
       <div className="flex items-start gap-2 mb-2">
-        <span className="text-xs font-semibold text-gray-600 flex items-center gap-1">
+        <span className="text-xs font-semibold text-gray-600 dark:text-gray-400 flex items-center gap-1">
           <svg
             className="w-3.5 h-3.5 sm:w-4 sm:h-4"
             fill="none"
@@ -63,10 +63,15 @@ export function SuggestionsBar({
               group relative px-2.5 sm:px-3 py-1.5
               text-xs sm:text-sm font-medium
               bg-gradient-to-r from-blue-50 to-blue-100
+              dark:from-blue-900/30 dark:to-blue-800/30
               hover:from-blue-100 hover:to-blue-200
+              dark:hover:from-blue-800/40 dark:hover:to-blue-700/40
               active:from-blue-200 active:to-blue-300
+              dark:active:from-blue-700/50 dark:active:to-blue-600/50
               text-blue-700 hover:text-blue-800
+              dark:text-blue-400 dark:hover:text-blue-300
               border border-blue-200 hover:border-blue-300
+              dark:border-blue-800 dark:hover:border-blue-700
               rounded-full
               transition-all duration-200
               cursor-pointer

src/frontend/task-agent-web/components/conversations/ConversationItem.tsx

@@ -50,8 +50,8 @@ export function ConversationItem({
         touch-manipulation
         ${
           isActive
-            ? "bg-blue-50 border border-blue-200"
-            : "hover:bg-gray-100 active:bg-gray-200 border border-transparent"
+            ? "bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800"
+            : "hover:bg-gray-100 dark:hover:bg-gray-800 active:bg-gray-200 dark:active:bg-gray-700 border border-transparent"
         }
       `}
     >
@@ -66,14 +66,14 @@ export function ConversationItem({
           <h3
             className={`
             text-xs sm:text-sm font-medium truncate mb-1
-            ${isActive ? "text-blue-900" : "text-gray-900"}
+            ${isActive ? "text-blue-900 dark:text-blue-300" : "text-gray-900 dark:text-gray-100"}
           `}
           >
             {title}
           </h3>
 
           {/* Metadata */}
-          <div className="flex items-center gap-2 text-xs text-gray-500">
+          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
             <span className="text-xs">
               {conversation.messageCount} messages
             </span>
@@ -87,7 +87,7 @@ export function ConversationItem({
           onClick={handleDelete}
           className="
             md:opacity-0 md:group-hover:opacity-100 transition-opacity
-            p-1.5 sm:p-1 rounded hover:bg-red-50 active:bg-red-100 text-gray-400 hover:text-red-600
+            p-1.5 sm:p-1 rounded hover:bg-red-50 dark:hover:bg-red-900/30 active:bg-red-100 dark:active:bg-red-900/50 text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400
             cursor-pointer
             touch-manipulation
           "

src/frontend/task-agent-web/components/conversations/ConversationList.tsx

@@ -28,7 +28,7 @@ export function ConversationList({
     return (
       <div className="flex flex-col items-center justify-center py-12 px-4">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-3" />
-        <p className="text-sm text-gray-500">Loading chats...</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Loading chats...</p>
       </div>
     );
   }
@@ -37,9 +37,9 @@ export function ConversationList({
   if (conversations.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
-        <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
+        <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
           <svg
-            className="w-6 h-6 text-gray-400"
+            className="w-6 h-6 text-gray-400 dark:text-gray-500"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -52,10 +52,10 @@ export function ConversationList({
             />
           </svg>
         </div>
-        <p className="text-sm text-gray-600 font-medium mb-1">
+        <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-1">
           No chats yet
         </p>
-        <p className="text-xs text-gray-500">
+        <p className="text-xs text-gray-500 dark:text-gray-500">
           Start a new chat to get started
         </p>
       </div>