From f9b6cfdc0d8605ca9ac5b6795390fc4251220bf3 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Fri, 24 Apr 2026 16:49:02 +0800
Subject: [PATCH] fix: improve canvas chat dark mode

---
 components/canvas/CanvasChatPanel.tsx | 171 +++++++++++++-------------
 1 file changed, 87 insertions(+), 84 deletions(-)

diff --git a/components/canvas/CanvasChatPanel.tsx b/components/canvas/CanvasChatPanel.tsx
index 9b097e441..d4363255e 100644
--- a/components/canvas/CanvasChatPanel.tsx
+++ b/components/canvas/CanvasChatPanel.tsx
@@ -9018,7 +9018,7 @@ export function CanvasChatPanel({
         "w-[238px] max-h-[340px] overflow-hidden p-1.5",
         isVideoWorkspace
           ? "rounded-[18px] border border-border/60 bg-background/95 shadow-[0_18px_40px_-24px_rgba(15,23,42,0.35)] backdrop-blur-xl"
-          : "rounded-[18px] border border-[#cfd4dc] bg-[#f3f4f6]/90 shadow-[0_8px_20px_rgba(15,23,42,0.13)]"
+          : "rounded-[18px] border border-[#cfd4dc] bg-[#f3f4f6]/90 shadow-[0_8px_20px_rgba(15,23,42,0.13)] dark:border-white/10 dark:bg-zinc-900/95"
       )}
     >
       <div className="max-h-[312px] space-y-0.5 overflow-y-auto pr-1">
@@ -9030,7 +9030,7 @@ export function CanvasChatPanel({
               "h-[34px] rounded-xl px-2.5 [&>span:first-child]:hidden [&>span:last-child]:block [&>span:last-child]:w-full",
               isVideoWorkspace
                 ? "text-foreground focus:bg-background focus:text-foreground data-[state=checked]:bg-background data-[state=checked]:text-foreground"
-                : "text-[#2f3640] focus:bg-[#e7ebf0] focus:text-[#1f2937] data-[state=checked]:bg-[#e7ebf0] data-[state=checked]:text-[#1f2937]"
+                : "text-[#2f3640] focus:bg-[#e7ebf0] focus:text-[#1f2937] data-[state=checked]:bg-[#e7ebf0] data-[state=checked]:text-[#1f2937] dark:text-zinc-100 dark:focus:bg-white/10 dark:focus:text-white dark:data-[state=checked]:bg-white/10 dark:data-[state=checked]:text-white"
             )}
           >
             <span className="flex w-full items-center justify-between gap-2">
@@ -9040,7 +9040,7 @@ export function CanvasChatPanel({
                     "h-5 w-5 overflow-hidden rounded-full",
                     isVideoWorkspace
                       ? "border border-border/60 bg-background"
-                      : "border border-[#d4d9df] bg-white"
+                      : "border border-[#d4d9df] bg-white dark:border-white/10 dark:bg-white/10"
                   )}
                 >
                   {model.avatarUrl ? (
@@ -9473,9 +9473,9 @@ export function CanvasChatPanel({
                     </div>
 
                     {canvasSkillTags.length > 0 && (
-                      <div className="mb-8 rounded-3xl border border-[#eceef2] bg-white/90 p-4">
+                      <div className="mb-8 rounded-3xl border border-[#eceef2] bg-white/90 p-4 dark:border-white/10 dark:bg-zinc-900/75">
                         <div className="mb-3 text-center">
-                          <h3 className="text-[16px] font-semibold text-[#1f2937]">{canvasSkillTagsTitle}</h3>
+                          <h3 className="text-[16px] font-semibold text-[#1f2937] dark:text-zinc-100">{canvasSkillTagsTitle}</h3>
                         </div>
                         <div className="grid grid-cols-3 gap-2">
                           {canvasSkillTags.map((tag) => {
@@ -9493,8 +9493,8 @@ export function CanvasChatPanel({
                                 className={cn(
                                   "inline-flex min-w-0 items-center justify-center gap-1.5 rounded-2xl border px-2 py-1.5 text-[13px] font-medium transition-colors",
                                   isActive
-                                    ? "border-[#6d7fff] bg-[#eef1ff] text-[#3341a9]"
-                                    : "border-[#e4e7ec] bg-white text-[#30343b] hover:border-[#d6dae3] hover:bg-[#fafbfc]"
+                                    ? "border-[#6d7fff] bg-[#eef1ff] text-[#3341a9] dark:border-blue-400/40 dark:bg-blue-500/15 dark:text-blue-200"
+                                    : "border-[#e4e7ec] bg-white text-[#30343b] hover:border-[#d6dae3] hover:bg-[#fafbfc] dark:border-white/10 dark:bg-white/5 dark:text-zinc-200 dark:hover:border-white/20 dark:hover:bg-white/10"
                                 )}
                               >
                                 {tag.iconUrl ? (
@@ -9790,7 +9790,7 @@ export function CanvasChatPanel({
                                           ? renderPlainText(analysisSection.before, `before-${i}`)
                                           : null}
                                         <Collapsible
-                                          className="my-2 rounded-[20px] bg-[#f4f5f7] px-5 py-4"
+                                          className="my-2 rounded-[20px] bg-[#f4f5f7] px-5 py-4 ring-1 ring-black/5 dark:bg-zinc-900/70 dark:ring-white/10"
                                           open={analysisOpen}
                                           onOpenChange={(open) =>
                                             setAnalysisCollapseState((prev) => ({
@@ -9801,7 +9801,7 @@ export function CanvasChatPanel({
                                         >
                                           <CollapsibleTrigger className="flex w-full items-center justify-between gap-3 text-left">
                                             <span className="inline-flex items-center gap-2">
-                                              <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white text-[#9aa1ad] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.42)]">
+                                              <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white text-[#9aa1ad] shadow-[inset_0_0_0_1px_rgba(148,163,184,0.42)] dark:bg-white/10 dark:text-zinc-300 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]">
                                                 <svg
                                                   viewBox="0 0 24 24"
                                                   fill="currentColor"
@@ -9813,20 +9813,20 @@ export function CanvasChatPanel({
                                                   />
                                                 </svg>
                                               </span>
-                                              <span className="text-base font-semibold tracking-tight text-[#9aa1ad]">
+                                              <span className="text-base font-semibold tracking-tight text-[#9aa1ad] dark:text-zinc-300">
                                                 图片分析
                                               </span>
                                             </span>
                                             <ChevronDown
                                               className={cn(
-                                                "h-4 w-4 text-[#9aa1ad] transition-transform duration-200",
+                                                "h-4 w-4 text-[#9aa1ad] transition-transform duration-200 dark:text-zinc-400",
                                                 analysisOpen ? "rotate-180" : "rotate-0"
                                               )}
                                             />
                                           </CollapsibleTrigger>
                                           <CollapsibleContent
                                             className={cn(
-                                              "pt-3 text-[15px] font-medium leading-7 text-[#2f3640]",
+                                              "pt-3 text-[15px] font-medium leading-7 text-[#2f3640] dark:text-zinc-200",
                                               "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",
                                               "outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in"
                                             )}
@@ -9916,7 +9916,7 @@ export function CanvasChatPanel({
                                           ))}
                                         </div>
                                         {shouldShowDoneSummary ? (
-                                          <p className="text-[14px] font-medium leading-6 text-[#2f3640]">
+                                          <p className="text-[14px] font-medium leading-6 text-[#2f3640] dark:text-zinc-300">
                                             {CANVAS_IMAGE_DONE_SUMMARY}
                                           </p>
                                         ) : null}
@@ -9927,7 +9927,7 @@ export function CanvasChatPanel({
                                         {videoUrls.map((url, idx) => (
                                           <div
                                             key={`video-${idx}`}
-                                            className="overflow-hidden rounded-2xl border border-black/10 bg-black/5 p-2"
+                                            className="overflow-hidden rounded-2xl border border-black/10 bg-black/5 p-2 dark:border-white/10 dark:bg-white/5"
                                           >
                                             <video
                                               src={url}
@@ -9939,7 +9939,7 @@ export function CanvasChatPanel({
                                               href={url}
                                               target="_blank"
                                               rel="noreferrer"
-                                              className="mt-2 inline-flex text-xs text-blue-600 hover:underline"
+                                              className="mt-2 inline-flex text-xs text-blue-600 hover:underline dark:text-blue-300"
                                             >
                                               下载视频
                                             </a>
@@ -9966,8 +9966,9 @@ export function CanvasChatPanel({
                               <button
                                 type="button"
                                 className={cn(
-                                  "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5",
-                                  currentVote?.isUpvoted && "text-[#22a06b] bg-emerald-50/80"
+                                  "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5 dark:hover:bg-white/8",
+                                  currentVote?.isUpvoted &&
+                                    "bg-emerald-50/80 text-[#22a06b] dark:bg-emerald-500/15 dark:text-emerald-300"
                                 )}
                                 title="点赞"
                                 disabled={isVotingCurrentMessage}
@@ -9978,8 +9979,10 @@ export function CanvasChatPanel({
                               <button
                                 type="button"
                                 className={cn(
-                                  "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5",
-                                  currentVote && !currentVote.isUpvoted && "text-[#d94848] bg-rose-50/80"
+                                  "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-black/5 dark:hover:bg-white/8",
+                                  currentVote &&
+                                    !currentVote.isUpvoted &&
+                                    "bg-rose-50/80 text-[#d94848] dark:bg-rose-500/15 dark:text-rose-300"
                                 )}
                                 title="点踩"
                                 disabled={isVotingCurrentMessage}
@@ -10111,7 +10114,7 @@ export function CanvasChatPanel({
           {isDetailGenerationMode && (
             <div
               className={cn(
-                "order-3 mx-3 mb-11 overflow-y-auto rounded-2xl border border-black/10 bg-white p-3 pr-2",
+                "order-3 mx-3 mb-11 overflow-y-auto rounded-2xl border border-black/10 bg-white p-3 pr-2 dark:border-white/10 dark:bg-zinc-950/85",
                 "mt-1",
                 renderableVisibleMessages.length === 0 ? "max-h-[62vh]" : "max-h-[54vh]"
               )}
@@ -10252,8 +10255,8 @@ export function CanvasChatPanel({
                           "rounded-lg border px-3 py-2 text-left transition-all duration-150",
                           isDetailGenerating && "cursor-not-allowed opacity-60",
                           selected
-                            ? "border-[#5b7cff] bg-[#eef3ff] text-[#2f57d8] shadow-[0_0_0_1px_rgba(91,124,255,0.28)]"
-                            : "border-border/60 bg-background text-muted-foreground hover:border-[#9fb3ff] hover:bg-[#f8faff] hover:text-foreground"
+                            ? "border-[#5b7cff] bg-[#eef3ff] text-[#2f57d8] shadow-[0_0_0_1px_rgba(91,124,255,0.28)] dark:border-[#8ea2ff] dark:bg-[#23305f]/60 dark:text-[#dbe4ff]"
+                            : "border-border/60 bg-background text-muted-foreground hover:border-[#9fb3ff] hover:bg-[#f8faff] hover:text-foreground dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:border-[#8ea2ff]/70 dark:hover:bg-[#23305f]/40 dark:hover:text-zinc-50"
                         )}
                         aria-pressed={selected}
                       >
@@ -10862,7 +10865,7 @@ export function CanvasChatPanel({
               <div className="mb-2 flex">
                 <button
                   type="button"
-                  className="inline-flex items-center gap-2 rounded-full bg-[#f3f4f6] px-3 py-1.5 text-sm font-medium text-[#4b5563] transition-colors hover:bg-[#e9ebef]"
+                  className="inline-flex items-center gap-2 rounded-full bg-[#f3f4f6] px-3 py-1.5 text-sm font-medium text-[#4b5563] transition-colors hover:bg-[#e9ebef] dark:bg-white/8 dark:text-zinc-200 dark:hover:bg-white/12"
                   onClick={() => setSelectedSkillTagId(null)}
                   title="点击移除标签"
                 >
@@ -10875,10 +10878,10 @@ export function CanvasChatPanel({
                       decoding="async"
                     />
                   ) : (
-                    <SelectedSkillTagIcon className="h-4 w-4 text-[#8b5cf6]" />
+                    <SelectedSkillTagIcon className="h-4 w-4 text-[#8b5cf6] dark:text-violet-300" />
                   )}
                   <span>{selectedSkillTag.name}</span>
-                  <X className="h-3.5 w-3.5 text-[#9ca3af]" />
+                  <X className="h-3.5 w-3.5 text-[#9ca3af] dark:text-zinc-400" />
                 </button>
               </div>
             )}
@@ -10888,19 +10891,19 @@ export function CanvasChatPanel({
                   "mb-2 rounded-2xl px-3 py-2",
                   isVideoWorkspace
                     ? "border border-border/60 bg-background/72 shadow-sm"
-                    : "border border-[#dbe3ff] bg-[#f6f8ff]"
+                    : "border border-[#dbe3ff] bg-[#f6f8ff] dark:border-blue-400/20 dark:bg-blue-500/10"
                 )}
               >
                 <div
                   className={cn(
                     "flex items-center gap-2 text-sm font-medium",
-                    isVideoWorkspace ? "text-foreground" : "text-[#334155]"
+                    isVideoWorkspace ? "text-foreground" : "text-[#334155] dark:text-zinc-100"
                   )}
                 >
                   <Sparkles
                     className={cn(
                       "h-4 w-4",
-                      isVideoWorkspace ? "text-primary" : "text-[#4f46e5]"
+                      isVideoWorkspace ? "text-primary" : "text-[#4f46e5] dark:text-blue-300"
                     )}
                   />
                   <span>当前工作流设定</span>
@@ -10908,7 +10911,7 @@ export function CanvasChatPanel({
                 <div
                   className={cn(
                     "mt-1 text-xs leading-5",
-                    isVideoWorkspace ? "text-muted-foreground" : "text-[#5b6472]"
+                    isVideoWorkspace ? "text-muted-foreground" : "text-[#5b6472] dark:text-zinc-300"
                   )}
                 >
                   {workflowContext.summaryText}
@@ -10963,8 +10966,8 @@ export function CanvasChatPanel({
                       className={cn(
                         "inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
                         !isPresetAgentSelection
-                          ? "bg-[#eef2ff] text-[#4338ca]"
-                          : "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2]"
+                          ? "bg-[#eef2ff] text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200"
+                          : "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2] dark:bg-white/8 dark:text-zinc-300 dark:hover:bg-white/12"
                       )}
                     >
                       <Sparkles className="h-4 w-4" />
@@ -10976,8 +10979,8 @@ export function CanvasChatPanel({
                       className={cn(
                         "inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
                         isPresetAgentSelection
-                          ? "bg-[#eef2ff] text-[#4338ca]"
-                          : "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2]"
+                          ? "bg-[#eef2ff] text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200"
+                          : "bg-[#f4f5f7] text-[#5b6472] hover:bg-[#eceef2] dark:bg-white/8 dark:text-zinc-300 dark:hover:bg-white/12"
                       )}
                     >
                       <Sparkles className="h-4 w-4" />
@@ -10985,21 +10988,21 @@ export function CanvasChatPanel({
                     </button>
                   </>
                 ) : (
-                  <div className="inline-flex items-center gap-2 rounded-full bg-[#eef2ff] px-3 py-1.5 text-sm font-medium text-[#4338ca]">
+                  <div className="inline-flex items-center gap-2 rounded-full bg-[#eef2ff] px-3 py-1.5 text-sm font-medium text-[#4338ca] dark:bg-blue-500/15 dark:text-blue-200">
                     <Sparkles className="h-4 w-4" />
                     <span>Auto Agent</span>
                   </div>
                 )}
                 {!isPresetAgentSelection ? (
-                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
+                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
                     直接对话即可，也可上传图片让我分析、修图或继续生成
                   </div>
                 ) : selectedAgentPreset?.type === "text" ? (
-                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
+                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
                     可上传图片做分析，也可直接输入文案需求
                   </div>
                 ) : hasAgentUploadSlots ? (
-                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472]">
+                  <div className="inline-flex items-center rounded-full bg-[#f4f5f7] px-3 py-1.5 text-xs text-[#5b6472] dark:bg-white/8 dark:text-zinc-300">
                     {isWorkspacePresentation ? "请确认产品图1、产品图2、模特图槽位" : "请上传产品图1、产品图2、模特图"}
                   </div>
                 ) : null}
@@ -11010,10 +11013,10 @@ export function CanvasChatPanel({
                 className={cn(
                   "mb-2 rounded-2xl border px-3 py-3 shadow-sm",
                   activeAgentProgress.stage === "failed"
-                    ? "border-rose-200 bg-rose-50/80"
+                    ? "border-rose-200 bg-rose-50/80 dark:border-rose-500/25 dark:bg-rose-500/10"
                     : activeAgentProgress.stage === "clarify"
-                      ? "border-amber-200 bg-amber-50/80"
-                      : "border-sky-200 bg-sky-50/75"
+                      ? "border-amber-200 bg-amber-50/80 dark:border-amber-500/25 dark:bg-amber-500/10"
+                      : "border-sky-200 bg-sky-50/75 dark:border-sky-500/25 dark:bg-sky-500/10"
                 )}
               >
                 <div className="flex items-start gap-3">
@@ -11021,10 +11024,10 @@ export function CanvasChatPanel({
                     className={cn(
                       "mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
                       activeAgentProgress.stage === "failed"
-                        ? "bg-rose-100 text-rose-700"
+                        ? "bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300"
                         : activeAgentProgress.stage === "clarify"
-                          ? "bg-amber-100 text-amber-700"
-                          : "bg-sky-100 text-sky-700"
+                          ? "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
+                          : "bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300"
                     )}
                   >
                     {activeAgentProgress.stage === "failed" ? (
@@ -11039,16 +11042,16 @@ export function CanvasChatPanel({
                   </span>
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
-                      <span className="text-sm font-medium text-[#243041]">
+                      <span className="text-sm font-medium text-[#243041] dark:text-zinc-100">
                         {agentProgressTitle}
                       </span>
-                      <span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472]">
+                      <span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472] dark:bg-white/10 dark:text-zinc-300">
                         {AGENT_PROGRESS_STEPS.find(
                           (step) => step.key === activeAgentProgress.currentStep
                         )?.label || "处理中"}
                       </span>
                     </div>
-                    <div className="mt-1 text-xs leading-5 text-[#5b6472]">
+                    <div className="mt-1 text-xs leading-5 text-[#5b6472] dark:text-zinc-300">
                       {agentProgressMessage}
                     </div>
                     <div className="mt-3 grid grid-cols-5 gap-2">
@@ -11058,12 +11061,12 @@ export function CanvasChatPanel({
                           className={cn(
                             "rounded-xl border px-2 py-2 text-center",
                             step.state === "completed"
-                              ? "border-emerald-200 bg-emerald-50/80"
+                              ? "border-emerald-200 bg-emerald-50/80 dark:border-emerald-500/25 dark:bg-emerald-500/10"
                               : step.state === "current"
-                                ? "border-sky-200 bg-white/90"
+                                ? "border-sky-200 bg-white/90 dark:border-sky-500/25 dark:bg-sky-500/10"
                                 : step.state === "failed"
-                                  ? "border-rose-200 bg-rose-50/80"
-                                  : "border-white/70 bg-white/55"
+                                  ? "border-rose-200 bg-rose-50/80 dark:border-rose-500/25 dark:bg-rose-500/10"
+                                  : "border-white/70 bg-white/55 dark:border-white/10 dark:bg-white/5"
                           )}
                         >
                           <div className="flex items-center justify-center">
@@ -11074,10 +11077,10 @@ export function CanvasChatPanel({
                             ) : step.state === "current" ? (
                               <Loader2 className="h-3.5 w-3.5 animate-spin text-sky-600" />
                             ) : (
-                              <span className="h-2.5 w-2.5 rounded-full bg-[#cbd5e1]" />
+                              <span className="h-2.5 w-2.5 rounded-full bg-[#cbd5e1] dark:bg-zinc-600" />
                             )}
                           </div>
-                          <div className="mt-1 text-[10px] font-medium leading-4 text-[#52606d]">
+                          <div className="mt-1 text-[10px] font-medium leading-4 text-[#52606d] dark:text-zinc-300">
                             {step.label}
                           </div>
                         </div>
@@ -11092,8 +11095,8 @@ export function CanvasChatPanel({
                 className={cn(
                   "mb-2 rounded-2xl border px-3 py-3 shadow-sm",
                   activeAgentTargetLock.stage === "clarify"
-                    ? "border-amber-200 bg-amber-50/80"
-                    : "border-[#dbe3ff] bg-[#f6f8ff]"
+                    ? "border-amber-200 bg-amber-50/80 dark:border-amber-500/25 dark:bg-amber-500/10"
+                    : "border-[#dbe3ff] bg-[#f6f8ff] dark:border-blue-500/25 dark:bg-blue-500/10"
                 )}
               >
                 <div className="flex items-start gap-3">
@@ -11101,8 +11104,8 @@ export function CanvasChatPanel({
                     className={cn(
                       "mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl",
                       activeAgentTargetLock.stage === "clarify"
-                        ? "bg-amber-100 text-amber-700"
-                        : "bg-[#e8eeff] text-[#4f46e5]"
+                        ? "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
+                        : "bg-[#e8eeff] text-[#4f46e5] dark:bg-blue-500/15 dark:text-blue-300"
                     )}
                   >
                     {activeAgentTargetLock.stage === "clarify" ? (
@@ -11115,14 +11118,14 @@ export function CanvasChatPanel({
                   </span>
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
-                      <span className="text-sm font-medium text-[#243041]">
+                      <span className="text-sm font-medium text-[#243041] dark:text-zinc-100">
                         {agentTargetLockTitle}
                       </span>
-                      <span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472]">
+                      <span className="inline-flex items-center rounded-full bg-white/70 px-2 py-0.5 text-[11px] text-[#5b6472] dark:bg-white/10 dark:text-zinc-300">
                         {agentTargetResolutionLabel}
                       </span>
                       {Number(activeAgentTargetLock.confidence || 0) > 0 ? (
-                        <span className="text-[11px] text-[#6b7280]">
+                        <span className="text-[11px] text-[#6b7280] dark:text-zinc-400">
                           置信度 {Math.max(0, Math.round(Number(activeAgentTargetLock.confidence || 0)))}%
                         </span>
                       ) : null}
@@ -11131,14 +11134,14 @@ export function CanvasChatPanel({
                       className={cn(
                         "mt-1 whitespace-pre-wrap text-xs leading-5",
                         activeAgentTargetLock.stage === "clarify"
-                          ? "text-[#8a5a14]"
-                          : "text-[#5b6472]"
+                          ? "text-[#8a5a14] dark:text-amber-200"
+                          : "text-[#5b6472] dark:text-zinc-300"
                       )}
                     >
                       {agentTargetLockPrimaryMessage}
                     </div>
                     {agentTargetLockSecondaryMessage ? (
-                      <div className="mt-1 text-[11px] leading-5 text-[#6b7280]">
+                      <div className="mt-1 text-[11px] leading-5 text-[#6b7280] dark:text-zinc-400">
                         系统依据：{agentTargetLockSecondaryMessage}
                       </div>
                     ) : null}
@@ -11156,7 +11159,7 @@ export function CanvasChatPanel({
                             : item.positionLabel || `第${index + 1}张`
                         }
                       >
-                        <div className="overflow-hidden rounded-xl border border-white/70 bg-white shadow-sm">
+                        <div className="overflow-hidden rounded-xl border border-white/70 bg-white shadow-sm dark:border-white/10 dark:bg-white/5">
                           <img
                             src={buildPreviewImageUrl(item.url, 160)}
                             alt={item.title || item.positionLabel || `目标图 ${index + 1}`}
@@ -11446,12 +11449,12 @@ export function CanvasChatPanel({
                         isVideoWorkspace
                           ? "border border-border/60 bg-background text-foreground hover:bg-background/90"
                           : activeComposerMode === "video"
-                            ? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100"
+                            ? "border border-blue-500 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:border-blue-400/40 dark:bg-blue-500/15 dark:text-blue-200 dark:hover:bg-blue-500/20"
                             : activeComposerMode === "detail"
-                              ? "border border-violet-500 bg-violet-50 text-violet-700 hover:bg-violet-100"
+                              ? "border border-violet-500 bg-violet-50 text-violet-700 hover:bg-violet-100 dark:border-violet-400/40 dark:bg-violet-500/15 dark:text-violet-200 dark:hover:bg-violet-500/20"
                             : activeComposerMode === "image"
-                              ? "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100"
-                              : "border border-[#9eb3ff] bg-white text-zinc-700 hover:bg-zinc-50"
+                              ? "border border-purple-500 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-400/40 dark:bg-purple-500/15 dark:text-purple-200 dark:hover:bg-purple-500/20"
+                              : "border border-[#9eb3ff] bg-white text-zinc-700 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/8 dark:text-zinc-200 dark:hover:bg-white/12"
                       )}
                     >
                       <span className="flex items-center">
@@ -11496,7 +11499,7 @@ export function CanvasChatPanel({
                       "w-[156px] rounded-xl p-1.5",
                       isVideoWorkspace
                         ? "border border-border/60 bg-background/95 shadow-[0_18px_36px_-24px_rgba(15,23,42,0.35)] backdrop-blur-xl"
-                        : "border border-[#d6d9df] bg-[#f4f5f7]/90 shadow-[0_8px_18px_rgba(15,23,42,0.14)]"
+                        : "border border-[#d6d9df] bg-[#f4f5f7]/90 shadow-[0_8px_18px_rgba(15,23,42,0.14)] dark:border-white/10 dark:bg-zinc-900/95"
                     )}
                   >
                     {effectiveAgentEnabled ? (
@@ -11506,14 +11509,14 @@ export function CanvasChatPanel({
                           "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
                           isVideoWorkspace
                             ? "text-foreground"
-                            : "text-[#2e3238]",
+                            : "text-[#2e3238] dark:text-zinc-100",
                           activeComposerMode === "agent"
                             ? isVideoWorkspace
                               ? "bg-background"
-                              : "bg-white/80"
+                              : "bg-white/80 dark:bg-white/10"
                             : isVideoWorkspace
                               ? "hover:bg-background/80"
-                              : "hover:bg-white/70"
+                              : "hover:bg-white/70 dark:hover:bg-white/8"
                         )}
                         >
                           <CanvasToolbarIcon
@@ -11536,14 +11539,14 @@ export function CanvasChatPanel({
                           "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
                           isVideoWorkspace
                             ? "text-foreground"
-                            : "text-[#2e3238]",
+                            : "text-[#2e3238] dark:text-zinc-100",
                           activeComposerMode === "detail"
                             ? isVideoWorkspace
                               ? "bg-background"
-                              : "bg-white/80"
+                              : "bg-white/80 dark:bg-white/10"
                             : isVideoWorkspace
                               ? "hover:bg-background/80"
-                              : "hover:bg-white/70"
+                              : "hover:bg-white/70 dark:hover:bg-white/8"
                         )}
                       >
                         <CanvasToolbarIcon
@@ -11565,14 +11568,14 @@ export function CanvasChatPanel({
                         "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
                         isVideoWorkspace
                           ? "text-foreground"
-                          : "text-[#2e3238]",
+                          : "text-[#2e3238] dark:text-zinc-100",
                         activeComposerMode === "image"
                           ? isVideoWorkspace
                             ? "bg-background"
-                            : "bg-white/80"
+                            : "bg-white/80 dark:bg-white/10"
                           : isVideoWorkspace
                             ? "hover:bg-background/80"
-                            : "hover:bg-white/70"
+                            : "hover:bg-white/70 dark:hover:bg-white/8"
                       )}
                     >
                       <CanvasToolbarIcon
@@ -11593,14 +11596,14 @@ export function CanvasChatPanel({
                         "h-8 cursor-pointer rounded-lg px-2 text-[13px] font-medium",
                         isVideoWorkspace
                           ? "text-foreground"
-                          : "text-[#2e3238]",
+                          : "text-[#2e3238] dark:text-zinc-100",
                         activeComposerMode === "video"
                           ? isVideoWorkspace
                             ? "bg-background"
-                            : "bg-white/80"
+                            : "bg-white/80 dark:bg-white/10"
                           : isVideoWorkspace
                             ? "hover:bg-background/80"
-                            : "hover:bg-white/70"
+                            : "hover:bg-white/70 dark:hover:bg-white/8"
                       )}
                     >
                       <CanvasToolbarIcon
@@ -11683,8 +11686,8 @@ export function CanvasChatPanel({
                         ? "bg-primary/10 text-primary hover:bg-primary/12"
                         : "text-muted-foreground hover:bg-muted/70"
                       : deepThinkingEnabled
-                        ? "bg-[#eef4ff] text-[#3b5bcc] hover:bg-[#e5efff]"
-                        : "text-[#6b7280] hover:bg-[#f4f6f8]"
+                        ? "bg-[#eef4ff] text-[#3b5bcc] hover:bg-[#e5efff] dark:bg-blue-500/15 dark:text-blue-200 dark:hover:bg-blue-500/20"
+                        : "text-[#6b7280] hover:bg-[#f4f6f8] dark:text-zinc-400 dark:hover:bg-white/8"
                   )}
                   onClick={() => setDeepThinkingEnabled((prev) => !prev)}
                   disabled={isSubmitting}
@@ -11723,14 +11726,14 @@ export function CanvasChatPanel({
                       "h-8 w-8 rounded-full p-0 justify-center [&>svg]:hidden",
                       isVideoWorkspace
                         ? "border border-border/60 bg-background"
-                        : "border border-[#cfd4dc] bg-white"
+                        : "border border-[#cfd4dc] bg-white dark:border-white/10 dark:bg-white/8"
                     )}
                     title={getToolbarItem("chatModelSelector").label}
                   >
                     <span
                       className={cn(
                         "flex h-6 w-6 items-center justify-center overflow-hidden rounded-full",
-                        isVideoWorkspace ? "bg-background" : "bg-white"
+                        isVideoWorkspace ? "bg-background" : "bg-white dark:bg-transparent"
                       )}
                     >
                       {getToolbarItem("chatModelSelector").iconUrl ? (