feat: add Theme setting in General: Light / Dark / System

frontend/src/app/agent/components/agent-view/strategy-agent-area.tsx

@@ -27,10 +27,24 @@ const EmptyIllustration = () => (
     xmlns="http://www.w3.org/2000/svg"
     className="h-[185px] w-[258px]"
   >
-    <rect x="40" y="30" width="178" height="125" rx="8" fill="#F3F4F6" />
-    <rect x="60" y="60" width="138" height="8" rx="4" fill="#E5E7EB" />
-    <rect x="60" y="80" width="100" height="8" rx="4" fill="#E5E7EB" />
-    <rect x="60" y="100" width="120" height="8" rx="4" fill="#E5E7EB" />
+    <rect
+      x="40"
+      y="30"
+      width="178"
+      height="125"
+      rx="8"
+      className="fill-muted"
+    />
+    <rect x="60" y="60" width="138" height="8" rx="4" className="fill-border" />
+    <rect x="60" y="80" width="100" height="8" rx="4" className="fill-border" />
+    <rect
+      x="60"
+      y="100"
+      width="120"
+      height="8"
+      rx="4"
+      className="fill-border"
+    />
   </svg>
 );
 
@@ -79,9 +93,9 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
   if (isLoadingStrategies) return null;
 
   return (
-    <div className="flex flex-1 overflow-hidden">
+    <div className="flex flex-1 overflow-hidden bg-muted/30">
       {/* Left section: Strategy list */}
-      <div className="flex w-96 flex-col gap-4 border-r py-6 *:px-6">
+      <div className="flex w-96 flex-col gap-4 border-r bg-card py-6 *:px-6">
         <p className="font-semibold text-base">{t("strategy.title")}</p>
 
         {strategies && strategies.length > 0 ? (
@@ -99,7 +113,7 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
         ) : (
           <div className="flex flex-1 flex-col items-center justify-center gap-4">
             <EmptyIllustration />
-            <div className="flex flex-col gap-3 text-center text-base text-gray-400">
+            <div className="flex flex-col gap-3 text-center text-base text-muted-foreground">
               <p>{t("strategy.noStrategies")}</p>
               <p>{t("strategy.createFirst")}</p>
             </div>
@@ -135,7 +149,7 @@ const StrategyAgentArea: FC<AgentViewProps> = () => {
         ) : (
           <div className="flex size-full flex-col items-center justify-center gap-8">
             <EmptyIllustration />
-            <p className="font-normal text-base text-gray-400">
+            <p className="font-normal text-base text-muted-foreground">
               {t("strategy.noStrategies")}
             </p>
           </div>

frontend/src/app/agent/components/chat-conversation/chat-conversation-header.tsx

@@ -26,7 +26,7 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
 
         {/* Agent Info */}
         <div className="flex flex-col gap-1.5">
-          <h1 className="font-semibold text-gray-950 text-lg">
+          <h1 className="font-semibold text-foreground text-lg">
             {agent.display_name}
           </h1>
           <TagGroups tags={agent.agent_metadata.tags} />
@@ -40,10 +40,10 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
             <TooltipTrigger asChild>
               <Button
                 variant="secondary"
-                className="size-8 cursor-pointer rounded-lg hover:bg-gray-200"
+                className="size-8 cursor-pointer rounded-lg hover:bg-muted"
                 size="icon"
               >
-                <MessageCircle size={16} className="text-gray-700" />
+                <MessageCircle size={16} className="text-foreground" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("chat.newConversation")}</TooltipContent>
@@ -54,10 +54,10 @@ const ChatConversationHeader: FC<ChatConversationHeaderProps> = ({ agent }) => {
             <TooltipTrigger asChild>
               <Button
                 variant="secondary"
-                className="size-8 cursor-pointer rounded-lg hover:bg-gray-200"
+                className="size-8 cursor-pointer rounded-lg hover:bg-muted"
                 size="icon"
               >
-                <Settings size={16} className="text-gray-700" />
+                <Settings size={16} className="text-foreground" />
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("chat.settings")}</TooltipContent>

frontend/src/app/agent/components/chat-conversation/chat-input-area.tsx

@@ -48,9 +48,9 @@ const ChatInputArea: FC<ChatInputAreaProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-col gap-2 rounded-2xl bg-white p-4",
-        "border border-gray-200 shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
-        "focus-within:border-gray-300",
+        "flex flex-col gap-2 rounded-2xl bg-card p-4",
+        "border border-border shadow-[0px_4px_20px_8px_rgba(17,17,17,0.04)]",
+        "focus-within:border-ring",
         isWelcomeVariant && "w-2/3 min-w-[600px]",
         !isWelcomeVariant && "w-full",
         className,
@@ -72,7 +72,7 @@ const ChatInputArea: FC<ChatInputAreaProps> = ({
         disabled={disabled || !value.trim()}
         aria-label="Send message"
       >
-        <ArrowUp size={16} className="text-white" />
+        <ArrowUp size={16} className="text-primary-foreground" />
       </Button>
     </div>
   );

frontend/src/app/agent/components/chat-conversation/chat-item-area.tsx

@@ -28,9 +28,13 @@ const ChatItemArea: FC<ChatItemAreaProps> = ({ items }) => {
         >
           <div
             id="chat-item"
-            className={cn("max-w-[80%] rounded-2xl px-4", {
-              "ml-auto bg-gray-50 py-2.5": item.role === "user",
-            })}
+            className={cn(
+              "max-w-[80%] rounded-2xl px-4 text-foreground dark:text-white",
+              "dark:[&_a:hover]:text-sky-200 dark:[&_a]:text-sky-300 dark:[&_em]:text-white dark:[&_h1]:text-white dark:[&_h2]:text-white dark:[&_h3]:text-white dark:[&_h4]:text-white dark:[&_h5]:text-white dark:[&_h6]:text-white dark:[&_li]:text-white dark:[&_p]:text-white dark:[&_span]:text-white dark:[&_strong]:text-white",
+              {
+                "ml-auto bg-muted py-2.5": item.role === "user",
+              },
+            )}
           >
             {/* Render different message types based on payload structure */}
             {(() => {

frontend/src/app/agent/components/chat-conversation/chat-section-component.tsx

@@ -42,18 +42,18 @@ const ScheduledTaskResultComponent: FC<{ tasks: Record<string, TaskView> }> = ({
   }, [taskList, selectedTaskId]);
 
   return selectedItemContent ? (
-    <section className="flex flex-1 flex-col border-gray-200 border-l px-5 py-6">
+    <section className="flex flex-1 flex-col border-border border-l px-5 py-6">
       <BackButton className="mb-3" onClick={() => setSelectedItemContent("")} />
       <div className="scroll-container flex-1">
         <MarkdownRenderer content={selectedItemContent} />
       </div>
     </section>
   ) : (
-    <section className="flex flex-1 flex-col gap-5 border-gray-200 border-l px-5 py-6">
+    <section className="flex flex-1 flex-col gap-5 border-border border-l px-5 py-6">
       {/* Task Selector */}
       {taskList.length > 0 && (
         <Select value={selectedTaskId} onValueChange={setSelectedTaskId}>
-          <SelectTrigger className="rounded-lg bg-gray-200 p-1.5">
+          <SelectTrigger className="rounded-lg bg-muted p-1.5">
             <SelectValue placeholder="Select a task" />
           </SelectTrigger>
           <SelectContent>

frontend/src/app/agent/components/chat-conversation/chat-streaming-indicator.tsx

@@ -3,14 +3,14 @@ import { type FC, memo } from "react";
 const StreamingIndicator: FC = () => {
   return (
     <output
-      className="flex items-center gap-2 text-gray-500 text-sm"
+      className="flex items-center gap-2 text-muted-foreground text-sm"
       aria-live="polite"
       aria-label="AI is thinking"
     >
       <div className="flex space-x-1" aria-hidden="true">
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-0" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-150" />
-        <div className="h-2 w-2 animate-bounce rounded-full bg-gray-400 delay-300" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-0" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-150" />
+        <div className="h-2 w-2 animate-bounce rounded-full bg-muted-foreground delay-300" />
       </div>
       <span>AI is thinking...</span>
     </output>

frontend/src/app/agent/components/chat-conversation/chat-welcome-screen.tsx

@@ -23,7 +23,7 @@ const ChatWelcomeScreen: FC<ChatWelcomeScreenProps> = ({
 
       {/* Welcome content */}
       <div className="flex flex-1 flex-col items-center justify-center gap-12">
-        <h1 className="text-center font-semibold text-3xl text-gray-950 leading-12">
+        <h1 className="text-center font-semibold text-3xl text-foreground leading-12">
           {title}
         </h1>
 
@@ -41,37 +41,42 @@ const ChatWelcomeScreen: FC<ChatWelcomeScreenProps> = ({
 };
 
 const ChatBackground = () => (
-  <div className="-z-10 absolute inset-0 overflow-hidden opacity-30">
+  <div className="-z-10 absolute inset-0 overflow-hidden opacity-30 dark:opacity-15">
     {[
       {
         left: "12%",
         top: "50%",
         size: "h-[40vh] w-[18vw]",
-        colors: "from-yellow-100 to-yellow-200",
+        colors:
+          "from-yellow-100 to-yellow-200 dark:from-yellow-900/40 dark:to-yellow-800/30",
       },
       {
         left: "28%",
         top: "50%",
         size: "h-[38vh] w-[16vw]",
-        colors: "from-green-100 to-green-200",
+        colors:
+          "from-green-100 to-green-200 dark:from-green-900/40 dark:to-green-800/30",
       },
       {
         left: "45%",
         top: "50%",
         size: "h-[42vh] w-[19vw]",
-        colors: "from-teal-100 to-teal-200",
+        colors:
+          "from-teal-100 to-teal-200 dark:from-teal-900/40 dark:to-teal-800/30",
       },
       {
         left: "62%",
         top: "50%",
         size: "h-[40vh] w-[18vw]",
-        colors: "from-blue-100 to-blue-200",
+        colors:
+          "from-blue-100 to-blue-200 dark:from-blue-900/40 dark:to-blue-800/30",
       },
       {
         left: "78%",
         top: "50%",
         size: "h-[35vh] w-[15vw]",
-        colors: "from-purple-100 to-purple-200",
+        colors:
+          "from-purple-100 to-purple-200 dark:from-purple-900/40 dark:to-purple-800/30",
       },
     ].map((blur) => (
       <div

frontend/src/app/agent/components/strategy-items/modals/create-strategy-modal.tsx

@@ -234,7 +234,7 @@ const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
               type="button"
               variant="outline"
               onClick={currentStep === 1 ? resetAll : handleBack}
-              className="border-gray-100 py-4 font-semibold text-base"
+              className="py-4 font-semibold text-base"
             >
               {currentStep === 1
                 ? t("strategy.action.cancel")
@@ -255,7 +255,7 @@ const CreateStrategyModal: FC<CreateStrategyModalProps> = ({
                     await form3.handleSubmit();
                 }
               }}
-              className="relative py-4 font-semibold text-base text-white hover:bg-gray-800"
+              className="relative py-4 font-semibold text-base"
             >
               {isCreatingStrategy && <Spinner className="absolute left-4" />}
               {currentStep === 3

frontend/src/app/agent/components/strategy-items/modals/new-prompt-modal.tsx

@@ -65,7 +65,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
         showCloseButton={false}
         aria-describedby={undefined}
       >
-        <DialogTitle className="flex items-center justify-between font-medium text-gray-950 text-lg">
+        <DialogTitle className="flex items-center justify-between font-medium text-foreground text-lg">
           Create New Prompt
           <CloseButton onClick={handleCancel} />
         </DialogTitle>
@@ -76,7 +76,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
             <form.Field name="name">
               {(field) => (
                 <Field>
-                  <FieldLabel className="font-medium text-base text-gray-950">
+                  <FieldLabel className="font-medium text-base text-foreground">
                     Prompt Name
                   </FieldLabel>
                   <Input
@@ -94,7 +94,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
             <form.Field name="content">
               {(field) => (
                 <Field>
-                  <FieldLabel className="font-medium text-base text-gray-950">
+                  <FieldLabel className="font-medium text-base text-foreground">
                     Prompt Template
                   </FieldLabel>
                   <Textarea
@@ -122,7 +122,7 @@ const NewPromptModal: FC<NewPromptModalProps> = ({ onSave, children }) => {
           </Button>
           <Button
             type="submit"
-            className="flex-1 py-4 font-semibold text-base text-white hover:bg-gray-800"
+            className="flex-1 py-4 font-semibold text-base"
             onClick={form.handleSubmit}
             disabled={isSaving}
           >

frontend/src/app/agent/components/strategy-items/modals/share-portfolio-modal.tsx

@@ -121,8 +121,10 @@ const SharePortfolioModal: FC<{
         {/* Card to be captured */}
         <div
           ref={cardRef}
-          className="relative space-y-10 overflow-hidden rounded-2xl border border-gray-200 p-8"
+          className="relative space-y-10 overflow-hidden rounded-2xl border p-8"
           style={{
+            borderColor: "rgba(0, 0, 0, 0.1)",
+            color: "#111827",
             background:
               "linear-gradient(141deg, rgba(255, 255, 255, 0.32) 2.67%, rgba(255, 255, 255, 0.00) 48.22%), radial-gradient(109.08% 168.86% at 54.34% 8.71%, #FFF 0%, #FFF 37.09%, rgba(255, 255, 255, 0.30) 94.85%, rgba(0, 0, 0, 0.00) 100%), linear-gradient(90deg, rgba(255, 36, 61, 0.85) 0.01%, rgba(0, 99, 246, 0.85) 99.77%), #FFF",
           }}
@@ -134,14 +136,17 @@ const SharePortfolioModal: FC<{
                 ValueCell
               </span>
             </div>
-            <p className="font-medium text-black/30 text-sm">
+            <p
+              className="font-medium text-sm"
+              style={{ color: "rgba(0, 0, 0, 0.3)" }}
+            >
               {TimeUtils.now().format(TIME_FORMATS.DATETIME)}
             </p>
           </div>
 
           {/* Main Return */}
           <div className="space-y-4 text-center">
-            <div className="font-normal text-gray-950 text-xl">
+            <div className="font-normal text-xl">
               {TimeUtils.formUTCDiff(data.created_at)}-Day ROI
             </div>
             <div
@@ -155,7 +160,7 @@ const SharePortfolioModal: FC<{
           </div>
 
           {/* Details Grid */}
-          <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-gray-950 text-sm [&>span]:text-right">
+          <div className="grid grid-cols-[auto_1fr] gap-y-2 text-nowrap text-sm [&>span]:text-right">
             <p>P&L</p>
             <span style={{ color: stockColors[getChangeType(data.total_pnl)] }}>
               {formatChange(data.total_pnl, "", 2)}
@@ -181,15 +186,27 @@ const SharePortfolioModal: FC<{
             <span>{data.strategy_type}</span>
           </div>
 
-          <div className="flex items-center justify-between rounded-2xl border border-white/60 bg-white/20 p-4 shadow-[0,4px,20px,0,rgba(113,113,113,0.08)] backdrop-blur-sm">
+          <div
+            className="flex items-center justify-between rounded-2xl border p-4 shadow-[0,4px,20px,0,rgba(113,113,113,0.08)] backdrop-blur-sm"
+            style={{
+              borderColor: "rgba(255, 255, 255, 0.6)",
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+            }}
+          >
             <div className="space-y-1">
-              <div className="font-medium text-black/30 text-sm">Publisher</div>
-              <span className="font-normal text-base text-gray-950">
-                {name}
-              </span>
+              <div
+                className="font-medium text-sm"
+                style={{ color: "rgba(0, 0, 0, 0.3)" }}
+              >
+                Publisher
+              </div>
+              <span className="font-normal text-base">{name}</span>
             </div>
 
-            <div className="font-medium text-black/30 text-sm">
+            <div
+              className="font-medium text-sm"
+              style={{ color: "rgba(0, 0, 0, 0.3)" }}
+            >
               ValueCell.ai
             </div>
           </div>
@@ -199,14 +216,14 @@ const SharePortfolioModal: FC<{
         <div className="mt-6 flex gap-4">
           <Button
             variant="outline"
-            className="h-12 flex-1 rounded-xl border-gray-200 bg-white font-medium text-base hover:bg-gray-50"
+            className="h-12 flex-1 rounded-xl border-border bg-card font-medium text-base hover:bg-muted"
             onClick={() => setOpen(false)}
           >
             Cancel
           </Button>
 
           <Button
-            className="h-12 flex-1 rounded-xl bg-gray-950 font-medium text-base text-white hover:bg-gray-800"
+            className="h-12 flex-1 rounded-xl bg-primary font-medium text-base text-primary-foreground hover:bg-primary/90"
             onClick={handleDownload}
             disabled={isDownloading}
           >