From 253c2b7e387a4ad8724245774f85415067eb53fa Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 24 Jan 2026 20:27:45 +0800
Subject: [PATCH] fix: canvas background supports light/dark mode

---
 components/canvas/CanvasWorkspace.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index da0c3ef..de2a43c 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -215,7 +215,7 @@ export function CanvasWorkspace() {
     <div
       ref={containerRef}
       className={cn(
-        "relative w-full h-full overflow-hidden bg-[#1a1a2e]",
+        "relative w-full h-full overflow-hidden bg-muted/30 dark:bg-[#1a1a2e]",
         tool === 'pan' && "cursor-grab",
         isPanning && "cursor-grabbing"
       )}
@@ -226,9 +226,23 @@ export function CanvasWorkspace() {
       onMouseLeave={handleMouseUp}
       onWheel={handleWheel}
     >
-      {/* 网格背景 */}
+      {/* 网格背景 - 支持浅色/深色模式 */}
       <div
-        className="absolute inset-0 pointer-events-none"
+        className="absolute inset-0 pointer-events-none dark:opacity-100"
+        style={{
+          backgroundImage: `
+            linear-gradient(var(--grid-color, rgba(0,0,0,0.06)) 1px, transparent 1px),
+            linear-gradient(90deg, var(--grid-color, rgba(0,0,0,0.06)) 1px, transparent 1px)
+          `,
+          backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
+          backgroundPosition: `${viewport.x}px ${viewport.y}px`,
+          // @ts-ignore CSS custom properties
+          '--grid-color': 'rgba(0,0,0,0.06)',
+        }}
+      />
+      {/* 深色模式网格 */}
+      <div
+        className="absolute inset-0 pointer-events-none hidden dark:block"
         style={{
           backgroundImage: `
             linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),