From 3100d10dc0a6d698be9178d19900500fc1ceaecd Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 5 Apr 2026 22:09:21 +0800
Subject: [PATCH] fix: restore light theme for realtime canvas enhance mode

---
 components/canvas/EnhanceProWorkspace.tsx  | 118 +++++++++------------
 components/canvas/RealtimeCanvasDialog.tsx |  42 ++++----
 2 files changed, 73 insertions(+), 87 deletions(-)

diff --git a/components/canvas/EnhanceProWorkspace.tsx b/components/canvas/EnhanceProWorkspace.tsx
index 8aa7c8625..5a5265e27 100644
--- a/components/canvas/EnhanceProWorkspace.tsx
+++ b/components/canvas/EnhanceProWorkspace.tsx
@@ -6,7 +6,6 @@ import {
   Loader2,
   Send,
   Sparkles,
-  Wand2,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -89,9 +88,10 @@ const FALLBACK_CONFIG: EnhanceProClientConfig = {
   presets: defaultEnhanceProPresets(),
 };
 
-const SOLID_PANEL_FIELD_CLASS = "border-white/10 bg-[#1a1b22] text-white";
-const SOLID_PANEL_CARD_CLASS = "rounded-2xl border border-white/10 bg-[#17181f]";
-const SOLID_PANEL_CHIP_CLASS = "rounded-full border border-white/10 bg-[#1b1c24]";
+const SOLID_PANEL_FIELD_CLASS =
+  "border-border/60 bg-background text-foreground shadow-sm";
+const SOLID_PANEL_CARD_CLASS =
+  "rounded-2xl border border-border/60 bg-card shadow-sm";
 
 function clampNumber(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
@@ -481,8 +481,8 @@ export function EnhanceProWorkspace({
   }, [generatedImages, sourceImageUrl]);
 
   return (
-    <div className="relative flex h-full w-full bg-[#09090b] text-white">
-      <div className="relative flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-[#050506]">
+    <div className="relative flex h-full w-full bg-background text-foreground">
+      <div className="relative flex min-w-0 flex-1 items-center justify-center overflow-hidden bg-muted/20">
         {activePreviewUrl ? (
           <>
             <img
@@ -490,18 +490,18 @@ export function EnhanceProWorkspace({
               className="max-h-full max-w-full object-contain"
               src={getDisplayImageUrl(activePreviewUrl, 1800)}
             />
-            <div className="pointer-events-none absolute top-6 left-6 flex items-center gap-2 rounded-full border border-white/10 bg-[#101114] px-3 py-1.5 text-white/80 text-xs">
+            <div className="pointer-events-none absolute top-6 left-6 flex items-center gap-2 rounded-full border border-border/60 bg-background/95 px-3 py-1.5 text-muted-foreground text-xs shadow-sm backdrop-blur-sm">
               <ImageIcon className="h-3.5 w-3.5" />
               <span>{activePreviewLabel}</span>
             </div>
           </>
         ) : (
           <div className="flex max-w-md flex-col items-center gap-3 px-6 text-center">
-            <Sparkles className="h-10 w-10 text-white/25" />
-            <div className="font-semibold text-lg text-white">
+            <Sparkles className="h-10 w-10 text-muted-foreground/35" />
+            <div className="font-semibold text-foreground text-lg">
               还没有可增强的图片
             </div>
-            <div className="text-sm text-white/55 leading-6">
+            <div className="text-muted-foreground text-sm leading-6">
               请先在主画布中选中一张图片，再从底部工具栏进入“图像增强 Pro”，
               或者先在实时画布模式里生成一张结果后再切回来。
             </div>
@@ -510,7 +510,7 @@ export function EnhanceProWorkspace({
 
         {sidePreviewItems.length > 0 ? (
           <div className="absolute right-6 bottom-6 left-6 flex items-center justify-center">
-            <div className="flex max-w-[min(720px,calc(100vw-5rem))] items-center gap-2 rounded-[24px] border border-white/10 bg-[#101114] px-3 py-3 shadow-2xl">
+            <div className="flex max-w-[min(720px,calc(100vw-5rem))] items-center gap-2 rounded-[24px] border border-border/60 bg-background/95 px-3 py-3 shadow-xl backdrop-blur-sm">
               {sidePreviewItems.map((item, index) => {
                 const isActive = item.isSource
                   ? selectedResultIndex < 0
@@ -520,8 +520,8 @@ export function EnhanceProWorkspace({
                     className={cn(
                       "group flex h-16 w-16 shrink-0 overflow-hidden rounded-2xl border transition",
                       isActive
-                        ? "border-sky-400 shadow-[0_0_0_1px_rgba(56,189,248,0.35)]"
-                        : "border-white/10 hover:border-white/35"
+                        ? "border-sky-500 shadow-[0_0_0_1px_rgba(14,165,233,0.18)]"
+                        : "border-border/60 hover:border-foreground/20"
                     )}
                     key={item.key}
                     onClick={() =>
@@ -543,49 +543,35 @@ export function EnhanceProWorkspace({
         ) : null}
       </div>
 
-      <div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-white/10 border-l bg-[#111217]">
-        <div className="border-white/10 border-b px-4 py-4 pr-24">
-          <div className="flex items-start justify-between gap-3">
-            <div>
-              <div className="flex items-center gap-2 font-semibold text-base text-white">
-                <Wand2 className="h-4.5 w-4.5 text-sky-300" />
-                图像增强模式
-              </div>
-            </div>
+      <div className="flex h-full w-[420px] max-w-[42vw] shrink-0 flex-col border-border/60 border-l bg-[#fcfbf7]">
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4 pt-6">
+          {isLoading ? (
             <div
               className={cn(
-                SOLID_PANEL_CHIP_CLASS,
-                "px-2.5 py-1 text-[11px] text-white/70"
+                SOLID_PANEL_CARD_CLASS,
+                "flex items-center gap-2 px-4 py-3 text-muted-foreground text-sm"
               )}
             >
-              {selectedPreset?.model || config.defaultModel}
-            </div>
-          </div>
-        </div>
-
-        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4">
-          {isLoading ? (
-            <div className={cn(SOLID_PANEL_CARD_CLASS, "flex items-center gap-2 px-4 py-3 text-sm text-white/60")}>
               <Loader2 className="h-4 w-4 animate-spin" />
               正在加载增强配置...
             </div>
           ) : null}
 
           {!config.enabled && !isLoading ? (
-            <div className="rounded-2xl border border-amber-400/20 bg-amber-500/10 px-4 py-3 text-amber-100 text-sm leading-6">
+            <div className="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800 text-sm leading-6">
               当前未启用图像增强 Pro。请先在系统设置的“本地AI设置”里完成 Krea
               配置。
             </div>
           ) : null}
 
           {lastErrorMessage ? (
-            <div className="rounded-2xl border border-rose-400/20 bg-rose-500/10 px-4 py-3 text-rose-100 text-sm leading-6">
+            <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-700 text-sm leading-6">
               {lastErrorMessage}
             </div>
           ) : null}
 
           <div className="space-y-2">
-            <Label className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+            <Label className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
               增强预设
             </Label>
             <Select onValueChange={handleSelectPreset} value={selectedPresetId}>
@@ -601,7 +587,7 @@ export function EnhanceProWorkspace({
               </SelectContent>
             </Select>
             {selectedPreset ? (
-              <div className="line-clamp-2 text-[11px] leading-5 text-white/45">
+              <div className="line-clamp-2 text-[11px] leading-5 text-muted-foreground">
                 {selectedPreset.description ||
                   `${selectedPreset.model} · ${getSubjectDetectionLabel(selectedPreset.subjectDetection)}`}
               </div>
@@ -610,13 +596,13 @@ export function EnhanceProWorkspace({
 
           <div className="space-y-2">
             <Label
-              className="text-[11px] uppercase tracking-[0.08em] text-white/65"
+              className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground"
               htmlFor="enhance-workspace-prompt"
             >
               增强提示词
             </Label>
             <Textarea
-              className={`${SOLID_PANEL_FIELD_CLASS} min-h-[82px] resize-none placeholder:text-white/30`}
+              className={`${SOLID_PANEL_FIELD_CLASS} min-h-[82px] resize-none placeholder:text-muted-foreground/70`}
               id="enhance-workspace-prompt"
               onChange={(event) =>
                 setFormState((prev) => ({
@@ -631,13 +617,13 @@ export function EnhanceProWorkspace({
           </div>
 
           <div className="space-y-2">
-            <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+            <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
               基础参数
             </div>
             <div className="grid grid-cols-3 gap-3">
               <div className="space-y-1.5">
                 <Label
-                  className="text-xs text-white/70"
+                  className="text-foreground/80 text-xs"
                   htmlFor="enhance-workspace-width"
                 >
                   宽度
@@ -663,7 +649,7 @@ export function EnhanceProWorkspace({
               </div>
               <div className="space-y-1.5">
                 <Label
-                  className="text-xs text-white/70"
+                  className="text-foreground/80 text-xs"
                   htmlFor="enhance-workspace-height"
                 >
                   高度
@@ -689,7 +675,7 @@ export function EnhanceProWorkspace({
               </div>
               {config.allowBatchSize ? (
                 <div className="space-y-1.5">
-                  <Label className="text-xs text-white/70">候选</Label>
+                  <Label className="text-foreground/80 text-xs">候选</Label>
                   <Select
                     onValueChange={(value) =>
                       handleNumericField(
@@ -723,7 +709,7 @@ export function EnhanceProWorkspace({
               ) : (
                 <div className="space-y-1.5">
                   <Label
-                    className="text-xs text-white/70"
+                    className="text-foreground/80 text-xs"
                     htmlFor="enhance-workspace-seed"
                   >
                     Seed
@@ -743,7 +729,7 @@ export function EnhanceProWorkspace({
                 </div>
               )}
               <div className="space-y-1.5">
-                <Label className="text-xs text-white/70">模式</Label>
+                <Label className="text-foreground/80 text-xs">模式</Label>
                 <Select
                   onValueChange={(value) =>
                     setFormState((prev) => ({
@@ -765,7 +751,7 @@ export function EnhanceProWorkspace({
                 </Select>
               </div>
               <div className="space-y-1.5">
-                <Label className="text-xs text-white/70">格式</Label>
+                <Label className="text-foreground/80 text-xs">格式</Label>
                 <Select
                   onValueChange={(value) =>
                     setFormState((prev) => ({
@@ -786,7 +772,7 @@ export function EnhanceProWorkspace({
                 </Select>
               </div>
               <div className="space-y-1.5">
-                <Label className="text-xs text-white/70">区域</Label>
+                <Label className="text-foreground/80 text-xs">区域</Label>
                 <Select
                   onValueChange={(value) =>
                     setFormState((prev) => ({
@@ -809,7 +795,7 @@ export function EnhanceProWorkspace({
               {config.allowBatchSize ? (
                 <div className="space-y-1.5">
                   <Label
-                    className="text-xs text-white/70"
+                    className="text-foreground/80 text-xs"
                     htmlFor="enhance-workspace-seed"
                   >
                     Seed
@@ -830,7 +816,7 @@ export function EnhanceProWorkspace({
               ) : null}
               <div className="space-y-1.5">
                 <Label
-                  className="text-xs text-white/70"
+                  className="text-foreground/80 text-xs"
                   htmlFor="enhance-workspace-scale"
                 >
                   放大
@@ -859,7 +845,7 @@ export function EnhanceProWorkspace({
           </div>
 
           <div className="space-y-2">
-            <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+            <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
               增强开关
             </div>
             <div className="grid grid-cols-3 gap-3">
@@ -869,7 +855,7 @@ export function EnhanceProWorkspace({
                   "flex items-center justify-between gap-3 px-3 py-3"
                 )}
               >
-                <span className="text-sm text-white">人脸增强</span>
+                <span className="text-foreground text-sm">人脸增强</span>
                 <Switch
                   checked={formState.face_enhancement}
                   onCheckedChange={(checked) =>
@@ -886,7 +872,7 @@ export function EnhanceProWorkspace({
                   "flex items-center justify-between gap-3 px-3 py-3"
                 )}
               >
-                <span className="text-sm text-white">启用放大</span>
+                <span className="text-foreground text-sm">启用放大</span>
                 <Switch
                   checked={formState.upscaling_activated}
                   onCheckedChange={(checked) =>
@@ -903,7 +889,7 @@ export function EnhanceProWorkspace({
                   "flex items-center justify-between gap-3 px-3 py-3"
                 )}
               >
-                <span className="text-sm text-white">裁剪铺满</span>
+                <span className="text-foreground text-sm">裁剪铺满</span>
                 <Switch
                   checked={formState.crop_to_fill}
                   onCheckedChange={(checked) =>
@@ -916,14 +902,14 @@ export function EnhanceProWorkspace({
 
           {config.enableAdvancedControls ? (
             <>
-              <Separator className="bg-white/10" />
+              <Separator className="bg-border/60" />
               <div className="space-y-2">
-                <div className="text-[11px] uppercase tracking-[0.08em] text-white/65">
+                <div className="text-[11px] uppercase tracking-[0.08em] text-muted-foreground">
                   高级调节
                 </div>
                 <div className="grid grid-cols-3 gap-3">
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">创造力</Label>
+                    <Label className="text-foreground/80 text-xs">创造力</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="6"
@@ -943,7 +929,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">纹理</Label>
+                    <Label className="text-foreground/80 text-xs">纹理</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="5"
@@ -963,7 +949,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">细节</Label>
+                    <Label className="text-foreground/80 text-xs">细节</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
@@ -984,7 +970,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">锐化</Label>
+                    <Label className="text-foreground/80 text-xs">锐化</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
@@ -1005,7 +991,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">降噪</Label>
+                    <Label className="text-foreground/80 text-xs">降噪</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
@@ -1026,7 +1012,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">脸部力度</Label>
+                    <Label className="text-foreground/80 text-xs">脸部力度</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
@@ -1047,7 +1033,7 @@ export function EnhanceProWorkspace({
                     />
                   </div>
                   <div className="space-y-1.5">
-                    <Label className="text-xs text-white/70">脸部创意</Label>
+                    <Label className="text-foreground/80 text-xs">脸部创意</Label>
                     <Input
                       className={`${SOLID_PANEL_FIELD_CLASS} h-10`}
                       max="1"
@@ -1073,15 +1059,15 @@ export function EnhanceProWorkspace({
           ) : null}
         </div>
 
-        <div className="border-white/10 border-t px-4 py-3">
-          <div className="mb-3 flex items-center justify-between text-white/45 text-xs">
+        <div className="border-border/60 border-t bg-background/90 px-4 py-3">
+          <div className="mb-3 flex items-center justify-between text-muted-foreground text-xs">
             <span>
               {generatedImages.length > 0
                 ? `已生成 ${generatedImages.length} 张候选结果`
                 : "生成后可直接发送回画布"}
             </span>
             {selectedGeneratedImage ? (
-              <span className="inline-flex items-center gap-1 text-emerald-300">
+              <span className="inline-flex items-center gap-1 text-emerald-600">
                 <CheckCircle2 className="h-3.5 w-3.5" />
                 已选中 {activePreviewLabel}
               </span>
@@ -1089,7 +1075,7 @@ export function EnhanceProWorkspace({
           </div>
           <div className="flex items-center gap-2">
             <Button
-              className="h-10 flex-1 rounded-2xl bg-[#0f62fe] text-white hover:bg-[#0a58e0]"
+              className="h-10 flex-1 rounded-2xl bg-primary text-primary-foreground hover:bg-primary/90"
               disabled={isSubmitting || !sourceImageUrl}
               onClick={handleSubmit}
               type="button"
@@ -1102,7 +1088,7 @@ export function EnhanceProWorkspace({
               开始增强 Pro
             </Button>
             <Button
-              className="h-10 rounded-2xl border-white/10 bg-[#1a1b22] px-4 text-white hover:bg-[#23242c] hover:text-white"
+              className="h-10 rounded-2xl border-border/60 bg-background px-4 text-foreground hover:bg-muted"
               disabled={!selectedGeneratedImage}
               onClick={handleApply}
               type="button"
diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index f99c5d98a..34ecd1a19 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -2920,7 +2920,7 @@ export function RealtimeCanvasDialog({
   const compactToolButtonClass =
     "h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
   const compactToolButtonActiveClass =
-    "bg-black text-white hover:bg-black hover:text-white";
+    "bg-foreground text-background hover:bg-foreground hover:text-background";
   const currentModeLabel =
     brushMode === "select"
       ? "鼠标"
@@ -2961,7 +2961,7 @@ export function RealtimeCanvasDialog({
       )}
       <div className="pointer-events-none absolute top-6 left-6 z-50 flex flex-col gap-3">
         <button
-          className="pointer-events-auto flex items-center gap-3 rounded-full border border-white/10 bg-[#111216] px-4 py-2 text-white shadow-sm transition hover:bg-[#1a1b22]"
+          className="pointer-events-auto flex items-center gap-3 rounded-full border border-border/60 bg-background/95 px-4 py-2 text-foreground shadow-xl backdrop-blur-sm transition hover:bg-background"
           onClick={handleGoHome}
           title="返回首页"
           type="button"
@@ -2981,18 +2981,18 @@ export function RealtimeCanvasDialog({
               <Sparkles className="h-3.5 w-3.5" />
             </div>
           )}
-          <span className="font-semibold text-sm text-white">
+          <span className="font-semibold text-foreground text-sm">
             {siteName}
           </span>
         </button>
 
-        <div className="pointer-events-auto inline-flex w-fit items-center gap-1 rounded-full border border-white/10 bg-[#111216] p-1.5 shadow-sm">
+        <div className="pointer-events-auto inline-flex w-fit items-center gap-1 rounded-full border border-border/60 bg-background/95 p-1.5 shadow-xl backdrop-blur-sm">
           <button
             className={cn(
               "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
               workspaceMode === "realtime"
-                ? "bg-white text-black shadow-sm"
-                : "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
+                ? "bg-foreground text-background shadow-sm"
+                : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
             )}
             onClick={() => setWorkspaceMode("realtime")}
             type="button"
@@ -3004,8 +3004,8 @@ export function RealtimeCanvasDialog({
             className={cn(
               "inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm transition",
               workspaceMode === "enhance-pro"
-                ? "bg-white text-black shadow-sm"
-                : "bg-[#1a1b22] text-white/78 hover:bg-[#23242c] hover:text-white"
+                ? "bg-foreground text-background shadow-sm"
+                : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
             )}
             onClick={() => setWorkspaceMode("enhance-pro")}
             type="button"
@@ -3017,9 +3017,9 @@ export function RealtimeCanvasDialog({
       </div>
 
       <div className="pointer-events-none absolute top-6 right-6 z-50">
-        <div className="pointer-events-auto rounded-full border border-white/10 bg-[#111216] p-1 shadow-sm">
+        <div className="pointer-events-auto rounded-full border border-border/60 bg-background/95 p-1 shadow-xl backdrop-blur-sm">
           <Button
-            className="h-7 w-7 rounded-full bg-[#1a1b22] text-white transition hover:bg-[#23242c] hover:text-white"
+            className="h-7 w-7 rounded-full bg-background text-foreground transition hover:bg-muted hover:text-foreground"
             onClick={handleCloseRealtime}
             size="icon"
             title="关闭"
@@ -3147,7 +3147,7 @@ export function RealtimeCanvasDialog({
                       </div>
                       <div className="mt-2 flex items-center justify-end gap-2">
                         <Button
-                          className="h-8 rounded-xl bg-black px-4 text-white hover:bg-black/90"
+                          className="h-8 rounded-xl bg-primary px-4 text-primary-foreground hover:bg-primary/90"
                           onClick={() => void openSavedProject(project.id)}
                           size="sm"
                           type="button"
@@ -3268,7 +3268,7 @@ export function RealtimeCanvasDialog({
                         ] as const
                       ).map((handle) => (
                         <div
-                          className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute z-20 h-3.5 w-3.5 rounded-full border border-white bg-black shadow-[0_2px_8px_rgba(0,0,0,0.2)]"
+                          className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute z-20 h-3.5 w-3.5 rounded-full border border-border/70 bg-background shadow-[0_2px_8px_rgba(15,23,42,0.18)]"
                           key={handle.key}
                           style={{
                             left: handle.left,
@@ -3290,7 +3290,7 @@ export function RealtimeCanvasDialog({
                   />
                 </div>
               </div>
-              <div className="absolute top-28 bottom-4 left-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-border/40 bg-[#111216] p-2 shadow-xl">
+              <div className="absolute top-28 bottom-4 left-4 z-10 flex w-16 max-w-[18vw] flex-col rounded-[24px] border border-border/50 bg-background/96 p-2 shadow-xl backdrop-blur-sm">
                 <div className="flex items-center justify-center border-border/10 border-b pb-3">
                   <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-foreground">
                     <Layers3 className="h-4 w-4" />
@@ -3433,7 +3433,7 @@ export function RealtimeCanvasDialog({
           />
           <div className="-translate-x-1/2 pointer-events-none absolute bottom-4 left-1/2 z-30 flex w-[min(600px,calc(100vw-2rem))] flex-col items-center gap-2.5">
             <TooltipProvider delayDuration={120}>
-              <div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/40 bg-[#111216] p-1.5 shadow-xl">
+              <div className="pointer-events-auto flex flex-wrap items-center justify-center gap-1 rounded-[24px] border border-border/50 bg-background/96 p-1.5 shadow-xl backdrop-blur-sm">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3518,7 +3518,7 @@ export function RealtimeCanvasDialog({
                             max={50}
                             min={2}
                             onValueChange={([val]) => setBrushSize(val)}
-                            rangeClassName="bg-black"
+                            rangeClassName="bg-primary"
                             step={1}
                             thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
                             trackClassName="h-2.5 bg-muted shadow-inner"
@@ -3570,7 +3570,7 @@ export function RealtimeCanvasDialog({
                           max={50}
                           min={2}
                           onValueChange={([val]) => setBrushSize(val)}
-                          rangeClassName="bg-black"
+                          rangeClassName="bg-primary"
                           step={1}
                           thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
                           trackClassName="h-2.5 bg-muted shadow-inner"
@@ -3613,7 +3613,7 @@ export function RealtimeCanvasDialog({
                           className={cn(
                             "h-10 rounded-xl",
                             brushMode === "rect" &&
-                              "bg-black text-white hover:bg-black"
+                              "bg-foreground text-background hover:bg-foreground"
                           )}
                           onClick={() => activateShapeMode("rect")}
                           type="button"
@@ -3625,7 +3625,7 @@ export function RealtimeCanvasDialog({
                           className={cn(
                             "h-10 rounded-xl",
                             brushMode === "circle" &&
-                              "bg-black text-white hover:bg-black"
+                              "bg-foreground text-background hover:bg-foreground"
                           )}
                           onClick={() => activateShapeMode("circle")}
                           type="button"
@@ -3637,7 +3637,7 @@ export function RealtimeCanvasDialog({
                           className={cn(
                             "h-10 rounded-xl",
                             brushMode === "line" &&
-                              "bg-black text-white hover:bg-black"
+                              "bg-foreground text-background hover:bg-foreground"
                           )}
                           onClick={() => activateShapeMode("line")}
                           type="button"
@@ -3760,7 +3760,7 @@ export function RealtimeCanvasDialog({
               </div>
             </TooltipProvider>
 
-            <div className="pointer-events-auto w-full rounded-[24px] border border-border/40 bg-[#111216] p-4 shadow-2xl">
+            <div className="pointer-events-auto w-full rounded-[24px] border border-border/50 bg-background/98 p-4 shadow-2xl backdrop-blur-sm">
               <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"
                 onBlur={() => scheduleFlush(true, false)}
@@ -3801,7 +3801,7 @@ export function RealtimeCanvasDialog({
                 </div>
                 <div className="flex items-center gap-2">
                   <Button
-                    className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
+                    className="h-9 shrink-0 rounded-full bg-primary px-4 font-medium text-primary-foreground hover:bg-primary/90"
                     disabled={status === "connecting"}
                     onClick={triggerGenerate}
                     size="sm"