feat: implement theme provider and enhance UI with dark/light mode support

- Added ThemeProvider component to manage theme switching.
- Integrated theme context into various components for consistent styling.
- Updated CSS for custom scrollbars and Prism.js theme switching.
- Refactored multiple components to utilize theme-aware styles for improved UI consistency.

🤖 Generated with [Claude Code](https://claude.ai/code)

Author: milisp

src/App.css

@@ -117,6 +117,146 @@
   body {
     @apply bg-background text-foreground;
   }
+  
+  /* Custom scrollbar for webkit browsers */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted-foreground) / 0.3);
+    border-radius: 3px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.5);
+  }
+  
+  /* For Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+}
+
+/* Prism.js theme switching */
+.light pre[class*="language-"],
+.light code[class*="language-"] {
+  color: #657b83 !important;
+  background: #fdf6e3 !important;
+}
+
+.dark pre[class*="language-"],
+.dark code[class*="language-"] {
+  color: #f8f8f2 !important;
+  background: #272822 !important;
+}
+
+.light .token.comment,
+.light .token.prolog,
+.light .token.doctype,
+.light .token.cdata {
+  color: #93a1a1 !important;
+}
+
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata {
+  color: #75715e !important;
+}
+
+.light .token.property,
+.light .token.tag,
+.light .token.constant,
+.light .token.symbol,
+.light .token.deleted {
+  color: #dc322f !important;
+}
+
+.dark .token.property,
+.dark .token.tag,
+.dark .token.constant,
+.dark .token.symbol,
+.dark .token.deleted {
+  color: #f92672 !important;
+}
+
+.light .token.boolean,
+.light .token.number {
+  color: #d33682 !important;
+}
+
+.dark .token.boolean,
+.dark .token.number {
+  color: #ae81ff !important;
+}
+
+.light .token.selector,
+.light .token.attr-name,
+.light .token.string,
+.light .token.char,
+.light .token.builtin,
+.light .token.inserted {
+  color: #859900 !important;
+}
+
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted {
+  color: #a6e22e !important;
+}
+
+.light .token.atrule,
+.light .token.attr-value,
+.light .token.keyword {
+  color: #268bd2 !important;
+}
+
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword {
+  color: #66d9ef !important;
+}
+
+.light .token.function,
+.light .token.class-name {
+  color: #b58900 !important;
+}
+
+.dark .token.function,
+.dark .token.class-name {
+  color: #e6db74 !important;
+}
+
+/* Specific scrollbar styles for conversation list and other containers */
+.conversation-list-scroll::-webkit-scrollbar,
+.overflow-y-auto::-webkit-scrollbar {
+  width: 6px;
+}
+
+.conversation-list-scroll::-webkit-scrollbar-track,
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.conversation-list-scroll::-webkit-scrollbar-thumb,
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+.conversation-list-scroll::-webkit-scrollbar-thumb:hover,
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
 }
 
 /* Streaming message styles */

src/App.tsx

@@ -7,6 +7,7 @@ import DxtPage from "./pages/dxt";
 import SettingsPage from "./pages/settings";
 import UsagePage from "./pages/usage";
 import { useLayoutStore } from "./stores/layoutStore";
+import { ThemeProvider } from "@/components/common/ThemeProvider";
 import "./App.css";
 
 export default function App() {
@@ -47,5 +48,9 @@ export default function App() {
     }
   }, []);
 
-  return <RouterProvider router={router} />;
+  return (
+    <ThemeProvider>
+      <RouterProvider router={router} />
+    </ThemeProvider>
+  );
 }

src/components/ChatView.tsx

@@ -183,7 +183,7 @@ export const ChatView: React.FC = () => {
     <div className="flex h-full min-h-0">
       {showSessionList && (
         <div className="w-64 border-r h-full overflow-y-auto flex-shrink-0">
-          <div className="flex flex-col h-full bg-gray-50">
+          <div className="flex flex-col h-full bg-background">
 
             <DebugInfo
               conversationListTab={conversationListTab}

src/components/NotesView.tsx

@@ -8,7 +8,7 @@ export const NotesView: React.FC = () => {
   return (
     <div className="flex h-full min-h-0">
       {showNotesList && (
-        <div className="w-64 border-r h-full flex-shrink-0">
+        <div className="w-64 border-r h-full flex-shrink-0 dark:border-gray-700">
           <NoteList />
         </div>
       )}

src/components/chat/ChatInput.tsx

@@ -87,7 +87,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   };
 
   return (
-    <div className="flex-shrink-0 border-t p-4 bg-white">
+    <div className="flex-shrink-0 border-t p-4 bg-background">
       <div className="relative">
         {/* File references and media attachments inside textarea */}
         {(fileReferences.length > 0 || mediaAttachments.length > 0) && (
@@ -111,7 +111,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           onChange={(e) => onInputChange(e.target.value)}
           onKeyDown={handleKeyPress}
           placeholder={placeholderOverride || "Ask Codex to do anything"}
-          className={`min-h-[60px] max-h-[200px] pr-32 bg-gray-100 resize-none overflow-y-auto pb-8 ${
+          className={`min-h-[60px] max-h-[200px] pr-32 bg-muted/50 resize-none overflow-y-auto pb-8 ${
             (fileReferences.length > 0 || mediaAttachments.length > 0) ? 'pt-8' : ''
           }`}
           disabled={false}
@@ -136,7 +136,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             <Button
               onClick={handleStopStreaming}
               size="sm"
-              className="bg-red-500 hover:bg-red-600 text-white h-8 w-8 p-0"
+              className="bg-destructive hover:bg-destructive/90 text-destructive-foreground h-8 w-8 p-0"
               variant="default"
             >
               <Square className="w-4 h-4" />

src/components/chat/ConversationItem.tsx

@@ -67,40 +67,40 @@ export function ConversationItem({
     <div
       key={`${tabPrefix}-${conversation.id}-${index}`}
       className={cn(
-        "group relative p-3 rounded-lg cursor-pointer border transition-all hover:bg-white hover:shadow-sm",
+        "group relative p-3 rounded-lg cursor-pointer border transition-all hover:bg-accent hover:shadow-sm",
         isCurrentlySelected
-          ? "bg-blue-100 border-blue-300 shadow-sm"
-          : "bg-white border-transparent hover:border-gray-200",
+          ? "bg-primary/10 border-primary/30 shadow-sm"
+          : "bg-card border-transparent hover:border-border",
       )}
       onClick={() => onSelectConversation(conversation)}
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-1">
-            <MessageSquare className="h-3 w-3 text-gray-400 flex-shrink-0" />
-            <h4 className="text-sm font-medium truncate flex-1 text-gray-900">
+            <MessageSquare className="h-3 w-3 text-muted-foreground flex-shrink-0" />
+            <h4 className="text-sm font-medium truncate flex-1 text-foreground">
               {conversation.title}
             </h4>
             {isFavorited && (
               <Star className="h-3 w-3 text-yellow-500 fill-current" />
             )}
           </div>
-          <p className="text-xs text-gray-500 mt-1 line-clamp-2">
+          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
             {getPreviewText(conversation)}
           </p>
           {showSessionId && (
             <div className="mt-1 mb-1">
-              <span className="text-xs text-blue-600 font-mono bg-blue-50 px-1 py-0.5 rounded">
+              <span className="text-xs text-primary font-mono bg-primary/10 px-1 py-0.5 rounded">
                 ID: {conversation.id.substring(0, 8)}...
               </span>
             </div>
           )}
 
           <div className="flex items-center justify-between mt-2">
-            <span className="text-xs text-gray-400">
+            <span className="text-xs text-muted-foreground/70">
               {formatDate(conversation.updatedAt)}
             </span>
-            <span className="text-xs text-gray-400">
+            <span className="text-xs text-muted-foreground/70">
               {conversation.messages.length} messages
             </span>
           </div>
@@ -134,7 +134,7 @@ export function ConversationItem({
               <DropdownMenuContent align="end">
                 <DropdownMenuItem
                   onClick={(e) => onDeleteConversation(conversation.id, e)}
-                  className="text-red-600 hover:text-red-700"
+                  className="text-destructive hover:text-destructive/80"
                 >
                   <Trash2 className="h-3 w-3 mr-2" />
                   Delete

src/components/chat/ConversationList.tsx

@@ -25,7 +25,7 @@ export function ConversationList({
 
   if (conversations.length === 0) {
     return (
-      <div className="p-4 text-center text-gray-500 text-sm">
+      <div className="p-4 text-center text-muted-foreground text-sm">
         {isFav ? (
           <>
             <p>No favorite conversations</p>
@@ -46,7 +46,7 @@ export function ConversationList({
   }
 
   return (
-    <div className="space-y-1 p-2 overflow-y-auto">
+    <div className="space-y-1 p-2 overflow-y-auto conversation-list-scroll">
       {conversations.map((conversation: Conversation, index: number) => {
         const isCurrentlySelected = currentConversationId === conversation.id;
         const isFavorited = isFav ? true : favoriteStatuses[conversation.id] || false;

src/components/chat/ConversationTabs.tsx

@@ -94,8 +94,8 @@ export function ConversationTabs({
         key={`sessions-${conversation.id}-${index}`}
         className={`group relative p-3 rounded-lg cursor-pointer border transition-all hover:shadow-sm ${
           isCurrentlySelected 
-            ? 'bg-blue-50 border-blue-300 shadow-sm' 
-            : 'bg-white border-gray-200 hover:bg-white'
+            ? 'bg-primary/10 border-primary/30 shadow-sm' 
+            : 'bg-card border-border hover:bg-accent'
         }`}
         onClick={() => onSelectConversation(conversation)}
       >
@@ -104,22 +104,22 @@ export function ConversationTabs({
             <div className="flex items-center gap-2 mb-1">
               <Circle className="h-3 w-3 text-green-500 fill-current flex-shrink-0" />
               <h4 className={`text-sm font-medium ${
-                isCurrentlySelected ? 'text-blue-900' : 'text-gray-900'
+                isCurrentlySelected ? 'text-primary' : 'text-foreground'
               }`}>
                 {conversation.title}
                 {isCurrentlySelected && (
-                  <span className="ml-1 text-xs text-blue-600 font-normal">
+                  <span className="ml-1 text-xs text-primary/80 font-normal">
                     (Current)
                   </span>
                 )}
               </h4>
             </div>
-            <p className="text-xs text-gray-500 font-mono truncate">
+            <p className="text-xs text-muted-foreground font-mono truncate">
               {conversation.id}
             </p>
             <div className="flex items-center justify-between mt-2">
               <span className="text-xs text-green-600">Active</span>
-              <span className="text-xs text-gray-400">
+              <span className="text-xs text-muted-foreground/70">
                 {conversation.messages.length} messages
               </span>
             </div>
@@ -129,7 +129,7 @@ export function ConversationTabs({
             <Button
               variant="ghost"
               size="sm"
-              className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+              className="h-6 w-6 p-0 text-destructive hover:text-destructive/80"
               onClick={(e) => {
                 e.stopPropagation();
                 onKillSession?.(conversation.id);
@@ -160,10 +160,10 @@ export function ConversationTabs({
       </TabsList>
 
       <TabsContent value="all" className="flex-1 overflow-y-auto mt-0">
-        <div className="p-3 bg-white border-b">
+        <div className="p-3 bg-background border-b">
           <div className="flex gap-2">
             <div className="relative flex-1">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-muted-foreground" />
               <Input
                 placeholder="Search all conversations..."
                 value={searchQueries.all}
@@ -195,9 +195,9 @@ export function ConversationTabs({
       </TabsContent>
 
       <TabsContent value="favorites" className="flex-1 overflow-y-auto mt-0">
-        <div className="p-3 bg-white border-b">
+        <div className="p-3 bg-background border-b">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-muted-foreground" />
             <Input
               placeholder="Search favorite conversations..."
               value={searchQueries.favorites}
@@ -219,9 +219,9 @@ export function ConversationTabs({
       </TabsContent>
 
       <TabsContent value="sessions" className="flex-1 overflow-y-auto mt-0">
-        <div className="p-3 bg-white border-b">
+        <div className="p-3 bg-background border-b">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-muted-foreground" />
             <Input
               placeholder="Search active sessions..."
               value={searchQueries.sessions}
@@ -231,7 +231,7 @@ export function ConversationTabs({
           </div>
         </div>
         {filteredConversations.length === 0 ? (
-          <div className="p-4 text-center text-gray-500 text-sm">
+          <div className="p-4 text-center text-muted-foreground text-sm">
             <p>No active sessions</p>
             <p className="text-xs mt-1">
               Send a message to create a session