feat: implement dark mode support and theme synchronization across components

Author: Junyi-99

webapp/_webapp/src/components/code-block.tsx

@@ -19,7 +19,7 @@ export const CodeBlock = ({ code, className }: CodeBlockProps) => {
 
   return (
     <pre
-      className={`p-2 rounded-md bg-gray-200 text-sm text-wrap break-words ${className}`}
+      className={`p-2 rounded-md bg-gray-200 dark:bg-default-200 text-sm text-wrap break-words ${className}`}
       dangerouslySetInnerHTML={{ __html: highlightedCode }}
     />
   );

webapp/_webapp/src/components/loading-indicator.tsx

@@ -148,7 +148,7 @@ export const LoadingIndicator = ({ text = "Thinking", estimatedSeconds = 0, erro
 
       {/* Progress Bar */}
       {estimatedSeconds > 0 && !isTimeout && !errorMessage && (
-        <div className="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
+        <div className="w-full h-1 bg-gray-200 dark:bg-default-300 rounded-full overflow-hidden">
           <div
             className="h-full transition-all duration-300 ease-out"
             style={{

webapp/_webapp/src/components/logo.tsx

@@ -6,7 +6,7 @@ type LogoProps = {
 
 export function Logo({ className }: LogoProps) {
   return (
-    <div className={cn("bg-gray-100 rounded-full p-4 mb-3", className)}>
+    <div className={cn("bg-gray-100 dark:bg-default-200 rounded-full p-4 mb-3", className)}>
       <svg width="64" height="64" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect width="320" height="320" fill="transparent" />
         <rect x="81" y="81" width="144" height="152" fill="transparent" />

webapp/_webapp/src/components/message-card.tsx

@@ -23,7 +23,7 @@ export const STYLES = {
   messageBox: {
     base: cn(),
     assistant: "px-3 pt-3 pb-1 my-2 !border !border-transparent",
-    user: "px-3 py-2 bg-gray-100 self-end my-2",
+    user: "px-3 py-2 bg-gray-100 dark:bg-default-200 self-end my-2",
     indicator: "px-3",
   },
   attachment: {

webapp/_webapp/src/components/message-entry-container/attachment-popover.tsx

@@ -4,8 +4,8 @@ import { STYLES } from "../message-card";
 // Components
 export const AttachmentPopover = ({ attachment }: { attachment: string }) => (
   <Popover placement="bottom" showArrow={true} className="!mt-1">
-    <PopoverTrigger className="bg-gray-200 !rounded-xl !flex !w-fit mt-1 noselect">
-      <span className="!text-xs !text-gray-400 border border-gray-300 !rounded-lg !px-1">attachment</span>
+    <PopoverTrigger className="bg-gray-200 dark:bg-default-200 !rounded-xl !flex !w-fit mt-1 noselect">
+      <span className="!text-xs !text-gray-400 dark:text-default-500 border border-gray-300 dark:border-default-300 !rounded-lg !px-1">attachment</span>
     </PopoverTrigger>
     <PopoverContent className={STYLES.attachment.content}>
       <div className="!px-1 !py-2" style={{ overflowWrap: "anywhere" }}>

webapp/_webapp/src/components/message-entry-container/tools/general.tsx

@@ -115,8 +115,12 @@ export const GeneralToolCard = ({ functionName, message, animated, isCollapsed:
         <div className="overflow-hidden">
           <div className={cn(
             "canselect rounded-md !border px-2 py-1 mt-1 transition-opacity duration-200 relative",
-            isCollapsed ? "opacity-0" : "opacity-100 !border-gray-200"
-          )}>
+            isCollapsed ? "opacity-0" : "opacity-100"
+          )}
+          style={{
+            borderColor: "var(--pd-border-color) !important",
+          }}
+          >
             {/* Scrollable content with max height - hide scrollbar */}
             <div
               ref={scrollContainerRef}

webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/comment-item.tsx

@@ -20,7 +20,7 @@ export const CommentItem = ({ comment, isSelected, onToggle }: CommentItemProps)
 
   return (
     <div
-      className={cn("border-t border-b !p-3 !transition-colors", isSelected ? "!bg-primary-50/50" : "!bg-white")}
+      className={cn("border-t border-b !p-3 !transition-colors", isSelected ? "!bg-primary-50/50 dark:!bg-primary-500/20" : "!bg-white dark:!bg-default-100")}
       id={comment.commentId}
     >
       <div className="!flex !items-center !justify-between !mb-2">
@@ -55,7 +55,7 @@ export const CommentItem = ({ comment, isSelected, onToggle }: CommentItemProps)
       {comment.quoteText && (
         <div className="!mb-2">
           <div className="!text-xs font-bold !text-gray-900 !mb-1">Section: {comment.section}</div>
-          <div className="!bg-gray-100 !border-l-4 !border-primary-500 !pl-3 !py-2 !text-sm !text-gray-800 !italic">
+          <div className="!bg-gray-100 dark:!bg-default-200 !border-l-4 !border-primary-500 !pl-3 !py-2 !text-sm !text-gray-800 dark:!text-default-200 !italic">
             "{isExpanded ? comment.quoteText : truncatedQuoteText}"
             {comment.quoteText.length > 100 && (
               <button

webapp/_webapp/src/components/message-entry-container/tools/paper-score-comment/filter-controls.tsx

@@ -79,7 +79,7 @@ export const FilterControls = ({
                   "!px-2 !py-1 !text-xs !rounded !border !transition-colors",
                   filterImportance === importance
                     ? "!bg-primary-100 !text-primary-800 !border-primary-300"
-                    : "!bg-gray-100 !text-gray-600 !border-gray-300 hover:!bg-gray-200",
+                    : "!bg-gray-100 dark:!bg-default-200 !text-gray-600 dark:!text-default-300 !border-gray-300 dark:!border-default-200 hover:!bg-gray-200 dark:hover:!bg-default-300",
                 )}
               >
                 {importance}

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/review-paper.tsx

@@ -16,7 +16,7 @@ const renderSeverityLevels = (threshold: string) => {
           <code
             className={cn(
               "text-xs px-1.5 py-0.5 rounded",
-              index < thresholdIndex ? "line-through text-gray-400 bg-gray-100" : "text-gray-700 bg-gray-100"
+              index < thresholdIndex ? "line-through text-gray-400 dark:text-default-500 bg-gray-100 dark:bg-default-200" : "text-gray-700 dark:text-default-200 bg-gray-100 dark:bg-default-200"
             )}
           >
             {level}
@@ -33,7 +33,7 @@ const renderSections = (sections: Array<string>) => {
     <span>
       {sections.map((section, index) => (
         <span key={section}>
-          <code className="text-xs px-1.5 py-0.5 rounded text-gray-700 bg-gray-100">
+          <code className="text-xs px-1.5 py-0.5 rounded text-gray-700 dark:text-default-200 bg-gray-100 dark:bg-default-200">
             {section}
           </code>
           {index < sections.length - 1 && ", "}

webapp/_webapp/src/components/message-entry-container/tools/xtramcp/verify-citations.tsx

@@ -96,15 +96,15 @@ export const VerifyCitationsCard = ({ functionName, message, preparing, animated
                         <span>
                           {files.map((file, index) => (
                             <span key={file}>
-                              <code className="px-1 py-0.5 bg-gray-100 rounded text-gray-700 font-mono text-xs">
+                              <code className="px-1 py-0.5 bg-gray-100 dark:bg-default-200 rounded text-gray-700 dark:text-default-200 font-mono text-xs">
                                 {file}
                               </code>
                               {index < files.length - 1 && ", "}
                             </span>
                           ))}
                         </span>
                       ) : (
-                        <code className="px-1 py-0.5 bg-gray-100 rounded text-gray-700 font-mono text-xs">
+                        <code className="px-1 py-0.5 bg-gray-100 dark:bg-default-200 rounded text-gray-700 dark:text-default-200 font-mono text-xs">
                           {files}
                         </code>
                       )}