diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 87326ee..2f5ec4a 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -82,7 +82,7 @@
       .el-dialog__header {
         padding: 16px 16px 8px 16px;
         box-sizing: border-box;
-        border-bottom: 1px solid #e8e8e8;
+        border-bottom: 1px solid var(--brder-color);
         margin-right: 0;
       }
     }
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index d07d3d4..92fc34d 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -13,6 +13,14 @@
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
   --tableHeaderTextColor: #515a6e;
+
+  // 工作流
+  --bpmn-panel-border: #eeeeee;
+  --bpmn-panel-box-shadow: #cccccc;
+  --bpmn-panel-bar-background-color: #f5f7fa;
+
+  // ele
+  --brder-color: #e8e8e8
 }
 html.dark {
   --menuBg: #1d1e1f;
@@ -33,6 +41,26 @@ html.dark {
   .el-tree-node__content {
     --el-color-primary-light-9: #262727;
   }
+  // vxe-table 主题
+  --vxe-font-color: #98989E;
+  --vxe-primary-color: #2C7ECF;
+  --vxe-icon-background-color: #98989E;
+  --vxe-table-font-color: #98989E;
+  --vxe-table-resizable-color: #95969a;
+  --vxe-table-header-background-color: #28282A;
+  --vxe-table-body-background-color: #151518;
+  --vxe-table-background-color: #4a5663;
+  --vxe-table-border-width: 1px;
+  --vxe-table-border-color: #37373A;
+  --vxe-toolbar-background-color: #37373A;
+
+  // 工作流
+  --bpmn-panel-border: #37373A;
+  --bpmn-panel-box-shadow: #37373A;
+  --bpmn-panel-bar-background-color: #37373A;
+
+  // ele
+  --brder-color: #37373A
 }
 
 // base color
diff --git a/src/bpmn/index.vue b/src/bpmn/index.vue
index 698f12b..13b3847 100644
--- a/src/bpmn/index.vue
+++ b/src/bpmn/index.vue
@@ -447,7 +447,7 @@ html[class='dark'] {
           line-height: 34px;
         }
         .process-panel-bar:hover {
-          background-color: #f5f7fa;
+          background-color: var(--bpmn-panel-bar-background-color);
         }
       }
     }
@@ -474,8 +474,8 @@ pre {
 .process-panel {
   box-sizing: border-box;
   padding: 0 8px 0 8px;
-  border-left: 1px solid #eeeeee;
-  box-shadow: #cccccc 0 0 8px;
+  border-left: 1px solid var(--bpmn-panel-border);
+  box-shadow: var(--bpmn-panel-box-shadow) 0 0 8px;
   max-height: 100%;
   width: 25%;
   height: calc(100vh - 100px);
diff --git a/src/bpmn/panel/index.vue b/src/bpmn/panel/index.vue
index c282723..eecb0cb 100644
--- a/src/bpmn/panel/index.vue
+++ b/src/bpmn/panel/index.vue
@@ -50,6 +50,7 @@ const component = computed(() => {
   if (type === 'bpmn:Participant') return ParticipantPanel;
   if (type === 'bpmn:SubProcess') return SubProcessPanel;
   //return proxy?.$modal.msgWarning('面板开发中....');
+  return undefined;
 });
 
 const nodeName = computed(() => {
@@ -58,6 +59,7 @@ const nodeName = computed(() => {
     const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
     return NodeName[type] || type;
   }
+  return '';
 });
 
 const handleModeler = () => {