diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 7d798a811..e363b0f1c 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -883,22 +883,26 @@ export function RealtimeCanvasDialog({
     if (status === "live")
       return {
         label: "实时中",
-        className: "border border-[#e5e5e5] bg-white text-[#111111]",
+        className:
+          "border border-[#e5e5e5] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white",
       };
     if (status === "connecting") {
       return {
         label: "连接中",
-        className: "border border-[#e5e5e5] bg-white text-[#111111]",
+        className:
+          "border border-[#e5e5e5] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white",
       };
     }
     if (status === "error")
       return {
         label: "异常",
-        className: "border border-[#e5e5e5] bg-[#fafafa] text-[#111111]",
+        className:
+          "border border-[#e5e5e5] bg-[#fafafa] text-[#111111] dark:border-red-400/25 dark:bg-red-500/10 dark:text-red-100",
       };
     return {
       label: "待启动",
-      className: "border border-[#e5e5e5] bg-white text-[#666666]",
+      className:
+        "border border-[#e5e5e5] bg-white text-[#666666] dark:border-white/12 dark:bg-white/8 dark:text-white/58",
     };
   }, [status]);
 
@@ -3210,17 +3214,17 @@ export function RealtimeCanvasDialog({
   }, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]);
 
   const floatingSurfaceClass =
-    "border border-[#e5e5e5] bg-white/96 shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_20px_42px_rgba(0,0,0,0.08)] backdrop-blur-xl";
+    "border border-[#e5e5e5] bg-white/96 text-[#111111] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_20px_42px_rgba(0,0,0,0.08)] backdrop-blur-xl dark:border-white/12 dark:bg-[#111317]/92 dark:text-white dark:shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_24px_56px_rgba(0,0,0,0.45)]";
   const controlSurfaceClass =
-    "border border-[#e5e5e5] bg-white text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_1px_2px_rgba(0,0,0,0.04)]";
+    "border border-[#e5e5e5] bg-white text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_1px_2px_rgba(0,0,0,0.04)] dark:border-white/12 dark:bg-white/[0.07] dark:text-white dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08),0_1px_2px_rgba(0,0,0,0.35)]";
   const softActionButtonClass =
-    "border border-[#111111] bg-[#111111] text-white shadow-[0_12px_24px_rgba(0,0,0,0.12)] transition hover:bg-black hover:text-white";
+    "border border-[#111111] bg-[#111111] text-white shadow-[0_12px_24px_rgba(0,0,0,0.12)] transition hover:bg-black hover:text-white dark:border-white dark:bg-white dark:text-[#111111] dark:shadow-[0_14px_30px_rgba(0,0,0,0.42)] dark:hover:bg-white/90 dark:hover:text-[#111111]";
   const primaryActionButtonClass =
-    "border border-[#111111] bg-[#111111] text-white shadow-[0_16px_30px_rgba(0,0,0,0.18)] transition hover:bg-black hover:border-black";
+    "border border-[#111111] bg-[#111111] text-white shadow-[0_16px_30px_rgba(0,0,0,0.18)] transition hover:bg-black hover:border-black dark:border-white dark:bg-white dark:text-[#111111] dark:hover:border-white/90 dark:hover:bg-white/90";
   const compactToolButtonClass =
-    "h-9 w-9 rounded-[16px] border border-transparent text-[#666666] transition hover:border-[#e5e5e5] hover:bg-[#fafafa] hover:text-[#111111]";
+    "h-9 w-9 rounded-[16px] border border-transparent text-[#666666] transition hover:border-[#e5e5e5] hover:bg-[#fafafa] hover:text-[#111111] dark:text-white/58 dark:hover:border-white/12 dark:hover:bg-white/10 dark:hover:text-white";
   const compactToolButtonActiveClass =
-    "border-[#111111] bg-[#111111] text-white shadow-[0_10px_20px_rgba(0,0,0,0.12)] hover:bg-black hover:text-white";
+    "border-[#111111] bg-[#111111] text-white shadow-[0_10px_20px_rgba(0,0,0,0.12)] hover:bg-black hover:text-white dark:border-white dark:bg-white dark:text-[#111111] dark:hover:bg-white/90 dark:hover:text-[#111111]";
   const currentModeLabel =
     brushMode === "select"
       ? "鼠标"
@@ -3267,14 +3271,14 @@ export function RealtimeCanvasDialog({
           )}
         >
 	          <button
-	            className="inline-flex h-12 shrink-0 items-center gap-3 rounded-[22px] border border-white/90 bg-white/80 px-4 text-left text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95)] transition hover:bg-white"
+	            className="inline-flex h-12 shrink-0 items-center gap-3 rounded-[22px] border border-white/90 bg-white/80 px-4 text-left text-[#111111] shadow-[inset_0_1px_0_rgba(255,255,255,0.95)] transition hover:bg-white dark:border-white/12 dark:bg-white/8 dark:text-white dark:shadow-none dark:hover:bg-white/12"
 	            onClick={handleCloseRealtime}
 	            title={realtimeReturnCanvasItem.label}
 	            type="button"
 	          >
-	            <span className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white shadow-[0_8px_18px_rgba(0,0,0,0.06)]">
+	            <span className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white shadow-[0_8px_18px_rgba(0,0,0,0.06)] dark:border-white/12 dark:bg-white/10 dark:shadow-none">
 	              <CanvasToolbarIcon
-	                className="h-4 w-4 text-[#111111]"
+	                className="h-4 w-4 text-[#111111] dark:text-white"
 	                fallback={ArrowLeft}
 	                item={realtimeReturnCanvasItem}
 	              />
@@ -3284,13 +3288,13 @@ export function RealtimeCanvasDialog({
 	            </span>
 	          </button>
 
-          <div className="inline-flex h-12 min-w-0 items-center gap-1 rounded-[22px] border border-[#ebebeb] bg-[#fafafa] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)]">
+          <div className="inline-flex h-12 min-w-0 items-center gap-1 rounded-[22px] border border-[#ebebeb] bg-[#fafafa] p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.9)] dark:border-white/12 dark:bg-white/8 dark:shadow-none">
             <button
               className={cn(
                 "group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition",
                 workspaceMode === "realtime"
                   ? softActionButtonClass
-                  : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111]"
+                  : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111] dark:text-white/58 dark:hover:bg-white/10 dark:hover:text-white"
               )}
               onClick={() => handleWorkspaceModeChange("realtime")}
               type="button"
@@ -3310,7 +3314,7 @@ export function RealtimeCanvasDialog({
                 "group inline-flex h-full min-w-0 items-center gap-2 rounded-[18px] px-4 text-[14px] font-medium tracking-[-0.02em] transition",
                 workspaceMode === "enhance-pro"
                   ? softActionButtonClass
-                  : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111]"
+                  : "border border-transparent bg-transparent text-[#666666] hover:bg-white hover:text-[#111111] dark:text-white/58 dark:hover:bg-white/10 dark:hover:text-white"
               )}
               onClick={() => handleWorkspaceModeChange("enhance-pro")}
               type="button"
@@ -3337,10 +3341,10 @@ export function RealtimeCanvasDialog({
         >
           <div className="flex items-center justify-between">
             <div>
-              <div className="font-semibold text-[#111111] text-sm">
+              <div className="font-semibold text-[#111111] text-sm dark:text-white">
                 保存项目
               </div>
-              <div className="text-[#666666] text-xs">
+              <div className="text-[#666666] text-xs dark:text-white/55">
                 请输入项目名称后保存当前画布
               </div>
             </div>
@@ -3395,10 +3399,10 @@ export function RealtimeCanvasDialog({
         >
           <div className="flex items-center justify-between">
             <div>
-              <div className="font-semibold text-[#111111] text-sm">
+              <div className="font-semibold text-[#111111] text-sm dark:text-white">
                 项目列表
               </div>
-              <div className="text-[#666666] text-xs">
+              <div className="text-[#666666] text-xs dark:text-white/55">
                 本地保存，便于下次继续编辑
               </div>
             </div>
@@ -3510,11 +3514,11 @@ export function RealtimeCanvasDialog({
       ) : (
         <>
           {/* Main Canvas Area - Split View */}
-          <div className="relative flex h-full w-full bg-[#fafafa]">
+          <div className="relative flex h-full w-full bg-[#fafafa] dark:bg-[#08090b]">
             {/* Left: Input Canvas */}
-            <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden border-[#e5e5e5] border-r">
+            <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden border-[#e5e5e5] border-r dark:border-white/10">
               <div
-                className="relative flex h-full w-full items-center justify-center bg-white"
+                className="relative flex h-full w-full items-center justify-center bg-white dark:bg-[#0c0d10]"
                 onDragEnter={handleDragEnter}
                 onDragLeave={handleDragLeave}
                 onDragOver={handleDragOver}
@@ -3523,7 +3527,7 @@ export function RealtimeCanvasDialog({
               >
                 <div className="pattern-grid-lg pointer-events-none absolute inset-0 opacity-[0.03]" />
                 {isDragImportActive ? (
-                  <div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-[#111111] border-dashed bg-white/92 font-medium text-[#111111] text-sm shadow-inner">
+                  <div className="absolute inset-6 z-20 flex items-center justify-center rounded-[28px] border-2 border-[#111111] border-dashed bg-white/92 font-medium text-[#111111] text-sm shadow-inner dark:border-white/70 dark:bg-[#111317]/92 dark:text-white">
                     松开鼠标，上传图片到图层
                   </div>
                 ) : null}
@@ -3625,9 +3629,9 @@ export function RealtimeCanvasDialog({
                   floatingSurfaceClass
                 )}
               >
-	                <div className="flex items-center justify-center border-[#e5e5e5] border-b pb-3">
+	                <div className="flex items-center justify-center border-[#e5e5e5] border-b pb-3 dark:border-white/12">
 	                  <div
-	                    className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white text-[#111111]"
+	                    className="flex h-8 w-8 items-center justify-center rounded-full border border-[#ececec] bg-white text-[#111111] dark:border-white/12 dark:bg-white/10 dark:text-white"
 	                    title={realtimeLayerPanelItem.label}
 	                  >
 	                    <CanvasToolbarIcon
@@ -3639,16 +3643,16 @@ export function RealtimeCanvasDialog({
 	                </div>
                 <div className="mt-2 flex flex-1 flex-col items-center space-y-2 overflow-y-auto py-1">
                   {imageLayers.length === 0 ? (
-                    <div className="rounded-2xl border border-[#e5e5e5] border-dashed px-1 py-4 text-center text-[10px] text-[#666666] leading-4">
+                    <div className="rounded-2xl border border-[#e5e5e5] border-dashed px-1 py-4 text-center text-[10px] text-[#666666] leading-4 dark:border-white/12 dark:text-white/55">
                       暂无图层
                     </div>
                   ) : (
                     [...imageLayers].reverse().map((layer) => (
                       <button
                         className={cn(
-                          "flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-[#f5f5f5]",
+                          "flex h-12 w-12 shrink-0 items-center justify-center rounded-[18px] p-1.5 transition hover:bg-[#f5f5f5] dark:hover:bg-white/10",
                           selectedLayerId === layer.id
-                            ? "bg-[#f5f5f5] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]"
+                            ? "bg-[#f5f5f5] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)] dark:bg-white/10 dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.14)]"
                             : ""
                         )}
                         draggable
@@ -3692,7 +3696,7 @@ export function RealtimeCanvasDialog({
                   {isLayerSplitEnabled ? (
                     <Button
                       className={cn(
-                        "h-10 rounded-xl px-0 hover:bg-[#f5f5f5]",
+                        "h-10 rounded-xl px-0 hover:bg-[#f5f5f5] dark:hover:bg-white/10",
                         controlSurfaceClass
                       )}
                       disabled={isLayerSplitImporting}
@@ -3714,7 +3718,7 @@ export function RealtimeCanvasDialog({
                   ) : null}
                   <Button
                     className={cn(
-                      "h-10 rounded-xl px-0 hover:bg-[#f5f5f5]",
+                      "h-10 rounded-xl px-0 hover:bg-[#f5f5f5] dark:hover:bg-white/10",
                       controlSurfaceClass
                     )}
                     disabled={isLayerSplitImporting}
@@ -3734,7 +3738,7 @@ export function RealtimeCanvasDialog({
             </div>
 
             {/* Right: Output Preview */}
-            <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden bg-[#fcfcfc]">
+            <div className="relative flex flex-1 flex-col items-center justify-center overflow-hidden bg-[#fcfcfc] dark:bg-[#0b0c0f]">
               <div className="relative flex h-full w-full items-center justify-center">
                 {previewUrl ? (
                   <img
@@ -3743,7 +3747,7 @@ export function RealtimeCanvasDialog({
                     src={previewUrl}
                   />
                 ) : (
-                  <div className="flex flex-col items-center justify-center gap-3 text-[#666666]">
+                  <div className="flex flex-col items-center justify-center gap-3 text-[#666666] dark:text-white/55">
                     {status === "connecting" ? (
                       <>
                         <Loader2 className="h-8 w-8 animate-spin opacity-50" />
@@ -4210,7 +4214,7 @@ export function RealtimeCanvasDialog({
               )}
             >
               <Textarea
-                className="min-h-[56px] resize-none border-0 bg-transparent px-1 py-0.5 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                className="min-h-[56px] resize-none border-0 bg-transparent px-1 py-0.5 text-[15px] text-[#111111] leading-7 caret-[#111111] shadow-none placeholder:text-[#9b9b9b] focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white dark:caret-white dark:placeholder:text-white/45"
                 onBlur={() => scheduleFlush(true, false)}
                 onChange={(e) => setPrompt(e.target.value)}
                 onKeyDown={(event) => {
@@ -4243,7 +4247,7 @@ export function RealtimeCanvasDialog({
                     />
                     {statusBadge.label}
                   </div>
-                  <div className="flex h-6 items-center rounded-full border border-[#e5e5e5] bg-white px-2.5 font-medium text-[#666666] text-xs">
+                  <div className="flex h-6 items-center rounded-full border border-[#e5e5e5] bg-white px-2.5 font-medium text-[#666666] text-xs dark:border-white/12 dark:bg-white/8 dark:text-white/58">
                     延迟 {adaptiveThrottleMs}ms
                   </div>
                 </div>
@@ -4302,8 +4306,8 @@ export function RealtimeCanvasDialog({
 
   if (standalone) {
     return (
-      <div className="h-dvh w-full overflow-hidden bg-white">
-        <div className="relative h-full w-full overflow-hidden bg-white">
+      <div className="h-dvh w-full overflow-hidden bg-white text-[#111111] dark:bg-[#050608] dark:text-white">
+        <div className="relative h-full w-full overflow-hidden bg-white dark:bg-[#050608]">
           {content}
         </div>
       </div>
@@ -4312,7 +4316,7 @@ export function RealtimeCanvasDialog({
 
   return (
     <Dialog onOpenChange={onOpenChange} open={open}>
-      <DialogContent className="h-[97vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-white p-0 shadow-2xl sm:rounded-[20px] md:rounded-[24px]">
+      <DialogContent className="h-[97vh] w-[98vw] max-w-[1800px] overflow-hidden rounded-[20px] border-0 bg-white p-0 text-[#111111] shadow-2xl dark:bg-[#050608] dark:text-white sm:rounded-[20px] md:rounded-[24px]">
         {content}
       </DialogContent>
     </Dialog>