diff --git a/src/views/flowDesign/index.vue b/src/views/flowDesign/index.vue
index 7cb20c4..3c0aa6d 100644
--- a/src/views/flowDesign/index.vue
+++ b/src/views/flowDesign/index.vue
@@ -19,10 +19,12 @@ const props = withDefaults(
     fields: Field[]
     readOnly?: boolean
     defaultZoom?: number
+    bgColor?: string
   }>(),
   {
     readOnly: false,
-    defaultZoom: 100
+    defaultZoom: 100,
+    bgColor: 'var(--el-bg-color-page)'
   }
 )
 
@@ -307,13 +309,14 @@ defineExpose({
 
 <style scoped lang="scss">
 .designer-container {
+  --flow-bg-color: v-bind(bgColor);
   position: relative;
   display: flex;
   flex-direction: row;
   min-height: 100%;
   min-width: 100%;
   overflow: auto;
-  background-color: var(--el-bg-color-page);
+  background-color: var(--flow-bg-color);
 
   .zoom {
     position: fixed;
diff --git a/src/views/flowDesign/nodes/GatewayNode.vue b/src/views/flowDesign/nodes/GatewayNode.vue
index 445af84..0821f9a 100644
--- a/src/views/flowDesign/nodes/GatewayNode.vue
+++ b/src/views/flowDesign/nodes/GatewayNode.vue
@@ -86,7 +86,7 @@ const moveLeft = (index: number) => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: var(--el-bg-color-page);
+    background-color: var(--flow-bg-color);
 
     &:before {
       content: '';
@@ -107,7 +107,7 @@ const moveLeft = (index: number) => {
       top: -3px;
       height: 3px;
       width: 50%;
-      background-color: var(--el-bg-color-page);
+      background-color: var(--flow-bg-color);
     }
 
     .bottom-left-border {
@@ -116,7 +116,7 @@ const moveLeft = (index: number) => {
       bottom: -3px;
       height: 3px;
       width: 50%;
-      background-color: var(--el-bg-color-page);
+      background-color: var(--flow-bg-color);
     }
 
     .top-right-border {
@@ -125,7 +125,7 @@ const moveLeft = (index: number) => {
       top: -3px;
       height: 3px;
       width: 50%;
-      background-color: var(--el-bg-color-page);
+      background-color: var(--flow-bg-color);
     }
 
     .bottom-right-border {
@@ -134,7 +134,7 @@ const moveLeft = (index: number) => {
       bottom: -3px;
       height: 3px;
       width: 50%;
-      background-color: var(--el-bg-color-page);
+      background-color: var(--flow-bg-color);
     }
   }
 }
diff --git a/src/views/flowDesign/nodes/Node.vue b/src/views/flowDesign/nodes/Node.vue
index 88ab406..eddae40 100644
--- a/src/views/flowDesign/nodes/Node.vue
+++ b/src/views/flowDesign/nodes/Node.vue
@@ -150,7 +150,7 @@ const delNode = () => {
     width: 0;
     border-width: 8px 6px 4px;
     border-color: var(--el-border-color) transparent transparent;
-    background-color: var(--el-bg-color-page);
+    background-color: var(--flow-bg-color);
   }
 
   .warn-icon {