fix: enhance MiniMap display for dark mode (#29)

MiaoMint · web-flow · commit c7851585b3c2 · 2026-01-12T18:53:05.000+08:00
diff --git a/frontend/src/components/canvas-view.tsx b/frontend/src/components/canvas-view.tsx
@@ -52,6 +52,7 @@ import {
 import { database } from "../../wailsjs/go/models";
 import { useSystemInfo } from "@/hooks/use-system-info";
 import { cn } from "@/lib/utils";
+import { useTheme } from "./theme-provider";
 
 interface CanvasViewProps {
   project: database.Project;
@@ -64,6 +65,8 @@ const initialEdges: Edge[] = [];
 function CanvasEditor({ project, onBack }: CanvasViewProps) {
   const { _ } = useLingui();
   const { systemInfo } = useSystemInfo();
+  const { theme } = useTheme();
+  const isDarkMode = theme === "dark";
   const [name, setName] = useState(project.name);
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [chatMessage, setChatMessage] = useState("");
@@ -580,7 +583,15 @@ function CanvasEditor({ project, onBack }: CanvasViewProps) {
             maxZoom={2}
             proOptions={{ hideAttribution: true }}
           >
-            <MiniMap pannable zoomable />
+            <MiniMap
+              pannable
+              zoomable
+              bgColor={isDarkMode ? "#18181b" : "#ffffff"}
+              maskColor={
+                isDarkMode ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.1)"
+              }
+              nodeColor={isDarkMode ? "#52525b" : "#e4e4e7"}
+            />
             <Background
               className="dark:opacity-30"
               variant={BackgroundVariant.Dots}
