From 34c23ba31514c2bd4316e0330cfaabfcef4ebd6f Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 4 Mar 2024 10:29:18 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E7=B3=BB=E7=BB=9F=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=90=8E=E5=89=8D=E7=AB=AF=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/assist-button/ColorButton.vue  |  2 +-
 .../color-scheme/src/ColorScheme.vue          |  2 +-
 .../src/components/dashboard/DbCanvasAttr.vue |  4 +--
 .../FilterStyleSimpleSelector.vue             |  2 +-
 .../dashboard-style/ViewSimpleTitle.vue       |  6 ++---
 .../pre-subject/SubjectTemplateItem.vue       |  2 +-
 .../data-visualization/CanvasAttr.vue         |  2 +-
 .../RealTimeComponentList.vue                 |  4 +--
 .../data-visualization/RealTimeGroup.vue      |  4 +--
 .../data-visualization/RealTimeListTree.vue   |  4 +--
 .../data-visualization/canvas/ComposeShow.vue |  2 +-
 .../data-visualization/canvas/Shape.vue       |  2 +-
 .../components/filter-text/src/FilterText.vue |  2 +-
 .../visualization/ComponentButton.vue         |  2 +-
 .../visualization/ComponentButtonLabel.vue    |  2 +-
 .../components/visualization/LinkJumpSet.vue  |  2 +-
 .../components/visualization/LinkageSet.vue   |  2 +-
 .../visualization/common/DeUpload.vue         |  6 ++---
 .../BackgroundOverallCommon.vue               |  6 ++---
 .../component-background/CanvasBackground.vue |  4 +--
 .../src/components/visualization/linkJump.vue |  2 +-
 .../custom-component/common/CommonAttr.vue    |  4 +--
 .../component-group/CommonGroup.vue           |  8 +++---
 .../component-group/DragComponent.vue         |  2 +-
 .../component-group/UserViewGroup.vue         |  8 +++---
 .../custom-component/de-graphical/Attr.vue    |  6 ++---
 .../src/custom-component/group/Component.vue  |  2 +-
 .../src/custom-component/picture/Attr.vue     |  6 ++---
 .../v-query/QueryConditionConfiguration.vue   |  4 +--
 .../src/layout/components/AccountOperator.vue |  2 +-
 .../src/layout/components/Header.vue          |  6 ++---
 .../src/layout/components/Sidebar.vue         |  2 +-
 core/core-frontend/src/style/index.less       | 25 ++++++++++---------
 .../editor/chart-type/ChartType.vue           |  8 +++---
 .../editor/dataset-select/DatasetSelect.vue   |  8 +++---
 .../editor/drag-item/DimensionItem.vue        |  8 +++---
 .../components/editor/drag-item/DrillItem.vue |  2 +-
 .../components/editor/drag-item/QuotaItem.vue |  6 ++---
 .../editor/editor-senior/Senior.vue           |  2 +-
 .../editor-senior/components/AssistLine.vue   |  2 +-
 .../editor-senior/components/Threshold.vue    |  2 +-
 .../components/dialog/TableThresholdEdit.vue  |  2 +-
 .../editor/editor-style/VQueryChartStyle.vue  |  4 +--
 .../components/CustomColorStyleSelect.vue     |  8 +++---
 .../components/IndicatorNameSelector.vue      |  4 +--
 .../components/IndicatorValueSelector.vue     |  4 +--
 .../components/LegendSelector.vue             |  4 +--
 .../editor-style/components/TitleSelector.vue |  4 +--
 .../components/table/TableCellSelector.vue    |  4 +--
 .../components/table/TableHeaderSelector.vue  |  4 +--
 .../views/chart/components/editor/index.vue   | 10 ++++----
 .../src/views/common/DeResourceArrow.vue      |  2 +-
 .../src/views/common/DeResourceTree.vue       |  2 +-
 .../dashboard/MobileBackgroundSelector.vue    |  4 +--
 core/core-frontend/src/views/login/index.vue  |  2 +-
 .../src/views/share/share/ShareGrid.vue       |  2 +-
 .../system/parameter/email/EmailEdit.vue      |  2 +-
 .../views/system/parameter/map/Geometry.vue   |  2 +-
 .../views/system/parameter/map/MapSetting.vue |  2 +-
 .../component/CategoryTemplateV2.vue          |  4 +--
 .../component/MarketPreview.vue               |  8 +++---
 .../component/MarketPreviewV2.vue             |  8 +++---
 .../component/TemplateMarketPreviewItem.vue   |  4 +--
 .../src/views/template-market/index.vue       |  4 +--
 .../template/component/DeTemplateItem.vue     |  4 +--
 .../visualized/data/dataset/form/AddSql.vue   |  4 +--
 .../data/dataset/form/DatasetUnion.vue        | 12 ++++-----
 .../visualized/data/dataset/form/index.vue    |  4 +--
 .../views/visualized/data/dataset/index.vue   |  2 +-
 .../data/datasource/BaseInfoContent.vue       |  4 +--
 .../visualized/data/datasource/SheetTabs.vue  |  6 ++---
 .../datasource/form/ApiHttpRequestDraw.vue    |  8 +++---
 .../data/datasource/form/EditorDetail.vue     |  8 +++---
 .../visualized/data/datasource/form/index.vue |  4 +--
 .../visualized/data/datasource/index.vue      |  4 +--
 .../src/views/workbranch/JumpLinkageBack.vue  |  2 +-
 .../src/views/workbranch/ShortcutTable.vue    |  2 +-
 .../src/views/workbranch/index.vue            |  2 +-
 78 files changed, 169 insertions(+), 168 deletions(-)

diff --git a/core/core-frontend/src/components/assist-button/ColorButton.vue b/core/core-frontend/src/components/assist-button/ColorButton.vue
index 3de5cf47ba..fe629a2fc0 100644
--- a/core/core-frontend/src/components/assist-button/ColorButton.vue
+++ b/core/core-frontend/src/components/assist-button/ColorButton.vue
@@ -62,7 +62,7 @@ const colorButtonClick = () => {
   padding-left: 4px;
   padding-top: 4px;
   border-width: 2px;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }
 
 .color-button-inner {
diff --git a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
index a7ad6284ce..9a1c06898f 100644
--- a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
+++ b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
@@ -223,7 +223,7 @@ const resetCustomColor = () => {
 
       &.active {
         &::after {
-          border-color: #3370ff;
+          border-color: var(--ed-color-primary);
           display: block;
         }
       }
diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
index 425accb0f3..ed47a58dfe 100644
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -239,7 +239,7 @@ const saveSelfSubject = () => {
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -295,7 +295,7 @@ const saveSelfSubject = () => {
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
index d35c5b1d87..73ea03fcf6 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@@ -189,7 +189,7 @@ onMounted(() => {
 <style scoped lang="less">
 .hover-icon {
   &.active {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
     background-color: rgba(51, 112, 255, 0.1);
   }
   & + & {
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
index 79b6662e94..93f383689b 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
@@ -185,7 +185,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
     .bash-icon {
       background: rgba(51, 112, 255, 0.1);
       border-radius: 4px;
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
   }
 }
@@ -238,7 +238,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -247,7 +247,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
index 9df23c6acb..602267a064 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
@@ -196,7 +196,7 @@ onMounted(() => {
 }
 
 .background-selected {
-  border: solid 1px #3370ff !important;
+  border: solid 1px var(--ed-color-primary) !important;
   .title-main {
     background: rgba(51, 112, 255, 0.1);
   }
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 3b12aad8da..f321fddf5b 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -229,7 +229,7 @@ onMounted(() => {
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue b/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
index e4033579da..13ee3b4acb 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
@@ -409,10 +409,10 @@ const handleContextMenu = e => {
       .activated {
         background-color: rgba(51, 112, 255, 0.1) !important;
         :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
         :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index 8bf417af8c..9faa202b85 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -422,10 +422,10 @@ const handleContextMenu = e => {
       .activated {
         background-color: rgba(51, 112, 255, 0.1) !important;
         :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
         :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 1cfd38067a..29db697dcf 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -442,10 +442,10 @@ const handleContextMenu = e => {
       .activated {
         background-color: rgba(51, 112, 255, 0.1) !important;
         :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
         :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue b/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue
index 7688015a59..2004f9f1e1 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue
@@ -55,6 +55,6 @@ const handleMouseDown = e => {
 }
 
 .shadow-border {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }
 </style>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index af164318ab..a0e111bfa4 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -963,7 +963,7 @@ onMounted(() => {
 }
 
 .active {
-  outline: 1px solid rgba(51, 112, 255, 1) !important;
+  outline: 1px solid var(--ed-color-primary) !important;
   user-select: none;
 }
 
diff --git a/core/core-frontend/src/components/filter-text/src/FilterText.vue b/core/core-frontend/src/components/filter-text/src/FilterText.vue
index f5b9bcfa9a..7a38bcfdd2 100644
--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@@ -114,7 +114,7 @@ watch(
   }
 
   .clear-btn:hover {
-    color: #3370ff;
+    color: var(--ed-color-primary);
   }
 
   .filter-texts-container::-webkit-scrollbar {
diff --git a/core/core-frontend/src/components/visualization/ComponentButton.vue b/core/core-frontend/src/components/visualization/ComponentButton.vue
index 4c4e926db9..626b022b27 100644
--- a/core/core-frontend/src/components/visualization/ComponentButton.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButton.vue
@@ -60,7 +60,7 @@ const emits = defineEmits(['customClick'])
 }
 
 .inner-active {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
   background: rgba(255, 255, 255, 0.2);
 }
 
diff --git a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
index 3c58a013e0..bbbb92a36c 100644
--- a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
@@ -65,7 +65,7 @@ const emits = defineEmits(['customClick'])
 }
 
 .inner-active {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
   background: rgba(255, 255, 255, 0.2);
 }
 
diff --git a/core/core-frontend/src/components/visualization/LinkJumpSet.vue b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
index 17305c1486..3e39ae1b9d 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -1014,7 +1014,7 @@ span {
   align-items: center;
 }
 .view-type-icon {
-  color: #3370ff;
+  color: var(--ed-color-primary);
   width: 22px;
   height: 16px;
 }
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index 836f2cc9e5..e95f21dd30 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -642,7 +642,7 @@ span {
   align-items: center;
 }
 .view-type-icon {
-  color: #3370ff;
+  color: var(--ed-color-primary);
   width: 22px;
   height: 16px;
 }
diff --git a/core/core-frontend/src/components/visualization/common/DeUpload.vue b/core/core-frontend/src/components/visualization/common/DeUpload.vue
index f6fec8d639..8e5d7556a7 100644
--- a/core/core-frontend/src/components/visualization/common/DeUpload.vue
+++ b/core/core-frontend/src/components/visualization/common/DeUpload.vue
@@ -135,7 +135,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -213,7 +213,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -249,7 +249,7 @@ watch(
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
index 87d217c97f..78392a2547 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -375,7 +375,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -428,7 +428,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -513,7 +513,7 @@ watch(
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
index 889862f618..c046c8fa55 100644
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@@ -245,7 +245,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
@@ -298,7 +298,7 @@ watch(
 
     &:hover {
       .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
diff --git a/core/core-frontend/src/components/visualization/linkJump.vue b/core/core-frontend/src/components/visualization/linkJump.vue
index 773ad05c71..e4eaead690 100644
--- a/core/core-frontend/src/components/visualization/linkJump.vue
+++ b/core/core-frontend/src/components/visualization/linkJump.vue
@@ -281,7 +281,7 @@ defineExpose({
         color: #1f2329;
 
         .main-color {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 0f19fdbae4..39cfcf3222 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -454,7 +454,7 @@ const stopEvent = e => {
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -463,7 +463,7 @@ const stopEvent = e => {
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
index f4cc1f701d..60ce0d5e28 100644
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -149,9 +149,9 @@ const groupActiveChange = category => {
 
 .li-custom-active {
   background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
   .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
 }
 
@@ -165,7 +165,7 @@ const groupActiveChange = category => {
     border-radius: 4px;
     cursor: pointer;
     &:hover {
-      outline: 1px solid #3370ff;
+      outline: 1px solid var(--ed-color-primary);
     }
     .item-top-icon {
       width: 80px;
@@ -191,7 +191,7 @@ const groupActiveChange = category => {
     padding: 4px;
     cursor: pointer;
     &:hover {
-      outline: 1px solid #3370ff;
+      outline: 1px solid var(--ed-color-primary);
     }
     .item-top-icon {
       width: 20px;
diff --git a/core/core-frontend/src/custom-component/component-group/DragComponent.vue b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
index b7ccdf70c4..1bdb631538 100644
--- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue
+++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
@@ -59,7 +59,7 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
     height: 64px !important;
     border-radius: 4px;
     &:hover {
-      border: 1px solid rgba(51, 112, 255, 1);
+      border: 1px solid var(--ed-color-primary);
       cursor: pointer;
     }
     display: flex;
diff --git a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
index 139be6d5d2..0823910997 100644
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@@ -132,7 +132,7 @@ const groupActiveChange = category => {
   :deep(.li-custom) {
     color: #646a73 !important;
     &.li-custom-active {
-      color: #3370ff !important;
+      color: var(--ed-color-primary) !important;
     }
     &:hover {
       background: rgba(31, 35, 41, 0.1) !important;
@@ -201,9 +201,9 @@ const groupActiveChange = category => {
 
 .li-custom-active {
   background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
   .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
 }
 
@@ -223,7 +223,7 @@ const groupActiveChange = category => {
     align-items: center;
     justify-content: center;
     &:hover {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
     }
     .item-top-icon {
       width: 80px;
diff --git a/core/core-frontend/src/custom-component/de-graphical/Attr.vue b/core/core-frontend/src/custom-component/de-graphical/Attr.vue
index 8205da1dca..8311d12ffc 100644
--- a/core/core-frontend/src/custom-component/de-graphical/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-graphical/Attr.vue
@@ -157,7 +157,7 @@ onBeforeUnmount(() => {
 
   &:hover {
     .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
   }
 }
@@ -179,7 +179,7 @@ onBeforeUnmount(() => {
       }
       &:hover {
         .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
@@ -205,7 +205,7 @@ onBeforeUnmount(() => {
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/custom-component/group/Component.vue b/core/core-frontend/src/custom-component/group/Component.vue
index cca710c678..42c4e6e30a 100644
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@@ -118,6 +118,6 @@ watch(
 }
 
 .canvas-active-custom {
-  outline: 2px solid rgba(51, 112, 255, 1) !important;
+  outline: 2px solid var(--ed-color-primary) !important;
 }
 </style>
diff --git a/core/core-frontend/src/custom-component/picture/Attr.vue b/core/core-frontend/src/custom-component/picture/Attr.vue
index ff1c824d1c..9828bac1a1 100644
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@@ -212,7 +212,7 @@ onBeforeUnmount(() => {
 
   &:hover {
     .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
   }
 }
@@ -234,7 +234,7 @@ onBeforeUnmount(() => {
       }
       &:hover {
         .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
@@ -260,7 +260,7 @@ onBeforeUnmount(() => {
 
 .re-update-span {
   cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
   size: 14px;
   line-height: 22px;
   font-weight: 400;
diff --git a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
index 7cef07f7a1..42d69b64cc 100644
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@@ -1486,7 +1486,7 @@ defineExpose({
         .ed-icon {
           cursor: pointer;
           font-size: 16px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
       .list-item_primary {
@@ -1560,7 +1560,7 @@ defineExpose({
         .component-type {
           margin-right: 4px;
           font-size: 20px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
         .list-item {
           height: 32px;
diff --git a/core/core-frontend/src/layout/components/AccountOperator.vue b/core/core-frontend/src/layout/components/AccountOperator.vue
index 7b9c06f7b9..141c35d4ee 100644
--- a/core/core-frontend/src/layout/components/AccountOperator.vue
+++ b/core/core-frontend/src/layout/components/AccountOperator.vue
@@ -190,7 +190,7 @@ if (uid.value === '1') {
     background-color: #1e2738;
   }
   .main-color {
-    background: #3370ff;
+    background: var(--ed-color-primary);
     width: 24px;
     height: 24px;
     border-radius: 50%;
diff --git a/core/core-frontend/src/layout/components/Header.vue b/core/core-frontend/src/layout/components/Header.vue
index 2d6411abae..1705913a12 100644
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@@ -128,21 +128,21 @@ onMounted(() => {
       &.is-active {
         border-bottom: none;
         color: #ffffff !important;
-        background-color: #245bdb;
+        background-color: var(--ed-color-primary);
       }
     }
 
     > .is-active {
       :deep(.ed-sub-menu__title) {
         color: #ffffff !important;
-        background-color: #245bdb;
+        background-color: var(--ed-color-primary);
       }
     }
 
     .ed-menu-item:not(.is-disabled):hover,
     :deep(.ed-sub-menu__title):not(.is-disabled):hover {
       color: #ffffff;
-      background-color: #245bdb;
+      background-color: var(--ed-color-primary);
     }
   }
 }
diff --git a/core/core-frontend/src/layout/components/Sidebar.vue b/core/core-frontend/src/layout/components/Sidebar.vue
index 14d720aba2..f1aec25d77 100644
--- a/core/core-frontend/src/layout/components/Sidebar.vue
+++ b/core/core-frontend/src/layout/components/Sidebar.vue
@@ -29,7 +29,7 @@ const { width, node } = useMoveLine('DATASET')
     position: absolute;
     right: -1px;
     top: 0;
-    background: #3370ff;
+    background: var(--ed-color-primary);
   }
 }
 </style>
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 29fcc41113..3493643c00 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -1,6 +1,7 @@
 :root {
-  font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Helvetica Neue, Helvetica, '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei,
-    \5fae\8f6f\96c5\9ed1, Arial, sans-serif;
+  font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Helvetica Neue, Helvetica,
+    '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1,
+    Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -78,7 +79,7 @@ body {
 
   &.active {
     background: rgba(51, 112, 255, 0.1);
-    color: #3370ff;
+    color: var(--ed-color-primary);
   }
 }
 
@@ -112,7 +113,7 @@ body {
     content: '';
     width: 2px;
     height: 14px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -134,11 +135,11 @@ body {
 }
 
 .field-icon-text {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }
 
 .field-icon-time {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }
 
 .field-icon-value {
@@ -146,7 +147,7 @@ body {
 }
 
 .field-icon-location {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }
 
 .field-icon-red {
@@ -160,7 +161,7 @@ body {
 }
 
 .field-icon-dimension {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }
 
 .field-icon-quota {
@@ -195,7 +196,7 @@ body {
 }
 
 .hover-icon-in-table {
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
   &[aria-expanded='true'] {
     background: rgba(51, 112, 255, 0.1);
   }
@@ -290,7 +291,7 @@ body {
 //   padding: 0 0 64px 0 !important;
 // }
 
-.ed-tree-node.is-current>.ed-tree-node__content:not(.is-menu):after {
+.ed-tree-node.is-current > .ed-tree-node__content:not(.is-menu):after {
   display: none;
 }
 
@@ -363,11 +364,11 @@ em {
 }
 
 .color-panel {
-  background: #3370ff;
+  background: var(--ed-color-primary);
 }
 
 .color-dashboard {
-  background: #3370ff;
+  background: var(--ed-color-primary);
 }
 
 .color-screen {
diff --git a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
index 2302df40b0..cdcc1bd3e5 100644
--- a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
+++ b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
@@ -177,9 +177,9 @@ const groupActiveChange = category => {
 
 .li-custom-active {
   background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
   .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
 }
 
@@ -199,7 +199,7 @@ const groupActiveChange = category => {
     align-items: center;
     justify-content: center;
     &:hover {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
     }
     .item-top-icon {
       width: 80px;
@@ -208,7 +208,7 @@ const groupActiveChange = category => {
     }
   }
   .item-active {
-    border: 1px solid #3370ff;
+    border: 1px solid var(--ed-color-primary);
   }
   .item-bottom {
     height: 20px;
diff --git a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
index 14875f8a12..32b296fdda 100644
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@@ -502,14 +502,14 @@ onMounted(() => {
         }
 
         &.active {
-          color: #3370ff;
+          color: var(--ed-color-primary);
           padding-right: 30px;
         }
         .checked-item {
           position: absolute;
           right: 10px;
           padding-top: 2px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
           font-size: 16px;
         }
       }
@@ -523,12 +523,12 @@ onMounted(() => {
 
     &:not(.is-disabled):focus,
     &:not(.is-disabled):hover {
-      color: rgba(51, 112, 255, 1);
+      color: var(--ed-color-primary);
       border-color: transparent;
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:not(.is-disabled):active {
-      color: rgba(51, 112, 255, 1);
+      color: var(--ed-color-primary);
       border-color: transparent;
       background-color: rgba(51, 112, 255, 0.2);
     }
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
index e2b811e838..f32ab2b064 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@@ -554,7 +554,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   background-color: #3370ff0a;
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }
 
 .item-axis:hover {
@@ -592,7 +592,7 @@ span {
   width: 100%;
 
   &.content-active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
   }
 
   .sub-menu-content--icon {
@@ -706,7 +706,7 @@ span {
   }
 
   .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     margin-right: -7px;
   }
   :nth-child(1).ed-icon {
@@ -727,7 +727,7 @@ span {
   }
 
   .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     margin-right: -7px !important;
   }
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
index d0d354af7e..0097636f48 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
@@ -144,7 +144,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   background-color: #3370ff0a;
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }
 
 .item-axis:hover {
diff --git a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
index 48d25deff0..bd35b97d46 100644
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@@ -787,7 +787,7 @@ span {
   width: 100%;
 
   &.content-active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
   }
 
   .sub-menu-content--icon {
@@ -908,7 +908,7 @@ span {
   }
 
   .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     margin-right: -7px;
   }
   :nth-child(1).ed-icon {
@@ -929,7 +929,7 @@ span {
   }
 
   .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     margin-right: -7px !important;
   }
 }
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index e400f8f779..61be726c9a 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -395,7 +395,7 @@ span {
   line-height: 20px;
   color: #a6a6a6 !important;
   &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
   &.is-disabled {
     color: #5f5f5f !important;
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
index b87195e00d..4a96182336 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@@ -324,7 +324,7 @@ span {
   line-height: 20px;
   color: #a6a6a6 !important;
   &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
   &.is-disabled {
     color: #5f5f5f !important;
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
index e62353ece1..f10de480e6 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@@ -803,7 +803,7 @@ span {
   line-height: 20px;
   color: #a6a6a6 !important;
   &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
   }
   &.is-disabled {
     color: #5f5f5f !important;
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
index 6826c757c2..ca39621abd 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@@ -544,7 +544,7 @@ span {
 .icon-style {
   width: 14px;
   height: 14px;
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }
 
 .m-icon-btn {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index ff8bd977c9..295ba4a240 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -208,7 +208,7 @@ const { chart } = toRefs(props)
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -217,7 +217,7 @@ const { chart } = toRefs(props)
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
index 31d55c0d4a..449a15c14a 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@@ -176,7 +176,7 @@ function onPopoverHide() {
     <template v-if="customColorExtendSettingOpened">
       <div class="custom-color-extend-setting" :class="{ dark: 'dark' === themes }">
         {{ t('chart.custom_case') }}
-        <span style="color: #3370ff; cursor: pointer" @click="resetCustomColor">
+        <span style="color: var(--ed-color-primary); cursor: pointer" @click="resetCustomColor">
           {{ t('chart.reset') }}
         </span>
       </div>
@@ -260,8 +260,8 @@ function onPopoverHide() {
 
   &.active,
   &:hover {
-    border-color: #3370ff;
-    color: #3370ff;
+    border-color: var(--ed-color-primary);
+    color: var(--ed-color-primary);
   }
 }
 .custom-color-extend-setting {
@@ -303,7 +303,7 @@ function onPopoverHide() {
         border-color: rgba(51, 112, 255, 0.6);
       }
       &.active {
-        border-color: #3370ff;
+        border-color: var(--ed-color-primary);
       }
     }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
index 0faddb8183..e5c361c98f 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
@@ -276,7 +276,7 @@ defineExpose({ getFormData })
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -285,7 +285,7 @@ defineExpose({ getFormData })
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
index 9f2e6cea22..e8a2e74d23 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
@@ -576,7 +576,7 @@ defineExpose({ getFormData })
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -585,7 +585,7 @@ defineExpose({ getFormData })
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
index f96967f1b0..15614a6d51 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
@@ -311,7 +311,7 @@ onMounted(() => {
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -320,7 +320,7 @@ onMounted(() => {
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
index 6bddb86673..160b9ad81e 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
@@ -398,7 +398,7 @@ watch(
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -407,7 +407,7 @@ watch(
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
index 00f6430fc9..7477422418 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@@ -255,7 +255,7 @@ onMounted(() => {
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -264,7 +264,7 @@ onMounted(() => {
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
index 3b86714e2b..f65eb3487f 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@@ -256,7 +256,7 @@ onMounted(() => {
   &.dark {
     color: #a6a6a6;
     &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       background-color: rgba(51, 112, 255, 0.1);
     }
     &:hover {
@@ -265,7 +265,7 @@ onMounted(() => {
   }
 
   &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
     background-color: rgba(51, 112, 255, 0.1);
   }
 
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 4f3b64070e..01deb2d11d 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -2292,7 +2292,7 @@ const onRefreshChange = val => {
       .ed-tabs__item {
         height: 35px;
         line-height: 35px;
-        color: #3370ff;
+        color: var(--ed-color-primary);
         font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
         font-size: 12px;
         font-style: normal;
@@ -2460,7 +2460,7 @@ span {
     }
     :deep(.is-active) {
       font-weight: 500;
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
 
     :deep(.ed-tabs__nav-scroll) {
@@ -2509,7 +2509,7 @@ span {
         position: absolute;
         left: 0px;
         top: 0;
-        background: #3370ff;
+        background: var(--ed-color-primary);
       }
     }
 
@@ -2565,7 +2565,7 @@ span {
     }
 
     &.sortable-chosen {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
       background: #fff;
 
       &:hover {
@@ -2818,7 +2818,7 @@ span {
       border-radius: 2px;
     }
     :deep(.ed-button:hover) {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
     }
   }
 
diff --git a/core/core-frontend/src/views/common/DeResourceArrow.vue b/core/core-frontend/src/views/common/DeResourceArrow.vue
index c60287cf44..3c6c6f0307 100644
--- a/core/core-frontend/src/views/common/DeResourceArrow.vue
+++ b/core/core-frontend/src/views/common/DeResourceArrow.vue
@@ -71,7 +71,7 @@ const handleClick = val => {
   z-index: 10;
   &:hover {
     .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
   }
   .ed-icon {
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index a3ae24a9d8..bf83e67eab 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -542,7 +542,7 @@ defineExpose({
     .custom-icon {
       font-size: 20px;
       &.btn {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
       &:hover {
         cursor: pointer;
diff --git a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
index 052847475e..aa1aa6a021 100644
--- a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
+++ b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
@@ -244,7 +244,7 @@ watch(
 
       &:hover {
         .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
@@ -297,7 +297,7 @@ watch(
 
       &:hover {
         .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/views/login/index.vue b/core/core-frontend/src/views/login/index.vue
index 990d1d614e..c8b6e9e5a3 100644
--- a/core/core-frontend/src/views/login/index.vue
+++ b/core/core-frontend/src/views/login/index.vue
@@ -418,7 +418,7 @@ onMounted(() => {
     margin: 20px auto 20px;
     position: relative;
     width: 80px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
     @media only screen and (max-width: 1280px) {
       margin: 20px auto 20px;
     }
diff --git a/core/core-frontend/src/views/share/share/ShareGrid.vue b/core/core-frontend/src/views/share/share/ShareGrid.vue
index d1037b2256..93444ef79b 100644
--- a/core/core-frontend/src/views/share/share/ShareGrid.vue
+++ b/core/core-frontend/src/views/share/share/ShareGrid.vue
@@ -235,7 +235,7 @@ watch(
     margin-right: 12px;
     border-radius: 4px;
     color: #fff;
-    background: #3370ff;
+    background: var(--ed-color-primary);
   }
   .name-star {
     font-size: 15px;
diff --git a/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue b/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue
index 9c02c64ca4..faf0048303 100644
--- a/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue
@@ -134,7 +134,7 @@ defineExpose({
     padding-left: 16px;
 
     i {
-      color: #3370ff;
+      color: var(--ed-color-primary);
       font-size: 14.666666030883789px;
     }
 
diff --git a/core/core-frontend/src/views/system/parameter/map/Geometry.vue b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
index 276b2711d2..bf35a85358 100644
--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@@ -213,7 +213,7 @@ loadTreeData(true)
         line-height: 24px;
       }
       .add-icon-span {
-        color: #3370ff;
+        color: var(--ed-color-primary);
         height: 20px;
         width: 20px;
         i {
diff --git a/core/core-frontend/src/views/system/parameter/map/MapSetting.vue b/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
index e8c49255fa..29da997085 100644
--- a/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
+++ b/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
@@ -68,7 +68,7 @@ const selectHandler = (index: number) => {
       }
       .active {
         background: #3370ff1a;
-        color: #3370ff;
+        color: var(--ed-color-primary);
         font-weight: 500;
       }
     }
diff --git a/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue b/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue
index 83afcba1ae..30c55a5114 100644
--- a/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue
+++ b/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue
@@ -93,7 +93,7 @@ const props = defineProps({
     margin: 4px 8px 0 12px;
     width: 2px;
     height: 16px;
-    background: rgba(51, 112, 255, 1);
+    background: var(--ed-color-primary);
     float: left;
   }
   .custom-category {
@@ -106,7 +106,7 @@ const props = defineProps({
     float: left;
     font-weight: 500;
     font-size: 16px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--ed-color-primary);
     margin-right: 8px;
   }
 
diff --git a/core/core-frontend/src/views/template-market/component/MarketPreview.vue b/core/core-frontend/src/views/template-market/component/MarketPreview.vue
index 108695c409..7899155e1a 100644
--- a/core/core-frontend/src/views/template-market/component/MarketPreview.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreview.vue
@@ -473,13 +473,13 @@ onMounted(() => {
 }
 
 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }
 
 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }
 
 .search-area {
diff --git a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
index 0ee64d8851..32b032d249 100644
--- a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
@@ -617,13 +617,13 @@ onMounted(() => {
 }
 
 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }
 
 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }
 
 .search-area {
diff --git a/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue b/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
index d0744234f5..263a880b4b 100644
--- a/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
+++ b/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
@@ -76,7 +76,7 @@ const previewTemplate = () => {
 }
 
 .template-item-main-active {
-  border: 2px solid #3370ff !important;
+  border: 2px solid var(--ed-color-primary) !important;
 }
 .template-item-img {
   position: absolute;
@@ -103,6 +103,6 @@ const previewTemplate = () => {
 }
 
 .template-item-main:hover {
-  border: solid 1px #3370ff;
+  border: solid 1px var(--ed-color-primary);
 }
 </style>
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index d04a12ed36..48f7da5a30 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -601,7 +601,7 @@ defineExpose({
     margin: 4px 8px 0 12px;
     width: 2px;
     height: 16px;
-    background: rgba(51, 112, 255, 1);
+    background: var(--ed-color-primary);
     float: left;
   }
   .custom-category {
@@ -614,7 +614,7 @@ defineExpose({
     float: left;
     font-weight: 500;
     font-size: 16px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--ed-color-primary);
     margin-right: 8px;
   }
 
diff --git a/core/core-frontend/src/views/template/component/DeTemplateItem.vue b/core/core-frontend/src/views/template/component/DeTemplateItem.vue
index f28bc25a96..205751b76c 100644
--- a/core/core-frontend/src/views/template/component/DeTemplateItem.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateItem.vue
@@ -81,7 +81,7 @@ const handleCommand = key => {
 
 <style lang="less">
 .de-card-model-checked {
-  border: 1px solid #3370ff !important;
+  border: 1px solid var(--ed-color-primary) !important;
 }
 .de-card-model-active {
   .custom-item-checkbox {
@@ -181,7 +181,7 @@ const handleCommand = key => {
 }
 
 .icon-screen-new {
-  background: #3370ff;
+  background: var(--ed-color-primary);
   border-radius: 4px;
   color: #fff;
   padding: 3px;
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 58ca1b58a4..861a46f850 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -527,7 +527,7 @@ const mousedownDrag = () => {
                       {{ ele.name }}
                     </div>
                     <el-icon
-                      style="color: #3370ff !important"
+                      style="color: var(--ed-color-primary)!important"
                       class="hover-icon"
                       @click.stop="copyInfo(ele.name)"
                     >
@@ -563,7 +563,7 @@ const mousedownDrag = () => {
                       <el-table-column :label="t('common.operate')">
                         <template #default="scope">
                           <el-icon
-                            style="color: #3370ff !important"
+                            style="color: var(--ed-color-primary)!important"
                             class="hover-icon"
                             @click.stop="copyInfo(scope.row.originName)"
                           >
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
index efc4cbeac8..514dbb99b1 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@@ -996,7 +996,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
   padding-right: 12px;
 
   &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
   }
 
   .placeholder {
@@ -1021,7 +1021,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
     height: 32px;
     left: -1px;
     top: -1px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
     border-radius: 4px 0px 0px 4px;
   }
 }
@@ -1038,13 +1038,13 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
   background: #fff;
   cursor: pointer;
   &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
   }
 }
 
 .shadow-node {
   border: 1px dashed;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
   background-color: rgba(51, 112, 255, 0.08);
   .ed-icon,
   .tableName {
@@ -1057,7 +1057,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
 }
 
 .active-node {
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }
 
 .drag-mask {
@@ -1080,7 +1080,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
 .mask-dataset-none {
   background-color: #e5ebf8;
   border: 1px dashed;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }
 
 .zero {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index 1a2903c342..16eba7ed09 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -1911,7 +1911,7 @@ const getDsIconName = data => {
         height: 24px;
         :deep(.ed-input__wrapper) {
           background-color: #050e21;
-          box-shadow: 0 0 0 1px #3370ff;
+          box-shadow: 0 0 0 1px var(--ed-color-primary);
           padding: 0 4px;
         }
         :deep(.ed-input__inner) {
@@ -1945,7 +1945,7 @@ const getDsIconName = data => {
         position: absolute;
         left: -1px;
         top: 0;
-        background: #3370ff;
+        background: var(--ed-color-primary);
       }
     }
 
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index 70cd915c61..e3de908ac5 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -775,7 +775,7 @@ const getMenuList = (val: boolean) => {
 
         .custom-icon {
           &.btn {
-            color: #3370ff;
+            color: var(--ed-color-primary);
           }
 
           &:hover {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
index 9e92bfc46e..f74d8d9009 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
@@ -64,7 +64,7 @@ defineExpose({
     .title {
       .ed-icon {
         transform: rotate(90deg);
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
     overflow: auto;
@@ -77,7 +77,7 @@ defineExpose({
     .title {
       .ed-icon {
         transform: rotate(0);
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
index 768f7e860c..00811afabf 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
@@ -120,7 +120,7 @@ const nextClick = () => {
       }
 
       &:not(.disabled):hover {
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
 
       & + .ed-icon {
@@ -140,7 +140,7 @@ const nextClick = () => {
     max-width: 200px;
     border-bottom: 1px solid rgba(31, 35, 41, 0.15);
     &:hover {
-      color: #3370ff;
+      color: var(--ed-color-primary);
     }
 
     .ellipsis {
@@ -180,7 +180,7 @@ const nextClick = () => {
   }
   .active {
     box-shadow: 0px -1px 0px 0px #f5f6f7 inset;
-    color: #3370ff;
+    color: var(--ed-color-primary);
     border: 1px solid rgba(31, 35, 41, 0.15);
     border-bottom: none;
     border-top-left-radius: 4px;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
index 0efc270d36..28de74dae1 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@@ -646,7 +646,7 @@ defineExpose({
       background-color: transparent;
       .step-icon {
         .icon {
-          background: #3370ff;
+          background: var(--ed-color-primary);
         }
       }
     }
@@ -655,7 +655,7 @@ defineExpose({
       background-color: transparent;
       .step-icon {
         .icon {
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
         }
       }
     }
@@ -750,14 +750,14 @@ defineExpose({
     &.active {
       .ed-icon {
         transform: rotate(90deg);
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
 
     &.deactivate {
       .ed-icon {
         transform: rotate(0);
-        color: #3370ff;
+        color: var(--ed-color-primary);
       }
     }
   }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 56a5c084f7..d020b624df 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -977,7 +977,7 @@ defineExpose({
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: #3370ff;
+    color: var(--ed-color-primary);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
@@ -1056,7 +1056,7 @@ defineExpose({
           left: 0;
           top: 50%;
           transform: translateY(-50%);
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
           border-radius: 50%;
         }
 
@@ -1066,7 +1066,7 @@ defineExpose({
 
         &.active::before {
           border: none;
-          background: #3370ff;
+          background: var(--ed-color-primary);
         }
       }
     }
@@ -1100,7 +1100,7 @@ defineExpose({
   cursor: pointer;
 
   &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
   }
   .name {
     font-size: 16px;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
index 25ad8f207e..065e0ec4b2 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
@@ -723,7 +723,7 @@ defineExpose({
       background-color: transparent;
       .step-icon {
         .icon {
-          background: #3370ff;
+          background: var(--ed-color-primary);
         }
       }
     }
@@ -732,7 +732,7 @@ defineExpose({
       background-color: transparent;
       .step-icon {
         .icon {
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 492f134649..55fd653f90 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -1456,7 +1456,7 @@ const getMenuList = (val: boolean) => {
 
         .custom-icon {
           &.btn {
-            color: #3370ff;
+            color: var(--ed-color-primary);
           }
 
           &:hover {
@@ -1595,7 +1595,7 @@ const getMenuList = (val: boolean) => {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: #3370ff;
+    color: var(--ed-color-primary);
     cursor: pointer;
     margin-top: 16px;
     display: inline-flex;
diff --git a/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue b/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue
index a3be497f36..e95ad1c30b 100644
--- a/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue
+++ b/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue
@@ -273,7 +273,7 @@ const handleCheckedFieldsChange = (value: string[]) => {
         color: #1f2329;
 
         .main-color {
-          color: #3370ff;
+          color: var(--ed-color-primary);
         }
       }
     }
diff --git a/core/core-frontend/src/views/workbranch/ShortcutTable.vue b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
index 89a45514f6..56dab076ab 100644
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@@ -393,7 +393,7 @@ const getEmptyDesc = (): string => {
     &:hover,
     &:active,
     &:focus {
-      border-color: #3370ff;
+      border-color: var(--ed-color-primary);
       background-color: #fff;
     }
   }
diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue
index 6f8d415a29..e9de223ef3 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -404,7 +404,7 @@ initMarketTemplate()
   .info-quick-creation {
     width: 360px;
     .main-color {
-      background: #3370ff;
+      background: var(--ed-color-primary);
       width: 32px;
       height: 32px;
     }

From 813c02a045b12e4ad3da6a57876e474a41793a89 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 4 Mar 2024 11:27:37 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=A7=BB=E5=8A=A8=E7=AB=AF=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=AF=8F=E6=AC=A1=E4=BF=9D=E5=AD=98=E5=90=8E=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E5=9C=A8=E6=AD=A4=E8=BF=9B=E8=A1=8C=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E9=83=BD=E4=BC=9A+1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbToolbar.vue        |  8 --------
 .../src/views/dashboard/MobileConfigPanel.vue     | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index d18270aaa0..712cbe22b2 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -141,13 +141,6 @@ const saveCanvasWithCheck = () => {
   saveResource()
 }
 
-const saveCanvasWithCheckFromMobile = () => {
-  snapshotStore.resetStyleChangeTimes()
-  canvasSave(() => {
-    ElMessage.success('保存成功')
-  })
-}
-
 const saveResource = () => {
   if (styleChangeTimes.value > 0) {
     snapshotStore.resetStyleChangeTimes()
@@ -199,7 +192,6 @@ const mobileConfig = () => {
 
 eventBus.on('preview', previewInner)
 eventBus.on('save', saveCanvasWithCheck)
-eventBus.on('saveFromMobile', saveCanvasWithCheckFromMobile)
 eventBus.on('clearCanvas', clearCanvas)
 
 const openDataBoardSetting = () => {
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 13c09ffc21..07504d56db 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
-import eventBus from '@/utils/eventBus'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
-import { ElMessageBox } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { canvasSave } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getStyle } from '@/utils/style'
@@ -12,6 +13,7 @@ const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
 const mobileLoading = ref(true)
 const emits = defineEmits(['pcMode'])
+const snapshotStore = snapshotStoreWithOut()
 
 const getComponentStyleDefault = style => {
   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
@@ -78,9 +80,16 @@ const hanedleMessage = event => {
       }
     })
 
-    eventBus.emit('saveFromMobile')
+    saveCanvasWithCheckFromMobile()
   }
 }
+
+const saveCanvasWithCheckFromMobile = () => {
+  snapshotStore.resetStyleChangeTimes()
+  canvasSave(() => {
+    ElMessage.success('保存成功')
+  })
+}
 onMounted(() => {
   window.addEventListener('message', hanedleMessage)
   dvMainStore.setMobileInPc(true)

From 79d712798e4c9770ab01b17494f224fe05727657 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 4 Mar 2024 11:28:48 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(=E7=A7=BB=E5=8A=A8=E7=AB=AF):=20web?=
 =?UTF-8?q?=E7=AB=AF=E5=92=8C=E7=A7=BB=E5=8A=A8=E7=AB=AF=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E4=B8=8D=E4=B8=80=E8=87=B4=20=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E7=BB=84=E4=BB=B6=E4=B8=AD=E6=97=A5=E6=9C=9F=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=9D=A1=E4=BB=B6=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-frontend/src/custom-component/v-query/Time.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/core-frontend/src/custom-component/v-query/Time.vue b/core/core-frontend/src/custom-component/v-query/Time.vue
index a423600c47..37eb34b2aa 100644
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@@ -220,6 +220,7 @@ const setArrValue = () => {
 
 const onConfirm = () => {
   setArrValue()
+  handleValueChange()
   showDate.value = false
 }