From acca3640f7dadd6023568ac06a9e75ddf158946b Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 13 Oct 2025 11:10:54 +0800
Subject: [PATCH] Feat: Modify the background color of the canvas #9869
 (#10507)

### What problem does this PR solve?

Feat: Modify the background color of the canvas #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/canvas/background.tsx            | 8 +++-----
 web/src/pages/agent/canvas/index.tsx                | 2 +-
 web/src/pages/agent/canvas/node/note-node/index.tsx | 4 ++--
 web/src/pages/data-flow/canvas/index.tsx            | 2 +-
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/web/src/components/canvas/background.tsx b/web/src/components/canvas/background.tsx
index cf7b18f45..1ae99ac76 100644
--- a/web/src/components/canvas/background.tsx
+++ b/web/src/components/canvas/background.tsx
@@ -1,13 +1,11 @@
-import { useIsDarkTheme } from '@/components/theme-provider';
 import { Background } from '@xyflow/react';
 
 export function AgentBackground() {
-  const isDarkTheme = useIsDarkTheme();
-
   return (
     <Background
-      color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
-      bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
+      color="var(--text-primary)"
+      bgColor="rgb(var(--bg-canvas))"
+      className="rounded-lg"
     />
   );
 }
diff --git a/web/src/pages/agent/canvas/index.tsx b/web/src/pages/agent/canvas/index.tsx
index e6fa087f3..0bf32d08f 100644
--- a/web/src/pages/agent/canvas/index.tsx
+++ b/web/src/pages/agent/canvas/index.tsx
@@ -232,7 +232,7 @@ function AgentCanvas({ drawerVisible, hideDrawer }: IProps) {
   ]);
 
   return (
-    <div className={styles.canvasWrapper}>
+    <div className={cn(styles.canvasWrapper, 'px-5 pb-5')}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         style={{ position: 'absolute', top: 10, left: 0 }}
diff --git a/web/src/pages/agent/canvas/node/note-node/index.tsx b/web/src/pages/agent/canvas/node/note-node/index.tsx
index 2c9d2446e..69b3f9a9d 100644
--- a/web/src/pages/agent/canvas/node/note-node/index.tsx
+++ b/web/src/pages/agent/canvas/node/note-node/index.tsx
@@ -47,13 +47,13 @@ function NoteNode({ data, id, selected }: NodeProps<INoteNode>) {
 
   return (
     <NodeWrapper
-      className="p-0  w-full h-full flex flex-col"
+      className="p-0  w-full h-full flex flex-col bg-bg-component"
       selected={selected}
     >
       <NodeResizeControl minWidth={190} minHeight={128} style={controlStyle}>
         <ResizeIcon />
       </NodeResizeControl>
-      <section className="p-2 flex gap-2 bg-background-note items-center note-drag-handle rounded-t">
+      <section className="p-2 flex gap-2 items-center note-drag-handle rounded-t">
         <NotebookPen className="size-4" />
         <Form {...nameForm}>
           <form className="flex-1">
diff --git a/web/src/pages/data-flow/canvas/index.tsx b/web/src/pages/data-flow/canvas/index.tsx
index 1023fe904..fa1bb341c 100644
--- a/web/src/pages/data-flow/canvas/index.tsx
+++ b/web/src/pages/data-flow/canvas/index.tsx
@@ -205,7 +205,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
   };
 
   return (
-    <div className={styles.canvasWrapper}>
+    <div className={cn(styles.canvasWrapper, 'px-5 pb-5')}>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         style={{ position: 'absolute', top: 10, left: 0 }}