From 3c01fbf17c07dd3df265874d5fd32856ea86ea20 Mon Sep 17 00:00:00 2001
From: MeterSphere Bot <78466014+metersphere-bot@users.noreply.github.com>
Date: Thu, 28 Nov 2024 14:04:38 +0800
Subject: [PATCH] feat(theme): darkTheme (#34438)

Co-authored-by: baiqi <qi.bai@fit2cloud.com>
---
 frontend/src/App.vue                          |   5 +-
 frontend/src/assets/style/arco-reset.less     |  84 +++++++---
 frontend/src/assets/style/global.less         |   1 +
 frontend/src/assets/style/var.less            |  13 +-
 .../business/ms-batch-form/index.vue          |   2 +-
 .../components/business/ms-comment/input.vue  |   3 +-
 .../components/business/ms-comment/style.less |   2 +-
 .../ms-common-script/ms-script-menu.vue       |   5 +-
 .../ms-message/MessageCenterDrawer.vue        |   4 +-
 .../components/reviewStatusTrigger.vue        |   3 +-
 .../ms-minders/caseReviewMinder/index.vue     |   2 +-
 .../ms-minders/featureCaseMinder/basInfo.vue  |   2 +-
 .../ms-minders/featureCaseMinder/bugList.vue  |   2 +-
 .../testPlanFeatureCaseMinder/bugList.vue     |   2 +-
 .../testPlanFeatureCaseMinder/index.vue       |   2 +-
 .../ms-minders/testPlanMinder/index.vue       |   2 +-
 .../business/ms-params-input/index.vue        |   2 +-
 .../ms-personal-drawer/components/apiKey.vue  |   3 +-
 .../components/baseInfo.vue                   |   3 +-
 .../components/tripartite.vue                 |   3 +-
 .../components/business/ms-select/index.less  |   3 +-
 .../business/ms-thumbnail-card/index.vue      |   3 +-
 .../components/business/ms-transfer/index.vue |   2 +-
 .../src/components/business/ms-tree/index.vue |   4 +-
 .../business/ms-user-group-comp/authTable.vue |   6 +-
 .../ms-user-group-comp/msUserGroupLeft.vue    |   2 +-
 .../src/components/pure/flow-editor/index.vue |  30 ----
 .../components/pure/ms-back-button/index.vue  |   3 +-
 .../src/components/pure/ms-card/index.vue     |  11 +-
 .../components/pure/ms-code-editor/index.vue  |  15 +-
 .../components/pure/ms-description/index.vue  |   4 +-
 .../src/components/pure/ms-drawer/index.vue   |   6 +-
 .../components/pure/ms-editable-tab/index.vue |   2 +-
 .../components/pure/ms-form-table/index.vue   |   4 +-
 .../pure/ms-minder-editor/main/header.vue     |   5 +-
 .../pure/ms-minder-editor/main/mainEditor.vue |  40 ++++-
 .../pure/ms-minder-editor/main/navigator.vue  |  13 +-
 .../ms-minder-editor/menu/nodeFloatMenu.vue   |   5 +-
 .../pure/ms-minder-editor/minderEditor.vue    |   3 +-
 .../pure/ms-minder-editor/script/editor.ts    |   1 +
 .../pure/ms-minder-editor/style/editor.less   |   6 +-
 .../components/pure/ms-pagination/style.less  |   2 +-
 .../pure/ms-rich-text/MsRichText.vue          |   6 +-
 .../extensions/mention/MentionList.vue        |   3 +-
 .../pure/ms-separate-radio-button/index.vue   |   3 +-
 .../components/pure/ms-split-box/index.vue    |   4 +-
 .../components/pure/ms-table/base-table.vue   |  41 ++++-
 .../pure/ms-table/comp/defaultFilter.vue      |   3 +
 .../src/components/pure/ms-tag/ms-tag.vue     |   6 +-
 .../components/pure/ms-upload/fileList.vue    |   2 +-
 .../src/components/pure/ms-upload/index.vue   |   3 +-
 frontend/src/components/pure/navbar/index.vue |  36 +++++
 frontend/src/locale/en-US/settings.ts         |   2 +-
 frontend/src/locale/zh-CN/settings.ts         |   2 +-
 frontend/src/store/modules/app/index.ts       |   6 +-
 frontend/src/store/modules/app/types.ts       |   1 +
 frontend/src/utils/theme.ts                   | 151 +++++++++++++++++-
 .../api-test/components/apiMethodName.vue     |   2 +-
 .../api-test/components/condition/list.vue    |   6 +-
 .../components/fastExtraction/index.vue       |  17 +-
 .../views/api-test/components/paramTable.vue  |   3 +-
 .../components/requestComposition/index.vue   |   6 +-
 .../response/result/index.vue                 |   4 +-
 .../response/result/resValueScript.vue        |   3 +-
 .../response/result/tiledDisplay.vue          |   6 +-
 .../api-test/management/components/import.vue |   3 +-
 .../management/api/apiExportModal.vue         |   3 +-
 .../management/api/apiSharePreview.vue        |   4 +-
 .../components/management/api/shareButton.vue |   3 +-
 .../case/tabContent/tabCaseExecuteHistory.vue |   2 +-
 .../src/views/api-test/management/index.vue   |   8 +-
 .../report/component/caseReportCom.vue        |  11 +-
 .../report/component/caseReportDrawer.vue     |  12 +-
 .../report/component/reportDetailDrawer.vue   |  16 +-
 .../report/component/reportStatus.vue         |   2 +-
 .../api-test/report/component/scenarioCom.vue |  12 +-
 .../report/component/step/readOnlyTree.vue    |  25 +--
 .../report/component/step/stepTree.vue        |  15 +-
 .../views/api-test/report/exportCasePDF.vue   |   2 +-
 .../api-test/report/exportScenarioPDF.vue     |   2 +-
 .../views/api-test/report/shareCaseIndex.vue  |  12 +-
 .../components/common/csvParamsTable.vue      |   2 +-
 .../components/common/customApiDrawer.vue     |   8 +-
 .../components/common/customCaseDrawer.vue    |   8 +-
 .../exportScenario/scenarioExportModal.vue    |   3 +-
 .../common/importApiDrawer/index.vue          |   2 +-
 .../components/common/loopPagination.vue      |   6 +-
 .../components/common/responsePopover.vue     |   9 +-
 .../common/scriptOperationDrawer.vue          |   8 +-
 .../scenario/components/executeHistory.vue    |   2 +-
 .../api-test/scenario/components/import.vue   |   3 +-
 .../scenario/components/step/stepTree.vue     |   6 +-
 .../src/views/api-test/scenario/index.vue     |  10 +-
 .../src/views/api-test/scenario/recycle.vue   |  10 +-
 frontend/src/views/base/invite/index.vue      |   2 +-
 .../components/bug-detail-drawer.vue          |   2 +-
 .../views/bug-management/createSuccess.vue    |   7 +-
 .../components/caseDetailDrawer.vue           |   4 +-
 .../components/createSuccess.vue              |   7 +-
 .../components/recycleCaseTable.vue           |   2 +-
 .../components/stepDetailTrigger.vue          |   2 +-
 .../caseManagementFeature/index.vue           |   8 +-
 .../case-management/caseReview/caseDetail.vue |   6 +-
 .../case-management/caseReview/detail.vue     |   2 +-
 .../src/views/login/components/login-form.vue |  27 ++--
 .../environmental/components/EnvGroupBox.vue  |   4 +-
 .../environmental/components/EnvParamBox.vue  |   8 +-
 .../components/envParams/DatabaseTab.vue      |  73 +++++----
 .../components/envParams/HttpTab.vue          |  22 +--
 .../components/envParams/popUp/apiTree.vue    |   4 +-
 .../environmental/index.vue                   |   3 +-
 .../fileManagement/components/rightBox.vue    |   4 +-
 .../fileManagement/index.vue                  |   3 +-
 .../components/messageList.vue                |   2 +-
 .../components/messagePreview.vue             |  18 ++-
 .../components/robotList.vue                  |   3 +-
 .../messageManagement/edit.vue                |   5 +-
 .../projectAndPermission/basicInfos/index.vue |   6 +-
 .../projectAndPermission/index.vue            |   4 +-
 .../projectAndPermission/member/index.vue     |   6 +-
 .../menuManagement/menuManagement.vue         |   3 +
 .../projectVersion/index.vue                  |   2 +-
 .../userGroup/projectUserGroup.vue            |   4 +-
 .../userGroup/userDrawer.vue                  |   9 ++
 .../components/serviceList.vue                |   4 +-
 .../organization/serviceIntegration/index.vue |   2 +-
 .../template/components/addTemplate.vue       |   2 +-
 .../template/components/templateItem.vue      |   7 +-
 .../template/components/workflowCard.vue      |   2 +-
 .../system/config/components/baseConfig.vue   |   2 +-
 .../config/components/memoryCleanup.vue       |   6 +-
 .../system/config/components/pageConfig.vue   |  15 +-
 .../system/config/components/qrCodeConfig.vue |   4 +-
 .../system/log/components/logCards.vue        |   2 +-
 .../pluginManager/components/pluginTable.vue  |   6 +-
 .../setting/system/resourcePool/index.vue     |   2 +-
 .../src/views/setting/system/user/index.vue   |   2 +-
 .../component/executeResultStatus.vue         |   2 +-
 .../component/testPlanExecuteResultDrawer.vue |   3 +-
 .../report/detail/component/config.vue        |   6 +-
 .../component/system-card/testSetTable.vue    |   2 +-
 .../component/system-card/testTableIndex.vue  |   3 +-
 .../report/detail/component/viewReport.vue    |  13 +-
 .../test-plan/report/detail/exportPDF.vue     |  11 +-
 .../testPlan/detail/executeResultDrawer.vue   |   4 +-
 .../views/workbench/components/notData.vue    |   3 +-
 .../homePage/components/cardSettingDrawer.vue |   5 +-
 .../homePage/components/cardSettingList.vue   |   6 +-
 .../src/views/workbench/homePage/index.vue    |   3 +-
 149 files changed, 819 insertions(+), 390 deletions(-)
 delete mode 100644 frontend/src/components/pure/flow-editor/index.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 18a95793a0..6cf075a536 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -20,7 +20,7 @@
   import { getQueryVariable, getUrlParameterWidthRegExp } from '@/utils';
   import { setLoginExpires, setLongType, setToken } from '@/utils/auth';
   import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
-  import { setFavicon, watchStyle, watchTheme } from '@/utils/theme';
+  import { setFavicon } from '@/utils/theme';
 
   import { getLarkCallback, getLarkSuiteCallback, getPublicKeyRequest } from './api/modules/user';
   import { hasAnyPermission } from './utils/permission';
@@ -42,9 +42,6 @@
     }
   });
 
-  // 初始化平台风格和主题色
-  watchStyle(appStore.pageConfig.style, appStore.pageConfig);
-  watchTheme(appStore.pageConfig.theme, appStore.pageConfig);
   setFavicon(GetPlatformIconUrl);
 
   onBeforeMount(async () => {
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 1f68aac3bf..b60e34b86a 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -17,6 +17,10 @@
     }
   }
 }
+.arco-table-td {
+  border-color: var(--color-text-n9);
+  color: var(--color-text-1);
+}
 .ms-table-row-disabled {
   td:not(.arco-table-col-fixed-right, .arco-table-checkbox),
   &:hover,
@@ -26,13 +30,33 @@
     background-color: var(--color-text-n8) !important;
   }
 }
+.arco-table-header,
+.arco-table-tr,
+.arco-table-th {
+  background-color: var(--color-text-fff);
+}
+.arco-table-th {
+  border-color: var(--color-text-n8) !important;
+}
+.arco-table-td,
+.arco-table-scroll-y {
+  border-color: var(--color-text-n8) !important;
+}
 
 /** Tabs 组件样式 **/
+.arco-tabs,
+.arco-tabs-nav {
+  border-color: var(--color-text-n8);
+}
 .arco-tabs-nav-add-btn {
   font-size: var(--font-size-body-3);
 }
 .arco-tabs-tab {
   padding: 12px 0 !important;
+  color: var(--color-text-2);
+  &-active {
+    color: rgb(var(--primary-5));
+  }
   &:hover {
     .arco-tabs-tab-title::before {
       background-color: inherit !important;
@@ -58,9 +82,10 @@
   @apply overflow-hidden;
 }
 .arco-modal {
-  @apply overflow-hidden bg-white;
+  @apply overflow-hidden;
 
   padding: 24px;
+  background-color: var(--color-text-fff);
   .arco-modal-header {
     @apply h-auto items-baseline border-b-0 p-0;
 
@@ -298,6 +323,7 @@
 .arco-select {
   width: 100%;
   border: 1px solid var(--color-text-n8);
+  border-color: var(--color-text-n8) !important;
   background-color: var(--color-text-fff);
   &:not(
       :disabled,
@@ -308,16 +334,19 @@
       .arco-picker-disabled
     ):hover {
     border-color: rgb(var(--primary-5)) !important;
-    background-color: white;
-  }
-  input::placeholder {
-    color: var(--color-text-brand);
+    background-color: var(--color-text-fff);
   }
 }
+input::placeholder {
+  color: var(--color-text-brand) !important;
+}
 .arco-select-view-multiple.arco-select-view-size-medium {
   overflow: hidden; // 防止多选输入过多，撑开
   height: 32px;
 }
+.arco-select-view-prefix {
+  color: var(--color-text-brand) !important;
+}
 .arco-input-tag-disabled,
 .arco-select-view-disabled,
 .arco-textarea-disabled,
@@ -379,12 +408,11 @@
   }
   .arco-input-prepend,
   .arco-input-append {
-    @apply bg-white;
+    background-color: var(--color-text-fff);
     .arco-input-number-step-button {
-      @apply !bg-white;
-
       border: 1px solid var(--color-text-n8) !important;
       border-radius: var(--border-radius-small) !important;
+      background-color: var(--color-text-fff) !important;
       .btn-outline-sec-hover();
       .btn-outline-sec-active();
       &:disabled {
@@ -430,14 +458,14 @@
     .arco-input-wrapper:not(.arco-input-disabled),
     .arco-select-view:not(.arco-select-view-disabled),
     .arco-textarea-wrapper:not(.arco-textarea-disabled) {
-      background: white;
+      background: var(--color-text-fff);
     }
   }
   .arco-input-wrapper:not(.arco-input-disabled),
   .arco-select-view:not(.arco-select-view-disabled),
   .arco-textarea-wrapper:not(.arco-textarea-disabled) {
     border-color: var(--color-text-input-border);
-    background: white;
+    background: var(--color-text-fff);
   }
 }
 .arco-form-item-message {
@@ -493,10 +521,11 @@
 .arco-checkbox-disabled.arco-checkbox-checked,
 .arco-checkbox-disabled.arco-checkbox-checked:hover {
   .arco-checkbox-icon {
-    @apply bg-white text-white;
+    @apply text-white;
 
     border-color: var(--color-text-input-border) !important;
     background: var(--color-text-n8) !important;
+    background-color: var(--color-text-fff);
     &::after {
       background-color: var(--color-text-4);
     }
@@ -522,9 +551,8 @@
     line-height: 20px;
   }
   .arco-radio-checked {
-    @apply bg-white;
-
     color: rgb(var(--primary-5));
+    background-color: var(--color-text-fff);
   }
 }
 .arco-radio-group-size-medium {
@@ -547,12 +575,11 @@
 }
 .arco-radio-checked:not(.arco-radio-disabled) {
   .arco-radio-icon {
-    @apply !bg-white;
-
     width: 16px;
     height: 16px;
-    line-height: 16px;
     border: 1px solid rgb(var(--primary-6));
+    background-color: var(--color-text-fff) !important;
+    line-height: 16px;
     &::after {
       top: 2px;
       left: 2px;
@@ -703,9 +730,8 @@
       margin: 1px;
     }
     .arco-radio-checked {
-      @apply bg-white;
-
       color: rgb(var(--primary-5));
+      background-color: var(--color-text-fff);
     }
   }
   .arco-radio-checked.arco-radio-disabled {
@@ -719,12 +745,11 @@
   }
   .arco-radio-checked:not(.arco-radio-disabled) {
     .arco-radio-icon {
-      @apply !bg-white;
-
       width: 16px;
       height: 16px;
-      line-height: 16px;
       border: 1px solid rgb(var(--primary-6));
+      background-color: var(--color-text-fff) !important;
+      line-height: 16px;
       &::after {
         top: 2px;
         left: 2px;
@@ -745,6 +770,9 @@
   font-size: 12px;
   line-height: 16px;
 }
+.arco-popover-popup-content {
+  border-color: var(--color-text-n8);
+}
 
 /** 链接 **/
 .arco-link-status-normal {
@@ -867,6 +895,8 @@
 /** tooltip **/
 .arco-tooltip-content {
   @apply break-all;
+
+  color: var(--color-text-fff);
 }
 .arco-trigger-arrow {
   border-bottom-right-radius: var(--border-radius-mini) !important;
@@ -930,3 +960,15 @@
   flex-direction: row;
   margin: 12px;
 }
+
+/** 分割线 **/
+.arco-divider-horizontal,
+.arco-divider-vertical {
+  border-color: var(--color-text-n8);
+}
+
+/** 级联选择器 **/
+.arco-cascader-panel,
+.arco-cascader-panel-column {
+  border-color: var(--color-text-n8) !important;
+}
diff --git a/frontend/src/assets/style/global.less b/frontend/src/assets/style/global.less
index 3189ad143c..76506cd2e4 100644
--- a/frontend/src/assets/style/global.less
+++ b/frontend/src/assets/style/global.less
@@ -129,6 +129,7 @@ body {
   .arco-trigger-popup-wrapper {
     .arco-popover-popup-content {
       padding: 4px 8px;
+      border-color: var(--color-text-n8);
     }
   }
 
diff --git a/frontend/src/assets/style/var.less b/frontend/src/assets/style/var.less
index 69af717c40..125a7ba169 100644
--- a/frontend/src/assets/style/var.less
+++ b/frontend/src/assets/style/var.less
@@ -26,10 +26,9 @@
 }
 .btn-outline-primary-disabled() {
   &:disabled {
-    @apply !bg-white;
-
     border: 1px solid rgb(var(--primary-3)) !important;
     color: rgb(var(--primary-3)) !important;
+    background-color: var(--color-text-fff) !important;
   }
 }
 .btn-outline-sec-hover() {
@@ -42,7 +41,7 @@
 .btn-outline-sec-default() {
   border-color: var(--color-text-brand) !important;
   color: var(--color-text-1) !important;
-  background-color: white !important;
+  background-color: var(--color-text-fff) !important;
 }
 .btn-outline-sec-active() {
   &:not(:disabled):active {
@@ -53,10 +52,9 @@
 }
 .btn-outline-sec-disabled() {
   &:disabled {
-    @apply !bg-white;
-
     border: 1px solid var(--color-text-input-border) !important;
     color: var(--color-text-4) !important;
+    background-color: var(--color-text-fff) !important;
   }
 }
 .btn-outline-danger-default() {
@@ -79,10 +77,9 @@
 }
 .btn-outline-danger-disabled() {
   &:disabled {
-    @apply !bg-white;
-
     border: 1px solid rgb(var(--danger-2)) !important;
     color: rgb(var(--danger-2));
+    background-color: var(--color-text-fff) !important;
   }
 }
 
@@ -216,6 +213,7 @@
     z-index: 1;
     width: 100%;
     height: 10px;
+    background-color: transparent;
     box-shadow: none;
     transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
     content: '';
@@ -231,6 +229,7 @@
     z-index: 1;
     width: 100%;
     height: 10px;
+    background-color: transparent;
     box-shadow: none;
     transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
     content: '';
diff --git a/frontend/src/components/business/ms-batch-form/index.vue b/frontend/src/components/business/ms-batch-form/index.vue
index d79e546508..442248dfaf 100644
--- a/frontend/src/components/business/ms-batch-form/index.vue
+++ b/frontend/src/components/business/ms-batch-form/index.vue
@@ -399,7 +399,7 @@
     @apply rounded;
   }
   .dragChosenClass {
-    background: white;
+    background: var(--color-text-fff);
     opacity: 1 !important;
     @apply rounded;
     .minus {
diff --git a/frontend/src/components/business/ms-comment/input.vue b/frontend/src/components/business/ms-comment/input.vue
index 536d2cc054..c691cd8490 100644
--- a/frontend/src/components/business/ms-comment/input.vue
+++ b/frontend/src/components/business/ms-comment/input.vue
@@ -115,8 +115,9 @@
 <style scoped lang="less">
   .commentWrapper {
     z-index: 101;
+    background-color: var(--color-text-fff);
     box-shadow: 1px -1px 4px rgba(2 2 2 / 10%);
-    @apply absolute bottom-0 w-full bg-white px-4 py-4;
+    @apply absolute bottom-0 w-full px-4 py-4;
   }
   :deep(.rich-wrapper) {
     .halo-rich-text-editor {
diff --git a/frontend/src/components/business/ms-comment/style.less b/frontend/src/components/business/ms-comment/style.less
index 7b34e755f7..edbbccbdca 100644
--- a/frontend/src/components/business/ms-comment/style.less
+++ b/frontend/src/components/business/ms-comment/style.less
@@ -35,7 +35,7 @@
     @apply overflow-x-auto;
     .ms-scroll-bar();
     tr {
-      background: white !important;
+      background: var(--color-text-fff) !important;
       th,
       td {
         padding: 8px;
diff --git a/frontend/src/components/business/ms-common-script/ms-script-menu.vue b/frontend/src/components/business/ms-common-script/ms-script-menu.vue
index fbdea890d3..54d0293d53 100644
--- a/frontend/src/components/business/ms-common-script/ms-script-menu.vue
+++ b/frontend/src/components/business/ms-common-script/ms-script-menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!innerExpand" class="w-[32%] min-w-[260px] max-w-[42%] flex-1 bg-white p-3 pl-0">
+  <div v-if="!innerExpand" class="w-[32%] min-w-[260px] max-w-[42%] flex-1 bg-[var(--color-text-fff)] p-3 pl-0">
     <div class="mb-2 flex w-full items-center justify-between">
       <div class="flex items-center">
         <span v-if="innerExpand" class="collapsebtn mr-1 flex items-center justify-center" @click="expandedHandler">
@@ -178,8 +178,9 @@ StandardJMeterEngine.stopThreadNow(ctx.getThread().getThreadName());
     width: 16px;
     height: 16px;
     border-radius: 50%;
+    @apply cursor-pointer;
+
     background: var(--color-text-n8) !important;
-    @apply cursor-pointer bg-white;
   }
   .expand {
     width: 16px;
diff --git a/frontend/src/components/business/ms-message/MessageCenterDrawer.vue b/frontend/src/components/business/ms-message/MessageCenterDrawer.vue
index 1429abe69e..47b8bf8a7f 100644
--- a/frontend/src/components/business/ms-message/MessageCenterDrawer.vue
+++ b/frontend/src/components/business/ms-message/MessageCenterDrawer.vue
@@ -14,7 +14,7 @@
       </div>
     </template>
     <div class="flex h-full w-full">
-      <div class="flex h-full w-[180px] flex-col bg-white">
+      <div class="flex h-full w-[180px] flex-col bg-[var(--color-text-fff)]">
         <a-menu class="ms-message-menu" :default-selected-keys="[defaultModule]" @menu-item-click="clickModule">
           <a-menu-item :key="'all'">
             <div class="flex items-center justify-between">
@@ -473,7 +473,7 @@
 <style lang="less">
   .ms-drawer {
     .ms-message-menu {
-      @apply bg-white;
+      background-color: var(--color-text-fff);
       .arco-menu-inner {
         padding: 16px;
       }
diff --git a/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue b/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue
index 1034d695dc..dc6cb5b5e8 100644
--- a/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue
+++ b/frontend/src/components/business/ms-minders/caseReviewMinder/components/reviewStatusTrigger.vue
@@ -69,8 +69,9 @@
     width: 150px;
     max-height: 192px;
     border-radius: var(--border-radius-medium);
+    background-color: var(--color-text-fff);
     box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
-    @apply overflow-y-auto overflow-x-hidden bg-white;
+    @apply overflow-y-auto overflow-x-hidden;
     .ms-scroll-bar();
   }
 </style>
diff --git a/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue b/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
index bee11f2a04..f99aa0dd5c 100644
--- a/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
+++ b/frontend/src/components/business/ms-minders/caseReviewMinder/index.vue
@@ -41,7 +41,7 @@
             </MsButton>
           </a-tooltip>
           <template #content>
-            <div class="w-[440px] rounded bg-white p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
+            <div class="w-[440px] rounded bg-[var(--color-text-fff)] p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
               <ReviewSubmit
                 :review-pass-rule="reviewPassRule"
                 :select-node="selectNode"
diff --git a/frontend/src/components/business/ms-minders/featureCaseMinder/basInfo.vue b/frontend/src/components/business/ms-minders/featureCaseMinder/basInfo.vue
index eb4e3c7eeb..289ee35c00 100644
--- a/frontend/src/components/business/ms-minders/featureCaseMinder/basInfo.vue
+++ b/frontend/src/components/business/ms-minders/featureCaseMinder/basInfo.vue
@@ -34,7 +34,7 @@
         </a-form-item>
       </a-form>
     </div>
-    <div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-white py-[16px]">
+    <div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-[var(--color-text-fff)] py-[16px]">
       <a-button
         v-permission="['FUNCTIONAL_CASE:READ+UPDATE']"
         type="primary"
diff --git a/frontend/src/components/business/ms-minders/featureCaseMinder/bugList.vue b/frontend/src/components/business/ms-minders/featureCaseMinder/bugList.vue
index 858742ff4e..64947d0f19 100644
--- a/frontend/src/components/business/ms-minders/featureCaseMinder/bugList.vue
+++ b/frontend/src/components/business/ms-minders/featureCaseMinder/bugList.vue
@@ -246,7 +246,7 @@
     padding: 8px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
-    background-color: white;
+    background-color: var(--color-text-fff);
     &:hover {
       @apply relative;
 
diff --git a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/bugList.vue b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/bugList.vue
index 65492dd25f..7822ecd866 100644
--- a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/bugList.vue
+++ b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/bugList.vue
@@ -134,7 +134,7 @@
     padding: 8px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
-    background-color: white;
+    background-color: var(--color-text-fff);
     &:hover {
       @apply relative;
 
diff --git a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
index 135cf5f40d..7f38eab393 100644
--- a/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
+++ b/frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue
@@ -62,7 +62,7 @@
             <MsIcon type="icon-icon_play-round_filled" class="text-[var(--color-text-4)]" />
           </MsButton>
           <template #content>
-            <div class="w-[440px] rounded bg-white p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
+            <div class="w-[440px] rounded bg-[var(--color-text-fff)] p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
               <ExecuteSubmit
                 :select-node="selectNode"
                 :tree-type="props.treeType"
diff --git a/frontend/src/components/business/ms-minders/testPlanMinder/index.vue b/frontend/src/components/business/ms-minders/testPlanMinder/index.vue
index 621154a3a6..9e03cfa434 100644
--- a/frontend/src/components/business/ms-minders/testPlanMinder/index.vue
+++ b/frontend/src/components/business/ms-minders/testPlanMinder/index.vue
@@ -217,7 +217,7 @@
             </template>
           </template>
         </a-form>
-        <div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-white pb-[16px]">
+        <div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-[var(--color-text-fff)] pb-[16px]">
           <a-button type="primary" :loading="loading" @click="handleConfigSave">
             {{ t('common.save') }}
           </a-button>
diff --git a/frontend/src/components/business/ms-params-input/index.vue b/frontend/src/components/business/ms-params-input/index.vue
index 3d1953e6ae..1a8222a991 100644
--- a/frontend/src/components/business/ms-params-input/index.vue
+++ b/frontend/src/components/business/ms-params-input/index.vue
@@ -667,7 +667,7 @@
 
 <style lang="less">
   .ms-params-input-setting-trigger {
-    @apply bg-white;
+    background-color: var(--color-text-fff);
     .ms-params-input-setting-trigger-content {
       padding: 16px;
       width: 480px;
diff --git a/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue b/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
index 2ceff7be74..c0c7ac66db 100644
--- a/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
+++ b/frontend/src/components/business/ms-personal-drawer/components/apiKey.vue
@@ -388,11 +388,10 @@
     background-color: var(--color-text-n9);
   }
   .api-item {
-    @apply bg-white;
-
     padding: 16px 0;
     height: 335px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     .api-item-label {
       font-size: 12px;
       line-height: 16px;
diff --git a/frontend/src/components/business/ms-personal-drawer/components/baseInfo.vue b/frontend/src/components/business/ms-personal-drawer/components/baseInfo.vue
index b77ec40dbf..943986cd56 100644
--- a/frontend/src/components/business/ms-personal-drawer/components/baseInfo.vue
+++ b/frontend/src/components/business/ms-personal-drawer/components/baseInfo.vue
@@ -316,9 +316,10 @@
     margin-bottom: 16px;
   }
   .check-icon {
-    @apply absolute right-0 rounded-full bg-white;
+    @apply absolute right-0 rounded-full;
 
     bottom: 22px;
+    background-color: var(--color-text-fff);
   }
   :deep(.ms-description-item-value) {
     -webkit-line-clamp: unset !important;
diff --git a/frontend/src/components/business/ms-personal-drawer/components/tripartite.vue b/frontend/src/components/business/ms-personal-drawer/components/tripartite.vue
index 0707c2d860..08d89215ca 100644
--- a/frontend/src/components/business/ms-personal-drawer/components/tripartite.vue
+++ b/frontend/src/components/business/ms-personal-drawer/components/tripartite.vue
@@ -266,10 +266,11 @@
     gap: 16px;
   }
   .platform-card {
-    @apply w-full bg-white;
+    @apply w-full;
 
     padding: 16px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     :deep(.arco-form-item-label) {
       color: var(--color-text-4) !important;
     }
diff --git a/frontend/src/components/business/ms-select/index.less b/frontend/src/components/business/ms-select/index.less
index d4e68703ca..5702e73348 100644
--- a/frontend/src/components/business/ms-select/index.less
+++ b/frontend/src/components/business/ms-select/index.less
@@ -3,9 +3,10 @@
     @apply relative;
   }
   .ms-select-inner-all {
-    @apply absolute top-0 flex h-full w-full items-center bg-white;
+    @apply absolute top-0 flex h-full w-full items-center;
 
     color: var(--color-text-1);
+    background-color: var(--color-text-fff);
   }
 }
 .arco-select-view-single {
diff --git a/frontend/src/components/business/ms-thumbnail-card/index.vue b/frontend/src/components/business/ms-thumbnail-card/index.vue
index a793752b80..99781e718a 100644
--- a/frontend/src/components/business/ms-thumbnail-card/index.vue
+++ b/frontend/src/components/business/ms-thumbnail-card/index.vue
@@ -139,13 +139,14 @@
       }
     }
     .ms-thumbnail-card-more {
-      @apply invisible absolute bg-white;
+      @apply invisible absolute;
 
       top: 4px;
       right: 4px;
       z-index: 1;
       padding: 4px;
       border-radius: var(--border-radius-small);
+      background-color: var(--color-text-fff);
       &:hover {
         color: rgb(var(--primary-5));
         background-color: rgb(var(--primary-1));
diff --git a/frontend/src/components/business/ms-transfer/index.vue b/frontend/src/components/business/ms-transfer/index.vue
index 3e70d81d22..c860606250 100644
--- a/frontend/src/components/business/ms-transfer/index.vue
+++ b/frontend/src/components/business/ms-transfer/index.vue
@@ -186,7 +186,7 @@
       width: calc(50% - 34px);
       height: v-bind(height);
       .arco-transfer-view-header {
-        @apply bg-white;
+        background-color: var(--color-text-fff);
       }
       .arco-transfer-view-body {
         .ms-tree-container {
diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index 77f24e985a..d63bd1c6d0 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -526,7 +526,7 @@
         .arco-tree-node-plus-icon {
           border: 1px solid var(--color-text-4);
           border-radius: var(--border-radius-mini);
-          background-color: white;
+          background-color: var(--color-text-fff);
           &::after,
           &::before {
             background-color: var(--color-text-4);
@@ -612,7 +612,7 @@
         .arco-tree-node-plus-icon {
           border: 1px solid rgb(var(--primary-5));
           border-radius: var(--border-radius-mini);
-          background-color: white;
+          background-color: var(--color-text-fff);
           &::after,
           &::before {
             background-color: rgb(var(--primary-5));
diff --git a/frontend/src/components/business/ms-user-group-comp/authTable.vue b/frontend/src/components/business/ms-user-group-comp/authTable.vue
index 06fca45a94..c0a0e82246 100644
--- a/frontend/src/components/business/ms-user-group-comp/authTable.vue
+++ b/frontend/src/components/business/ms-user-group-comp/authTable.vue
@@ -417,6 +417,10 @@
     @apply flex-1 overflow-hidden;
 
     padding: 0 16px 16px;
+    div,
+    span {
+      color: var(--color-text-1);
+    }
     :deep(.arco-table-container) {
       border-top: 1px solid var(--color-text-n8) !important;
       border-left: 1px solid var(--color-text-n8) !important;
@@ -436,7 +440,7 @@
     display: flex;
     justify-content: flex-end;
     padding: 24px;
-    background-color: #ffffff;
+    background-color: var(--color-text-fff);
     box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
     gap: 16px;
   }
diff --git a/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue b/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
index 00315d155f..25ffc8703f 100644
--- a/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
+++ b/frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col px-[16px] pb-[16px]">
-    <div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[16px]">
+    <div class="sticky top-0 z-[999] bg-[var(--color-text-fff)] pb-[8px] pt-[16px]">
       <a-input-search
         :placeholder="t('system.userGroup.searchHolder')"
         allow-clear
diff --git a/frontend/src/components/pure/flow-editor/index.vue b/frontend/src/components/pure/flow-editor/index.vue
deleted file mode 100644
index 708a086c17..0000000000
--- a/frontend/src/components/pure/flow-editor/index.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div id="app">
-    <form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option"></form-create>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { reactive, ref } from 'vue';
-
-  const value = ref({});
-  const fApi = ref({});
-  const rule = reactive([
-    {
-      type: 'input',
-      field: 'goods_name',
-      title: '商品名称',
-    },
-    {
-      type: 'datePicker',
-      field: 'created_at',
-      title: '创建时间',
-    },
-  ]);
-  const option = {
-    onSubmit(formData: any) {
-      // eslint-disable-next-line no-alert
-      alert(JSON.stringify(formData));
-    },
-  };
-</script>
diff --git a/frontend/src/components/pure/ms-back-button/index.vue b/frontend/src/components/pure/ms-back-button/index.vue
index 7cd749f2e6..1f4c0be61a 100644
--- a/frontend/src/components/pure/ms-back-button/index.vue
+++ b/frontend/src/components/pure/ms-back-button/index.vue
@@ -74,8 +74,9 @@
     height: 40px;
     border-radius: 6px;
     color: rgb(var(--primary-6));
+    background-color: var(--color-text-fff);
     box-shadow: 0 3px 14px 2px rgba(0 0 0/ 5%);
-    @apply flex cursor-pointer items-center justify-center bg-white font-medium;
+    @apply flex cursor-pointer items-center justify-center font-medium;
   }
   .back-button-top {
     transform: rotate(180deg);
diff --git a/frontend/src/components/pure/ms-card/index.vue b/frontend/src/components/pure/ms-card/index.vue
index ee3ed16d82..59fd56db94 100644
--- a/frontend/src/components/pure/ms-card/index.vue
+++ b/frontend/src/components/pure/ms-card/index.vue
@@ -15,7 +15,7 @@
       <a-scrollbar v-if="!props.simple" :style="{ overflow: 'auto' }">
         <div class="ms-card-header" :style="props.headerMinWidth ? { minWidth: `${props.headerMinWidth}px` } : {}">
           <slot name="headerLeft">
-            <div class="font-medium text-[var(--color-text-000)]">{{ props.title }}</div>
+            <div class="font-medium text-[var(--color-text-1)]">{{ props.title }}</div>
             <div class="text-[var(--color-text-4)]">{{ props.subTitle }}</div>
           </slot>
           <div class="ml-auto flex items-center">
@@ -202,9 +202,10 @@
 
 <style lang="less" scoped>
   .ms-card {
-    @apply relative overflow-hidden bg-white;
+    @apply relative overflow-hidden;
 
     border-radius: var(--border-radius-large);
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgb(120 56 135 / 5%);
     &--noContentPadding {
       border-radius: var(--border-radius-large);
@@ -240,18 +241,18 @@
       @apply relative;
     }
     .ms-card-footer {
-      @apply fixed flex justify-between bg-white;
+      @apply fixed flex justify-between;
 
       right: 16px;
       bottom: 0;
       z-index: 100;
       padding: 24px;
       border-bottom: 0;
+      background-color: var(--color-text-fff);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #00000000), var(--tw-ring-shadow, 0 0 #00000000), var(--tw-shadow);
 
       --tw-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
       --tw-shadow-colored: 0 -1px 4px var(--tw-shadow-color);
-
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #00000000), var(--tw-ring-shadow, 0 0 #00000000), var(--tw-shadow);
     }
   }
   .ms-card--fullScreen {
diff --git a/frontend/src/components/pure/ms-code-editor/index.vue b/frontend/src/components/pure/ms-code-editor/index.vue
index 7b9059690e..f52f4c4b41 100644
--- a/frontend/src/components/pure/ms-code-editor/index.vue
+++ b/frontend/src/components/pure/ms-code-editor/index.vue
@@ -72,6 +72,7 @@
   import { codeCharset } from '@/config/apiTest';
   import useFullScreen from '@/hooks/useFullScreen';
   import { useI18n } from '@/hooks/useI18n';
+  import useAppStore from '@/store/modules/app';
   import { decodeStringToCharset } from '@/utils';
 
   import './userWorker';
@@ -85,6 +86,7 @@
     props: editorProps,
     emits: ['update:modelValue', 'change'],
     setup(props, { emit, slots }) {
+      const appStore = useAppStore();
       const { t } = useI18n();
       // 编辑器实例，每次调用组件都会创建独立的实例
       let editor: monaco.editor.IStandaloneCodeEditor;
@@ -170,6 +172,17 @@
         }
       );
 
+      watch(
+        () => appStore.isDarkTheme,
+        (val) => {
+          if (val) {
+            editor.updateOptions({ theme: 'vs-dark' });
+          } else {
+            editor.updateOptions({ theme: currentTheme.value });
+          }
+        }
+      );
+
       const setEditBoxBg = () => {
         const codeBgEl = document.querySelector('.monaco-editor-background');
         if (codeBgEl) {
@@ -300,7 +313,7 @@
           contextmenu: !props.readOnly, // 只读模式下禁用右键菜单
           ...props,
           language: props.language.toLowerCase(),
-          theme: currentTheme.value,
+          theme: appStore.isDarkTheme ? 'vs-dark' : currentTheme.value,
           lineNumbersMinChars: 3,
           lineDecorationsWidth: 0,
           tabSize: 2,
diff --git a/frontend/src/components/pure/ms-description/index.vue b/frontend/src/components/pure/ms-description/index.vue
index 9d5becfeb9..c518a10649 100644
--- a/frontend/src/components/pure/ms-description/index.vue
+++ b/frontend/src/components/pure/ms-description/index.vue
@@ -116,7 +116,7 @@
             <template v-if="item.showCopy">
               <MsButton
                 v-if="item.copyTimer !== null && item.copyTimer !== undefined"
-                class="absolute bottom-0 right-0 bg-white pl-[16px] !text-[rgb(var(--success-6))]"
+                class="absolute bottom-0 right-0 bg-[var(--color-text-fff)] pl-[16px] !text-[rgb(var(--success-6))]"
                 type="text"
               >
                 <MsIcon type="icon-icon_succeed_filled" class="mr-[4px]"></MsIcon>
@@ -124,7 +124,7 @@
               </MsButton>
               <MsButton
                 v-else
-                class="absolute bottom-0 right-0 bg-white pl-[16px]"
+                class="absolute bottom-0 right-0 bg-[var(--color-text-fff)] pl-[16px]"
                 type="text"
                 @click="copyValue(item)"
               >
diff --git a/frontend/src/components/pure/ms-drawer/index.vue b/frontend/src/components/pure/ms-drawer/index.vue
index 137aaaecf6..119eadeb33 100644
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/frontend/src/components/pure/ms-drawer/index.vue
@@ -276,9 +276,8 @@
 
 <style lang="less">
   .arco-drawer {
-    @apply bg-white;
-
     max-width: 100vw;
+    background-color: var(--color-text-fff);
     .arco-drawer-header {
       display: flex;
       height: 56px;
@@ -314,6 +313,7 @@
       }
     }
     .arco-drawer-footer {
+      border-color: var(--color-text-n8);
       border-bottom: 1px solid var(--color-text-n8);
     }
   }
@@ -353,7 +353,7 @@
 
     z-index: 200;
     width: 8px;
-    background-color: var(--color-neutral-3);
+    background-color: var(--color-text-n8);
     cursor: col-resize;
   }
 </style>
diff --git a/frontend/src/components/pure/ms-editable-tab/index.vue b/frontend/src/components/pure/ms-editable-tab/index.vue
index 02e4123127..e875949e71 100644
--- a/frontend/src/components/pure/ms-editable-tab/index.vue
+++ b/frontend/src/components/pure/ms-editable-tab/index.vue
@@ -317,7 +317,7 @@
         &.active,
         &:hover {
           color: rgb(var(--primary-5));
-          background-color: rgb(var(--primary-1));
+          background-color: rgb(var(--primary-2));
           .ms-editable-tab-close-button {
             @apply visible;
           }
diff --git a/frontend/src/components/pure/ms-form-table/index.vue b/frontend/src/components/pure/ms-form-table/index.vue
index fddd0d1af3..b17a40a8b4 100644
--- a/frontend/src/components/pure/ms-form-table/index.vue
+++ b/frontend/src/components/pure/ms-form-table/index.vue
@@ -641,7 +641,7 @@
     }
     .arco-table-tr-checked {
       .arco-table-td {
-        background-color: white;
+        background-color: var(--color-text-fff);
       }
     }
     .arco-scrollbar-track-direction-horizontal {
@@ -700,7 +700,7 @@
   }
   :deep(.ms-table-row-disabled) {
     td {
-      background-color: white !important;
+      background-color: var(--color-text-fff) !important;
     }
     .arco-btn-icon {
       border-color: var(--color-text-n8);
diff --git a/frontend/src/components/pure/ms-minder-editor/main/header.vue b/frontend/src/components/pure/ms-minder-editor/main/header.vue
index b08cfa1636..e7b4a836b1 100644
--- a/frontend/src/components/pure/ms-minder-editor/main/header.vue
+++ b/frontend/src/components/pure/ms-minder-editor/main/header.vue
@@ -112,14 +112,15 @@
 
 <style lang="less">
   .ms-minder-editor-header {
-    @apply absolute z-10 flex items-center bg-white;
+    @apply absolute z-10 flex items-center;
 
     top: 16px;
     right: 4px;
-    gap: 8px;
     padding: 4px 8px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
+    gap: 8px;
     .ms-minder-editor-header-icon-button {
       @apply !mr-0;
       &:hover {
diff --git a/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue b/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue
index 9f075065a7..2c85a70d09 100644
--- a/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue
+++ b/frontend/src/components/pure/ms-minder-editor/main/mainEditor.vue
@@ -13,7 +13,7 @@
     </Navigator>
     <div
       v-if="currentTreePath?.length > 0"
-      class="absolute left-[50%] top-[16px] z-[9] w-[60%] translate-x-[-50%] overflow-hidden bg-white p-[8px]"
+      class="absolute left-[50%] top-[16px] z-[9] w-[60%] translate-x-[-50%] overflow-hidden bg-[var(--color-text-fff)] p-[8px]"
     >
       <a-menu v-model:selected-keys="selectedBreadcrumbKeys" mode="horizontal" class="ms-minder-breadcrumb">
         <a-menu-item v-for="(crumb, i) of currentTreePath" :key="crumb.id" @click="switchNode(crumb, i)">
@@ -52,6 +52,7 @@
   import Navigator from './navigator.vue';
 
   import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
+  import useAppStore from '@/store/modules/app';
   import useMinderStore from '@/store/modules/components/minder-editor';
   import { findNodePathByKey, mapTree, replaceNodeInTree } from '@/utils';
 
@@ -93,6 +94,7 @@
     (e: 'floatMenuClose'): void;
   }>();
 
+  const appStore = useAppStore();
   const minderStore = useMinderStore();
   const { setIsSave } = useLeaveUnSaveTip({
     leaveContent: 'ms.minders.leaveUnsavedTip',
@@ -126,12 +128,16 @@
     window.minder = window.km;
     window.minderEditor = editor;
     window.minder.moveEnable = props.moveEnable;
-
+    if (appStore.isDarkTheme) {
+      window.minder.setDefaultOptions({
+        defaultTheme: 'wire',
+      });
+      window.minder.refresh();
+    }
     window.minder.forceRemoveNode = () => {
       markDeleteNode(window.minder);
       window.minder.execCommand('RemoveNode');
     };
-
     emit('afterMount');
   }
 
@@ -310,6 +316,17 @@
     }
   );
 
+  watch(
+    () => appStore.isDarkTheme,
+    (val) => {
+      if (val) {
+        window.minder.useTheme('wire');
+      } else {
+        window.minder.useTheme('fresh-purple');
+      }
+    }
+  );
+
   onBeforeUnmount(() => {
     minderStore.setMinderUnsaved(false);
   });
@@ -322,7 +339,9 @@
     @apply !absolute;
   }
   .ms-minder-container {
-    @apply relative h-full overflow-hidden !bg-white;
+    @apply relative h-full overflow-hidden;
+
+    background-color: var(--color-text-fff) !important;
   }
   .ms-minder-dropdown {
     .arco-dropdown-list-wrapper {
@@ -330,9 +349,13 @@
     }
   }
   .ms-minder-breadcrumb {
-    @apply bg-white p-0;
+    @apply p-0;
+
+    background-color: var(--color-text-fff);
     .arco-menu-inner {
-      @apply bg-white p-0;
+      @apply p-0;
+
+      background-color: var(--color-text-fff);
       .arco-menu-item {
         @apply relative p-0;
 
@@ -356,14 +379,15 @@
       }
       .arco-menu-item,
       .arco-menu-overflow-sub-menu {
-        @apply ml-0 bg-white;
+        @apply ml-0;
 
         color: var(--color-text-4);
+        background-color: var(--color-text-fff);
       }
       .arco-menu-selected {
         color: rgb(var(--primary-4));
         &:hover {
-          @apply !bg-white;
+          background-color: var(--color-text-fff) !important;
         }
       }
       .arco-menu-pop::after,
diff --git a/frontend/src/components/pure/ms-minder-editor/main/navigator.vue b/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
index bfa5978276..d8c890ce20 100644
--- a/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
+++ b/frontend/src/components/pure/ms-minder-editor/main/navigator.vue
@@ -386,10 +386,11 @@
 <style lang="less">
   .ms-minder-shortcut-trigger {
     .arco-trigger-content {
-      @apply w-auto  bg-white;
+      @apply w-auto;
 
       padding: 16px;
       border-radius: var(--border-radius-small);
+      background-color: var(--color-text-fff);
       box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
       .ms-minder-shortcut-trigger-list {
         @apply grid grid-cols-2;
@@ -433,11 +434,12 @@
     left: 6px;
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
     .ms-minder-navigator-bar {
-      @apply flex w-auto items-center bg-white;
+      @apply flex w-auto items-center;
 
       padding: 4px 8px;
-      gap: 8px;
       border-radius: var(--border-radius-small);
+      background-color: var(--color-text-fff);
+      gap: 8px;
       .ms-minder-navigator-bar-icon-button {
         @apply !mr-0;
         &:hover {
@@ -458,7 +460,7 @@
       }
     }
     .ms-minder-navigator-previewer {
-      @apply absolute cursor-crosshair bg-white;
+      @apply absolute cursor-crosshair;
 
       bottom: 36px;
       left: 45px;
@@ -467,6 +469,7 @@
       width: 240px;
       height: 160px;
       border-radius: var(--border-radius-small);
+      background-color: var(--color-text-fff);
       box-shadow: 0 5px 5px -3px rgb(0 0 0 / 10%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 3px 14px 2px rgb(0 0 0 / 5%);
       transition: -webkit-transform 0.7s 0.1s ease;
       transition: transform 0.7s 0.1s ease;
@@ -474,7 +477,7 @@
         @apply cursor-grabbing;
       }
       :deep(svg) {
-        background-color: white !important;
+        background-color: var(--color-text-fff) !important;
       }
     }
   }
diff --git a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
index 37ed55a2e1..883152d76a 100644
--- a/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
+++ b/frontend/src/components/pure/ms-minder-editor/menu/nodeFloatMenu.vue
@@ -352,12 +352,13 @@
 <style lang="less">
   .ms-minder-node-float-menu {
     .arco-trigger-content {
-      @apply flex w-auto flex-1 items-center bg-white;
+      @apply flex w-auto flex-1 items-center;
 
       padding: 4px 8px;
-      gap: 8px;
       border-radius: var(--border-radius-small);
+      background-color: var(--color-text-fff);
       box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
+      gap: 8px;
     }
     .ms-minder-node-float-menu-icon-button {
       @apply !mr-0;
diff --git a/frontend/src/components/pure/ms-minder-editor/minderEditor.vue b/frontend/src/components/pure/ms-minder-editor/minderEditor.vue
index 25cf9136d6..ca5271415f 100644
--- a/frontend/src/components/pure/ms-minder-editor/minderEditor.vue
+++ b/frontend/src/components/pure/ms-minder-editor/minderEditor.vue
@@ -234,9 +234,10 @@
   .ms-minder-editor-container {
     @apply relative flex h-full w-full;
     .ms-minder-editor-extra {
-      @apply flex flex-col overflow-hidden  bg-white;
+      @apply flex flex-col overflow-hidden;
 
       width: 0;
+      background-color: var(--color-text-fff);
       transition: all 300ms ease-in-out;
       :deep(.ms-tab--button-item) {
         flex: 1;
diff --git a/frontend/src/components/pure/ms-minder-editor/script/editor.ts b/frontend/src/components/pure/ms-minder-editor/script/editor.ts
index ac5d881fda..6cbecae899 100644
--- a/frontend/src/components/pure/ms-minder-editor/script/editor.ts
+++ b/frontend/src/components/pure/ms-minder-editor/script/editor.ts
@@ -16,6 +16,7 @@ type EditMenuProps = {
   tagEnable: boolean;
   progressEnable: boolean;
   moveEnable: boolean;
+  [key: string]: any;
 };
 
 type Runtime = {
diff --git a/frontend/src/components/pure/ms-minder-editor/style/editor.less b/frontend/src/components/pure/ms-minder-editor/style/editor.less
index 450c2d58ae..31ecbda6e9 100644
--- a/frontend/src/components/pure/ms-minder-editor/style/editor.less
+++ b/frontend/src/components/pure/ms-minder-editor/style/editor.less
@@ -8,7 +8,7 @@
   @apply absolute bottom-0 left-0 right-0 top-0 block bg-transparent;
 }
 .km-editor > .receiver {
-  @apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none bg-white opacity-0 outline-none;
+  @apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none opacity-0 outline-none;
 
   z-index: -1000;
   margin-top: -5px;
@@ -17,6 +17,7 @@
   max-width: 300px;
   min-height: 1.4em;
   font-size: 14px;
+  background-color: var(--color-text-fff);
   box-shadow: 0 0 20px;
   line-height: 1.4em;
   &.debug {
@@ -25,9 +26,10 @@
     outline: 1px solid green;
   }
   &.input {
-    @apply bg-white opacity-100 outline-none;
+    @apply opacity-100 outline-none;
 
     z-index: 999;
+    background-color: var(--color-text-fff);
     pointer-events: all;
   }
 }
diff --git a/frontend/src/components/pure/ms-pagination/style.less b/frontend/src/components/pure/ms-pagination/style.less
index 362ea11358..11a7fb8a3d 100644
--- a/frontend/src/components/pure/ms-pagination/style.less
+++ b/frontend/src/components/pure/ms-pagination/style.less
@@ -67,7 +67,7 @@
     &-active {
       border-color: rgb(var(--primary-5)) !important;
       color: rgb(var(--primary-5)) !important;
-      background-color: rgb(var(--primary-1)) !important;
+      background-color: var(--color-text-fff) !important;
     }
   }
   &-simple {
diff --git a/frontend/src/components/pure/ms-rich-text/MsRichText.vue b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
index 3b5302383e..57e9788db6 100644
--- a/frontend/src/components/pure/ms-rich-text/MsRichText.vue
+++ b/frontend/src/components/pure/ms-rich-text/MsRichText.vue
@@ -609,6 +609,8 @@
         .ms-scroll-bar();
 
         justify-content: start !important;
+        border-color: var(--color-text-n8);
+        background-color: var(--color-text-fff);
       }
       > p:first-child {
         margin-top: 0;
@@ -633,6 +635,8 @@
   }
   :deep(.editor-content) {
     .ms-scroll-bar();
+
+    background: var(--color-text-fff);
     & + div[data-tippy-root] {
       transform: translate(60%) !important;
     }
@@ -645,7 +649,7 @@
     table {
       tr,
       th {
-        background: white !important;
+        background: var(--color-text-fff) !important;
       }
       tr {
         th,
diff --git a/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue b/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
index 0605f7afd8..1ed9e8cd5e 100644
--- a/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
+++ b/frontend/src/components/pure/ms-rich-text/extensions/mention/MentionList.vue
@@ -90,10 +90,9 @@
     max-height: 220px;
     border-radius: 4px;
     color: block;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 0 1px rgba(0 0 0 / 5%), 0 10px 20px rgba(0 0 0 / 10%);
     .ms-scroll-bar();
-
-    @apply bg-white;
   }
   .item {
     display: block;
diff --git a/frontend/src/components/pure/ms-separate-radio-button/index.vue b/frontend/src/components/pure/ms-separate-radio-button/index.vue
index c6237b3943..ae4fbd948c 100644
--- a/frontend/src/components/pure/ms-separate-radio-button/index.vue
+++ b/frontend/src/components/pure/ms-separate-radio-button/index.vue
@@ -26,7 +26,7 @@
     padding-left: 0;
   }
   .radio-item {
-    @apply flex cursor-pointer items-center bg-white;
+    @apply flex cursor-pointer items-center;
 
     padding-left: 8px;
     width: 186px;
@@ -34,6 +34,7 @@
     border: 1px solid;
     border-color: var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     &:hover {
       border-color: rgb(var(--primary-5));
     }
diff --git a/frontend/src/components/pure/ms-split-box/index.vue b/frontend/src/components/pure/ms-split-box/index.vue
index 51ba8a35f5..2dc16c9c0b 100644
--- a/frontend/src/components/pure/ms-split-box/index.vue
+++ b/frontend/src/components/pure/ms-split-box/index.vue
@@ -248,7 +248,9 @@
   }
   .ms-split-box--vertical {
     .ms-split-box--bottom {
-      @apply h-full bg-white;
+      @apply h-full;
+
+      background-color: var(--color-text-fff);
     }
     .vertical-expand-line {
       @apply relative flex items-center justify-center bg-transparent;
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index 13c6a746c5..3dc403516d 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -1064,6 +1064,35 @@
         }
       }
     }
+    :deep(.arco-table-header) {
+      background-color: var(--color-text-fff);
+      .arco-table-th {
+        background-color: var(--color-text-fff);
+      }
+    }
+    :deep(.arco-table-body) {
+      background-color: var(--color-text-fff);
+      .arco-table-td {
+        border-bottom: 1px solid var(--color-text-n8);
+        color: var(--color-text-1);
+        background-color: var(--color-text-fff);
+      }
+    }
+    :deep(.arco-table-border .arco-table-scroll-y) {
+      border-right: 1px solid var(--color-text-n8) !important;
+      border-bottom: 1px solid var(--color-text-n8) !important;
+    }
+    :deep(.arco-table-border .arco-table-tr .arco-table-th) {
+      border-bottom: 1px solid var(--color-text-n8) !important;
+    }
+    :deep(.arco-table-tr):hover {
+      background-color: rgb(var(--primary-1)) !important;
+      .arco-table-td,
+      .arco-table-td.arco-table-col-fixed-left::before,
+      .arco-table-td.arco-table-col-fixed-right::before {
+        background-color: rgb(var(--primary-1)) !important;
+      }
+    }
     :deep(.arco-table-th):hover {
       .arco-table-column-handle {
         @apply inline-block;
@@ -1073,7 +1102,7 @@
         padding: 4px 0;
         width: 2px;
         height: 24px;
-        background-color: var(--color-text-n8);
+        background-color: var(--color-text-n9);
         transform: translateY(-50%);
       }
     }
@@ -1107,7 +1136,7 @@
       top: 39px;
       z-index: 11;
       padding: 14px 16px;
-      background-color: var(--color-text-n9);
+      background-color: var(--color-text-fff);
     }
   }
   :deep(.arco-table-operation) {
@@ -1165,7 +1194,6 @@
     height: 16px;
     border-radius: 50%;
     background: var(--color-text-n8) !important;
-    @apply bg-white;
   }
   :deep(.expand) {
     width: 16px;
@@ -1184,7 +1212,7 @@
       height: 16px;
       border: none;
       border-radius: 50%;
-      background: white;
+      background: var(--color-text-fff);
     }
   }
   .not-expanded-border {
@@ -1203,14 +1231,14 @@
     }
   }
   :deep(.arco-table-col-sorted) {
-    @apply bg-white;
+    background: var(--color-text-fff);
   }
   :deep(.arco-table-cell-with-sorter) {
     @apply !p-0;
 
     margin: 8px 16px;
     &:hover {
-      @apply bg-white;
+      background: var(--color-text-fff);
     }
     .arco-table-sorter {
       .arco-table-sorter-icon {
@@ -1293,6 +1321,7 @@
     @apply overflow-hidden;
 
     max-width: 300px;
+    border-color: var(--color-text-n8);
     .arco-table-filters-content-list {
       @apply overflow-y-auto;
       .ms-scroll-bar();
diff --git a/frontend/src/components/pure/ms-table/comp/defaultFilter.vue b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue
index 8a687ff2bb..83a0fc24cd 100644
--- a/frontend/src/components/pure/ms-table/comp/defaultFilter.vue
+++ b/frontend/src/components/pure/ms-table/comp/defaultFilter.vue
@@ -191,4 +191,7 @@
     @apply overflow-y-auto;
     .ms-scroll-bar();
   }
+  .arco-table-filters-bottom {
+    border-color: var(--color-text-n8);
+  }
 </style>
diff --git a/frontend/src/components/pure/ms-tag/ms-tag.vue b/frontend/src/components/pure/ms-tag/ms-tag.vue
index 426e3f3632..a88cc4d0a6 100644
--- a/frontend/src/components/pure/ms-tag/ms-tag.vue
+++ b/frontend/src/components/pure/ms-tag/ms-tag.vue
@@ -15,7 +15,7 @@
   >
     <slot name="icon"></slot>
     <a-tooltip :disabled="props.tooltipDisabled">
-      <div :class="`one-line-text ${props.maxWidth || '144px'}`">
+      <div :class="`one-line-text max-w-[${props.maxWidth || '144px'}]`">
         <slot></slot>
       </div>
       <template v-if="$slots.tooltipContent" #content>
@@ -75,7 +75,7 @@
   // 计算标签的颜色和背景颜色
   const typeList: Record<string, any> = {
     dark: {
-      'color': 'white',
+      'color': 'var(--color-text-fff)',
       'border-color': 'rgb(var(--#{}-5))',
       'background': 'rgb(var(--#{}-5))',
     },
@@ -95,7 +95,7 @@
     },
     default: {
       'color': 'var(--color-text-1)',
-      'background': props.theme !== 'outline' ? 'var(--color-text-n8)' : 'white',
+      'background': props.theme !== 'outline' ? 'var(--color-text-n8)' : 'var(--color-text-fff)',
       'border-color':
         props.theme === 'lightOutLine' || props.theme === 'outline'
           ? 'var(--color-text-input-border)'
diff --git a/frontend/src/components/pure/ms-upload/fileList.vue b/frontend/src/components/pure/ms-upload/fileList.vue
index 29c5a5308e..cd9414dac4 100644
--- a/frontend/src/components/pure/ms-upload/fileList.vue
+++ b/frontend/src/components/pure/ms-upload/fileList.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="props.mode === 'remote' && props.showTab"
-      class="sticky top-[0] z-[9999] mb-[8px] flex justify-between bg-white"
+      class="sticky top-[0] z-[9999] mb-[8px] flex justify-between bg-[var(--color-text-fff)]"
     >
       <a-radio-group v-model:model-value="fileListTab" type="button" size="small">
         <a-radio value="all">{{ `${t('ms.upload.all')} (${innerFileList.length})` }}</a-radio>
diff --git a/frontend/src/components/pure/ms-upload/index.vue b/frontend/src/components/pure/ms-upload/index.vue
index c7ebf7380f..b8d85ca72e 100644
--- a/frontend/src/components/pure/ms-upload/index.vue
+++ b/frontend/src/components/pure/ms-upload/index.vue
@@ -253,12 +253,13 @@
 
     @apply flex flex-col items-center justify-center;
     .ms-upload-icon-box {
-      @apply rounded-full bg-white;
+      @apply rounded-full;
 
       margin-bottom: 16px;
       padding: 8px;
       width: 48px;
       height: 48px;
+      background-color: var(--color-text-fff);
       .ms-upload-icon {
         @apply h-full w-full bg-cover bg-no-repeat;
         &--default {
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index e502d3d7d2..e8a1de6fdd 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -146,6 +146,18 @@
           </template>
         </a-dropdown>
       </li>
+      <li>
+        <a-tooltip :content="t('settings.themeColor')" position="br">
+          <a-switch v-model:model-value="isSun" size="small" @change="handleSunChange">
+            <template #checked-icon>
+              <icon-sun-fill />
+            </template>
+            <template #unchecked-icon>
+              <icon-moon-fill />
+            </template>
+          </a-switch>
+        </a-tooltip>
+      </li>
       <li>
         <a-dropdown trigger="click" position="br" @select="changeLanguage as any">
           <a-tooltip :content="t('settings.language')" position="br">
@@ -194,6 +206,7 @@
   import useGlobalStore from '@/store/modules/global';
   import useUserStore from '@/store/modules/user';
   import { getFirstRouteNameByPermission, hasAnyPermission } from '@/utils/permission';
+  import { setDarkTheme, watchStyle, watchTheme } from '@/utils/theme';
 
   import { GlobalEventNameEnum } from '@/enums/commonEnum';
 
@@ -311,6 +324,29 @@
     messageCenterVisible.value = true;
   }
 
+  const isSun = ref(!appStore.isDarkTheme);
+
+  watch(
+    () => appStore.isDarkTheme,
+    (val) => {
+      if (val) {
+        // 暗黑模式
+        setDarkTheme();
+      } else {
+        // 初始化平台风格和主题色
+        watchStyle(appStore.pageConfig.style, appStore.pageConfig);
+        watchTheme(appStore.pageConfig.theme, appStore.pageConfig);
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function handleSunChange(val: string | number | boolean) {
+    appStore.setDarkTheme(!val);
+  }
+
   function changeLanguage(locale: LocaleType) {
     // 修改当前用户的语言
     updateLanguage({ language: locale });
diff --git a/frontend/src/locale/en-US/settings.ts b/frontend/src/locale/en-US/settings.ts
index 09f0ce439b..1db5c30433 100644
--- a/frontend/src/locale/en-US/settings.ts
+++ b/frontend/src/locale/en-US/settings.ts
@@ -1,6 +1,6 @@
 export default {
   'settings.title': 'Settings',
-  'settings.themeColor': 'Theme Color',
+  'settings.themeColor': 'Switch between light/dark mode',
   'settings.content': 'Content Setting',
   'settings.search': 'Search',
   'settings.language': 'Language',
diff --git a/frontend/src/locale/zh-CN/settings.ts b/frontend/src/locale/zh-CN/settings.ts
index de5ab63a91..83b8bd416b 100644
--- a/frontend/src/locale/zh-CN/settings.ts
+++ b/frontend/src/locale/zh-CN/settings.ts
@@ -1,6 +1,6 @@
 export default {
   'settings.title': '页面配置',
-  'settings.themeColor': '主题色',
+  'settings.themeColor': '切换亮色/暗色模式',
   'settings.content': '内容区域',
   'settings.search': '搜索',
   'settings.language': '语言',
diff --git a/frontend/src/store/modules/app/index.ts b/frontend/src/store/modules/app/index.ts
index 70b3e896e5..8f00587fab 100644
--- a/frontend/src/store/modules/app/index.ts
+++ b/frontend/src/store/modules/app/index.ts
@@ -72,6 +72,7 @@ const useAppStore = defineStore('app', {
     envList: [],
     currentEnvConfig: undefined,
     fileMaxSize: 50,
+    isDarkTheme: false,
   }),
 
   getters: {
@@ -422,9 +423,12 @@ const useAppStore = defineStore('app', {
     setFileMaxSize(size: number) {
       this.fileMaxSize = size;
     },
+    setDarkTheme(isDarkTheme: boolean) {
+      this.isDarkTheme = isDarkTheme;
+    },
   },
   persist: {
-    paths: ['currentOrgId', 'currentProjectId', 'pageConfig', 'menuCollapse'],
+    paths: ['currentOrgId', 'currentProjectId', 'pageConfig', 'menuCollapse', 'isDarkTheme'],
   },
 });
 
diff --git a/frontend/src/store/modules/app/types.ts b/frontend/src/store/modules/app/types.ts
index 5ff4883b66..e480bc3638 100644
--- a/frontend/src/store/modules/app/types.ts
+++ b/frontend/src/store/modules/app/types.ts
@@ -46,6 +46,7 @@ export interface AppState {
   envList: EnvironmentItem[];
   currentEnvConfig?: EnvConfig; // 当前环境配置信息
   fileMaxSize: number; // 文件上传最大限制
+  isDarkTheme: boolean; // 是否暗黑模式
 }
 
 export interface UploadFileTaskState {
diff --git a/frontend/src/utils/theme.ts b/frontend/src/utils/theme.ts
index 4e08c6f693..6749f955c6 100644
--- a/frontend/src/utils/theme.ts
+++ b/frontend/src/utils/theme.ts
@@ -133,7 +133,10 @@ export function watchTheme(val: Theme, pageConfig: PageConfig) {
   }
 }
 
-// 动态设置 favicon
+/**
+ * 动态设置 favicon
+ * @param url favicon 地址
+ */
 export function setFavicon(url: string) {
   const head = document.querySelector('head');
   const link = document.createElement('link');
@@ -150,3 +153,149 @@ export function setFavicon(url: string) {
   // 添加新的 favicon
   head?.appendChild(link);
 }
+
+/**
+ * 设置暗黑主题
+ */
+export function setDarkTheme() {
+  const styleTag = document.createElement('style');
+  styleTag.id = 'MS-CUSTOM-THEME';
+  let styleStr = ``;
+  const white = Color('#fff');
+  const N1 = Color('#e3e6f3');
+  const N7 = Color('#5b5e6a');
+  const N8 = Color('#434552');
+  const N9 = Color('#2e313d');
+  const N10 = Color('#242633');
+  // 中性色
+  styleStr += `
+    --color-text-1: ${N1.hex()};
+    --color-text-2: #c0c2cf;
+    --color-text-3: #adb0bc;
+    --color-text-4: #9597a4;
+    --color-white: #90929f;
+    --color-text-brand: #787b88;
+    --color-text-input: ${N7.hex()};
+    --color-text-input-border: ${N7.hex()};
+    --color-text-n8: ${N8.hex()};
+    --color-text-n9: ${N9.hex()};
+    --color-text-fff: ${N10.hex()};
+    --color-text-000: #000;
+    --gray-3: ${N8.toString().replace(/rgba?\(|\)/g, '')};
+  `;
+  // 主题色
+  const primary = new Color('#cd3bff');
+  const P = primary.toString().replace(/rgba?\(|\)/g, '');
+  const P1 = getRGBinnerVal(primary.mix(white, 0.25));
+  const P4 = getRGBinnerVal(primary.mix(N10, 0.55));
+  const P5 = getRGBinnerVal(primary.mix(N10, 0.85));
+  const P6 = getRGBinnerVal(primary.mix(N10, 0.75));
+  const P7 = getRGBinnerVal(primary.mix(N10, 0.65));
+  const P0 = getRGBinnerVal(primary.mix(N10, 0.25));
+  styleStr += `
+    --primary-1: ${P7};
+    --primary-2: ${P5};
+    --primary-3: ${P4};
+    --primary-4: ${P1};
+    --primary-5: ${P};
+    --primary-6: ${P};
+    --primary-7: ${P0};
+    --primary-9: ${P6};
+  `;
+  // 红色
+  const red = new Color('#e2324f');
+  const Red = red.toString().replace(/rgba?\(|\)/g, '');
+  const R1 = getRGBinnerVal(red.mix(white, 0.25));
+  const R2 = getRGBinnerVal(red.mix(N10, 0.3));
+  const R3 = getRGBinnerVal(red.mix(N10, 0.55));
+  const R4 = getRGBinnerVal(red.mix(N10, 0.75));
+  const R5 = getRGBinnerVal(red.mix(N10, 0.65));
+  const R0 = getRGBinnerVal(red.mix(N10, 0.25));
+  styleStr += `
+    --danger-1: ${R5};
+    --danger-2: ${R4};
+    --danger-3: ${R3};
+    --danger-4: ${R2};
+    --danger-5: ${R1};
+    --danger-6: ${Red};
+    --danger-7: ${R0};
+  `;
+  // 绿色
+  const green = new Color('#11b671');
+  const Green = green.toString().replace(/rgba?\(|\)/g, '');
+  const G1 = getRGBinnerVal(green.mix(white, 0.25));
+  const G2 = getRGBinnerVal(green.mix(N10, 0.3));
+  const G3 = getRGBinnerVal(green.mix(N10, 0.55));
+  const G4 = getRGBinnerVal(green.mix(N10, 0.75));
+  const G5 = getRGBinnerVal(green.mix(N10, 0.65));
+  const G0 = getRGBinnerVal(green.mix(N10, 0.25));
+  styleStr += `
+    --success-1: ${G5};
+    --success-2: ${G4};
+    --success-3: ${G3};
+    --success-4: ${G2};
+    --success-5: ${G1};
+    --success-6: ${Green};
+    --success-7: ${G0};
+  `;
+  // 蓝色
+  const blue = new Color('#3d8eff');
+  const Blue = blue.toString().replace(/rgba?\(|\)/g, '');
+  const B1 = getRGBinnerVal(blue.mix(white, 0.25));
+  const B2 = getRGBinnerVal(blue.mix(N10, 0.3));
+  const B3 = getRGBinnerVal(blue.mix(N10, 0.55));
+  const B4 = getRGBinnerVal(blue.mix(N10, 0.75));
+  const B5 = getRGBinnerVal(blue.mix(N10, 0.65));
+  const B0 = getRGBinnerVal(blue.mix(N10, 0.25));
+  styleStr += `
+    --link-1: ${B5};
+    --link-2: ${B4};
+    --link-3: ${B3};
+    --link-4: ${B2};
+    --link-5: ${B1};
+    --link-6: ${Blue};
+    --link-7: ${B0};
+  `;
+  // 黄色
+  const yellow = new Color('#edac2c');
+  const Yellow = yellow.toString().replace(/rgba?\(|\)/g, '');
+  const Y1 = getRGBinnerVal(yellow.mix(white, 0.25));
+  const Y2 = getRGBinnerVal(yellow.mix(N10, 0.3));
+  const Y3 = getRGBinnerVal(yellow.mix(N10, 0.55));
+  const Y4 = getRGBinnerVal(yellow.mix(N10, 0.75));
+  const Y5 = getRGBinnerVal(yellow.mix(N10, 0.65));
+  const Y0 = getRGBinnerVal(yellow.mix(N10, 0.25));
+  styleStr += `
+    --waring-1: ${Y5};
+    --waring-2: ${Y4};
+    --waring-3: ${Y3};
+    --waring-4: ${Y2};
+    --waring-5: ${Y1};
+    --waring-6: ${Yellow};
+    --waring-7: ${Y0};
+  `;
+  // 背景色
+  styleStr += `
+    --color-fill-1: ${N9.hex()};
+    --color-fill-2: ${N9.hex()};
+    --color-bg-white: ${N10.hex()};
+    --color-bg-1: ${N10.hex()};
+    --color-bg-2: ${N10.hex()};
+    --color-bg-3: ${N9.hex()};
+    --color-bg-5: ${N9.hex()};
+    --color-tooltip-bg: ${N1.hex()};
+    --color-spin-layer-bg: ${N9.rgb().fade(0.25).toString()};
+    --color-warning-light-1: rgb(${Y5})
+  `;
+  styleTag.innerHTML = `
+    body{
+      ${styleStr}
+    }
+  `;
+  // 移除之前的 style 标签（如果有）
+  const prevStyleTag = document.getElementById('MS-CUSTOM-THEME');
+  if (prevStyleTag) {
+    prevStyleTag.remove();
+  }
+  document.body.appendChild(styleTag);
+}
diff --git a/frontend/src/views/api-test/components/apiMethodName.vue b/frontend/src/views/api-test/components/apiMethodName.vue
index 5ed7fe0347..295aba95ed 100644
--- a/frontend/src/views/api-test/components/apiMethodName.vue
+++ b/frontend/src/views/api-test/components/apiMethodName.vue
@@ -5,7 +5,7 @@
       :self-style="{
         border: `1px solid ${props.tagBackgroundColor || methodColor}`,
         color: props.tagTextColor || methodColor,
-        backgroundColor: props.tagBackgroundColor || 'white',
+        backgroundColor: props.tagBackgroundColor || 'var(--color-text-fff)',
         display: 'flex',
       }"
       :size="props.tagSize"
diff --git a/frontend/src/views/api-test/components/condition/list.vue b/frontend/src/views/api-test/components/condition/list.vue
index 71fedbc7ac..e8df099e94 100644
--- a/frontend/src/views/api-test/components/condition/list.vue
+++ b/frontend/src/views/api-test/components/condition/list.vue
@@ -8,7 +8,7 @@
     :disabled="props.disabled"
     :item-border="false"
     class="h-full overflow-hidden rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]"
-    item-class="mb-[4px] bg-white !p-[4px_8px]"
+    item-class="mb-[4px] bg-[var(--color-text-fff)] !p-[4px_8px]"
     :item-more-actions="moreActions"
     active-item-class="!bg-[rgb(var(--primary-1))] text-[rgb(var(--primary-5))]"
     draggable
@@ -20,7 +20,7 @@
       <div class="flex items-center gap-[4px]">
         <div
           :class="`flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full ${
-            activeItem.id === item.id ? ' bg-white' : 'bg-[var(--color-text-n8)]'
+            activeItem.id === item.id ? ' bg-[var(--color-text-fff)]' : 'bg-[var(--color-text-n8)]'
           }`"
         >
           {{ index + 1 }}
@@ -237,7 +237,7 @@
   :deep(.arco-badge-text) {
     font-size: 12px;
     color: var(--color-text-4) !important;
-    background: white !important;
+    background: var(--color-text-fff) !important;
     box-shadow: 0 0 0 1px var(--color-text-n8);
   }
 </style>
diff --git a/frontend/src/views/api-test/components/fastExtraction/index.vue b/frontend/src/views/api-test/components/fastExtraction/index.vue
index 21097fbf03..e7551a884e 100644
--- a/frontend/src/views/api-test/components/fastExtraction/index.vue
+++ b/frontend/src/views/api-test/components/fastExtraction/index.vue
@@ -21,10 +21,20 @@
       />
     </div>
     <div v-else-if="expressionForm.extractType === RequestExtractExpressionEnum.JSON_PATH" class="code-container">
-      <MsJsonPathPicker :data="props.response || ''" class="bg-white" @init="initJsonPath" @pick="handlePathPick" />
+      <MsJsonPathPicker
+        :data="props.response || ''"
+        class="bg-[var(--color-text-fff)]"
+        @init="initJsonPath"
+        @pick="handlePathPick"
+      />
     </div>
     <div v-else-if="expressionForm.extractType === RequestExtractExpressionEnum.X_PATH" class="code-container">
-      <MsXPathPicker :xml-string="props.response || ''" class="bg-white" @init="initXpath" @pick="handlePathPick" />
+      <MsXPathPicker
+        :xml-string="props.response || ''"
+        class="bg-[var(--color-text-fff)]"
+        @init="initXpath"
+        @pick="handlePathPick"
+      />
     </div>
     <a-form ref="expressionFormRef" :model="expressionForm" layout="vertical" class="mt-[16px]">
       <a-form-item
@@ -379,7 +389,7 @@
     background-color: var(--color-text-n9);
   }
   .match-result {
-    @apply overflow-y-auto bg-white;
+    @apply overflow-y-auto;
     .ms-scroll-bar();
 
     margin-top: 12px;
@@ -388,5 +398,6 @@
     max-height: 300px;
     border-radius: var(--border-radius-small);
     color: rgb(var(--primary-5));
+    background-color: var(--color-text-fff);
   }
 </style>
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index c6032e020b..ac1f2d8d77 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -1241,10 +1241,9 @@
 
 <style lang="less" scoped>
   .content-type-trigger-content {
-    @apply bg-white;
-
     padding: 8px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
   }
   :deep(.ms-form-table-input-number) {
diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index eec07b0a5c..d900e79179 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@@ -1787,19 +1787,21 @@
     .ms-scroll-bar();
   }
   .sticky-content {
-    @apply sticky bg-white;
+    @apply sticky;
 
     z-index: 101; // .arco-scrollbar-track是100
+    background-color: var(--color-text-fff);
   }
   .request-content-and-response {
     display: flex;
     &.vertical {
       flex-direction: column;
       .response :deep(.response-head) {
-        @apply sticky bg-white;
+        @apply sticky;
 
         top: 46px; // 请求参数tab高度(不算border-bottom)
         z-index: 11;
+        background-color: var(--color-text-fff);
       }
       .request-tab-pane {
         min-height: 400px;
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
index 9a397c1ac0..e9989ca96c 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/index.vue
@@ -3,7 +3,7 @@
     <div class="response-header">
       <div
         v-if="isShowLoopControl"
-        class="flex w-full items-center justify-start bg-white pb-[8px] pt-[16px]"
+        class="flex w-full items-center justify-start bg-[var(--color-text-fff)] pb-[8px] pt-[16px]"
         @click.stop="() => {}"
       >
         <MsTab
@@ -90,7 +90,7 @@
           </a-popover>
         </div>
       </div>
-      <div v-if="activeType === 'SubRequest'" class="flex justify-start bg-white py-4">
+      <div v-if="activeType === 'SubRequest'" class="flex justify-start bg-[var(--color-text-fff)] py-4">
         <MsPagination
           v-model:page-size="pageSize"
           v-model:current="current"
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/resValueScript.vue b/frontend/src/views/api-test/components/requestComposition/response/result/resValueScript.vue
index ebec280978..5f30d9e6ca 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/resValueScript.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/resValueScript.vue
@@ -38,10 +38,11 @@
 
 <style lang="less" scoped>
   .response-header-pre {
-    @apply h-full overflow-auto bg-white;
+    @apply h-full overflow-auto;
     .ms-scroll-bar();
 
     padding: 8px 12px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
   }
 </style>
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue b/frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue
index e3e2a7d70e..aedc2bff6f 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/tiledDisplay.vue
@@ -160,7 +160,9 @@
     border: 1px solid var(--color-text-n8);
     border-top: none;
     border-radius: 0 0 6px 6px;
-    @apply mb-4 bg-white p-4;
+    @apply mb-4  p-4;
+
+    background-color: var(--color-text-fff);
     .resContent {
       height: 38px;
       border-radius: 6px;
@@ -174,7 +176,7 @@
         z-index: 999999;
         height: 40px;
         line-height: 40px;
-        background: white;
+        background: var(--color-text-fff);
         @apply flex items-start justify-between px-4;
         .menu-title {
           @apply font-medium;
diff --git a/frontend/src/views/api-test/management/components/import.vue b/frontend/src/views/api-test/management/components/import.vue
index 7971157e64..7ed951835f 100644
--- a/frontend/src/views/api-test/management/components/import.vue
+++ b/frontend/src/views/api-test/management/components/import.vue
@@ -576,12 +576,13 @@
 
 <style lang="less" scoped>
   .import-item {
-    @apply flex cursor-pointer items-center bg-white;
+    @apply flex cursor-pointer items-center;
 
     padding: 8px;
     width: 200px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     gap: 6px;
   }
   .import-item--active {
diff --git a/frontend/src/views/api-test/management/components/management/api/apiExportModal.vue b/frontend/src/views/api-test/management/components/management/api/apiExportModal.vue
index a96239aea8..29470061ee 100644
--- a/frontend/src/views/api-test/management/components/management/api/apiExportModal.vue
+++ b/frontend/src/views/api-test/management/components/management/api/apiExportModal.vue
@@ -243,12 +243,13 @@
 
 <style scoped lang="less">
   .import-item {
-    @apply flex cursor-pointer items-center bg-white;
+    @apply flex cursor-pointer items-center;
 
     padding: 8px;
     width: 150px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     gap: 6px;
   }
   .import-item--active {
diff --git a/frontend/src/views/api-test/management/components/management/api/apiSharePreview.vue b/frontend/src/views/api-test/management/components/management/api/apiSharePreview.vue
index 1ffbc9dd79..f7febd9e35 100644
--- a/frontend/src/views/api-test/management/components/management/api/apiSharePreview.vue
+++ b/frontend/src/views/api-test/management/components/management/api/apiSharePreview.vue
@@ -239,7 +239,9 @@
     z-index: 99;
     padding: 16px;
 
-    @apply flex w-full items-center justify-between bg-white;
+    @apply flex w-full items-center justify-between;
+
+    background-color: var(--color-text-fff);
     .doc-toggle {
       max-width: 50%;
       @apply flex flex-1 items-center gap-2;
diff --git a/frontend/src/views/api-test/management/components/management/api/shareButton.vue b/frontend/src/views/api-test/management/components/management/api/shareButton.vue
index 9c350e4538..bf031d8d0b 100644
--- a/frontend/src/views/api-test/management/components/management/api/shareButton.vue
+++ b/frontend/src/views/api-test/management/components/management/api/shareButton.vue
@@ -179,8 +179,9 @@
     width: 154px;
     max-height: 300px;
     border-radius: var(--border-radius-medium);
+    background-color: var(--color-text-fff);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
-    @apply overflow-y-auto bg-white;
+    @apply overflow-y-auto;
     .ms-scroll-bar();
   }
   .share-option-title {
diff --git a/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue b/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
index 88b9d90758..f508a8c0de 100644
--- a/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
+++ b/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
@@ -21,7 +21,7 @@
               :self-style="{
                 border: `1px solid ${color}`,
                 color: color,
-                backgroundColor: 'white',
+                backgroundColor: 'var(--color-text-fff)',
               }"
             >
               {{ record.testPlanNum }}
diff --git a/frontend/src/views/api-test/management/index.vue b/frontend/src/views/api-test/management/index.vue
index 3f394d8510..4946bed06b 100644
--- a/frontend/src/views/api-test/management/index.vue
+++ b/frontend/src/views/api-test/management/index.vue
@@ -264,12 +264,16 @@
     }
   }
   .recycle {
-    @apply absolute bottom-0 bg-white pb-4;
+    @apply absolute bottom-0 pb-4;
+
+    background-color: var(--color-text-fff);
     :deep(.arco-divider-horizontal) {
       margin: 8px 0;
     }
     .recycle-bin {
-      @apply bottom-0 flex items-center bg-white;
+      @apply bottom-0 flex items-center;
+
+      background-color: var(--color-text-fff);
       .recycle-count {
         margin-left: 4px;
         color: var(--color-text-4);
diff --git a/frontend/src/views/api-test/report/component/caseReportCom.vue b/frontend/src/views/api-test/report/component/caseReportCom.vue
index 78ae397a72..5ce37e1e2a 100644
--- a/frontend/src/views/api-test/report/component/caseReportCom.vue
+++ b/frontend/src/views/api-test/report/component/caseReportCom.vue
@@ -436,14 +436,17 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
-      @apply mb-4 bg-white;
+      background: var(--color-text-fff);
+      @apply mb-4;
+
+      background-color: var(--color-text-fff);
     }
     .analyze {
-      @apply mb-4  bg-white;
+      @apply mb-4;
 
       padding: 16px;
       border-radius: 4px;
+      background-color: var(--color-text-fff);
       .request-analyze {
         @apply flex h-full flex-1 flex-col;
         .chart-legend {
@@ -501,7 +504,7 @@
     .report-info {
       padding: 16px;
       border-radius: 4px;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
     }
   }
   .block-title {
diff --git a/frontend/src/views/api-test/report/component/caseReportDrawer.vue b/frontend/src/views/api-test/report/component/caseReportDrawer.vue
index 538d7563a0..07fe3ca640 100644
--- a/frontend/src/views/api-test/report/component/caseReportDrawer.vue
+++ b/frontend/src/views/api-test/report/component/caseReportDrawer.vue
@@ -210,13 +210,17 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
-      @apply mb-4 bg-white;
+      background: var(--color-text-fff);
+      @apply mb-4;
+
+      background-color: var(--color-text-fff);
     }
     .analyze {
       height: 196px;
       border-radius: 4px;
-      @apply mb-4 flex justify-between  bg-white;
+      @apply mb-4 flex justify-between;
+
+      background-color: var(--color-text-fff);
       .request-analyze {
         @apply flex h-full flex-1 flex-col p-4;
         .chart-legend {
@@ -266,7 +270,7 @@
     .report-info {
       padding: 16px;
       border-radius: 4px;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
     }
   }
   .block-title {
diff --git a/frontend/src/views/api-test/report/component/reportDetailDrawer.vue b/frontend/src/views/api-test/report/component/reportDetailDrawer.vue
index ae1a4f563b..42840a1013 100644
--- a/frontend/src/views/api-test/report/component/reportDetailDrawer.vue
+++ b/frontend/src/views/api-test/report/component/reportDetailDrawer.vue
@@ -205,8 +205,10 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
-      @apply mb-4 bg-white;
+      background: var(--color-text-fff);
+      @apply mb-4;
+
+      background-color: var(--color-text-fff);
     }
     .analyze {
       height: 196px;
@@ -217,7 +219,9 @@
         width: 60%;
         height: 196px;
         border-radius: 4px;
-        @apply h-full bg-white;
+        @apply h-full;
+
+        background-color: var(--color-text-fff);
         .countItem {
           @apply mr-6 flex items-center;
         }
@@ -235,7 +239,9 @@
         width: 40%;
         height: 100%;
         border-radius: 4px;
-        @apply ml-4 h-full flex-grow bg-white;
+        @apply ml-4 h-full flex-grow;
+
+        background-color: var(--color-text-fff);
         .chart-legend {
           .chart-legend-item {
             @apply grid grid-cols-3;
@@ -252,7 +258,7 @@
     .report-info {
       padding: 16px;
       border-radius: 4px;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
     }
   }
   .block-title {
diff --git a/frontend/src/views/api-test/report/component/reportStatus.vue b/frontend/src/views/api-test/report/component/reportStatus.vue
index 9aef318f84..1a8a0cbe2d 100644
--- a/frontend/src/views/api-test/report/component/reportStatus.vue
+++ b/frontend/src/views/api-test/report/component/reportStatus.vue
@@ -9,7 +9,7 @@
         :self-style="{
           border: `1px solid ${methodColor}`,
           color: methodColor,
-          backgroundColor: 'white',
+          backgroundColor: 'var(--color-text-fff)',
         }"
       >
         {{ t('report.detail.script.error') }}
diff --git a/frontend/src/views/api-test/report/component/scenarioCom.vue b/frontend/src/views/api-test/report/component/scenarioCom.vue
index 40b55cd98a..81d39ec5bb 100644
--- a/frontend/src/views/api-test/report/component/scenarioCom.vue
+++ b/frontend/src/views/api-test/report/component/scenarioCom.vue
@@ -353,8 +353,10 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
-      @apply mb-4 bg-white;
+      background: var(--color-text-fff);
+      @apply mb-4;
+
+      background-color: var(--color-text-fff);
     }
     .analyze {
       height: 196px;
@@ -364,7 +366,9 @@
         padding: 16px;
         width: 33%;
         border-radius: 4px;
-        @apply h-full bg-white;
+        @apply h-full;
+
+        background-color: var(--color-text-fff);
       }
       .request-analyze {
         @apply ml-4 flex-grow;
@@ -384,7 +388,7 @@
     .report-info {
       padding: 16px;
       border-radius: 4px;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
     }
   }
   .block-title {
diff --git a/frontend/src/views/api-test/report/component/step/readOnlyTree.vue b/frontend/src/views/api-test/report/component/step/readOnlyTree.vue
index 8decceba06..561544493d 100644
--- a/frontend/src/views/api-test/report/component/step/readOnlyTree.vue
+++ b/frontend/src/views/api-test/report/component/step/readOnlyTree.vue
@@ -216,17 +216,18 @@
       margin-top: 4px;
     }
     &:hover {
-      background-color: white !important;
+      background-color: var(--color-text-fff) !important;
       .arco-tree-node-title {
-        background-color: white !important;
+        background-color: var(--color-text-fff) !important;
       }
     }
     .arco-tree-node-title {
-      @apply !cursor-pointer bg-white;
+      @apply !cursor-pointer;
 
       padding: 8px 4px;
+      background-color: var(--color-text-fff);
       &:hover {
-        background-color: white !important;
+        background-color: var(--color-text-fff) !important;
       }
       .step-node-content {
         @apply flex w-full flex-1 items-center;
@@ -281,7 +282,7 @@
     }
     .ms-tree-node-extra {
       gap: 4px;
-      background-color: white !important;
+      background-color: var(--color-text-fff) !important;
     }
   }
   :deep(.arco-tree-node-selected) {
@@ -293,9 +294,9 @@
     }
   }
   :deep(.step-tree-node-focus) {
-    background-color: white !important;
+    background-color: var(--color-text-fff) !important;
     .arco-tree-node-title {
-      background-color: white;
+      background-color: var(--color-text-fff);
     }
   }
   :deep(.expand) {
@@ -309,7 +310,7 @@
     height: 16px;
     border-radius: 50%;
     background: var(--color-text-n8) !important;
-    @apply bg-white;
+    background-color: var(--color-text-fff);
   }
   :deep(.arco-table-expand-btn) {
     width: 16px;
@@ -320,17 +321,19 @@
   }
   .resContentWrapper {
     border-radius: 0 0 6px 6px;
-    @apply mb-4 bg-white p-4;
+    @apply mb-4 p-4;
+
+    background-color: var(--color-text-fff);
     .resContent {
       height: 38px;
       border-radius: 6px;
     }
   }
   :deep(.ms-tree-container .ms-tree .arco-tree-node .arco-tree-node-title) {
-    background: white;
+    background: var(--color-text-fff);
   }
   :deep(.ms-tree-container .ms-tree .arco-tree-node-selected) {
-    background: white;
+    background: var(--color-text-fff);
   }
   .line {
     position: absolute;
diff --git a/frontend/src/views/api-test/report/component/step/stepTree.vue b/frontend/src/views/api-test/report/component/step/stepTree.vue
index 372aaa4185..6f383fecc1 100644
--- a/frontend/src/views/api-test/report/component/step/stepTree.vue
+++ b/frontend/src/views/api-test/report/component/step/stepTree.vue
@@ -371,17 +371,18 @@
       margin-top: 4px;
     }
     &:hover {
-      background-color: white !important;
+      background-color: var(--color-text-fff) !important;
       .arco-tree-node-title {
-        background-color: white !important;
+        background-color: var(--color-text-fff) !important;
       }
     }
     .arco-tree-node-title {
-      @apply !cursor-pointer bg-white;
+      @apply !cursor-pointer;
 
       padding: 8px 4px;
+      background-color: var(--color-text-fff);
       &:hover {
-        background-color: white !important;
+        background-color: var(--color-text-fff) !important;
       }
       .step-node-content {
         width: calc(100% - 16px);
@@ -461,7 +462,7 @@
     height: 16px;
     border-radius: 50%;
     background: var(--color-text-n8) !important;
-    @apply bg-white;
+    background-color: var(--color-text-fff);
   }
   :deep(.arco-table-expand-btn) {
     width: 16px;
@@ -472,7 +473,9 @@
   }
   .resContentWrapper {
     border-radius: 0 0 6px 6px;
-    @apply mb-4 bg-white p-4;
+    @apply mb-4 p-4;
+
+    background-color: var(--color-text-fff);
     .resContent {
       height: 38px;
       border-radius: 6px;
diff --git a/frontend/src/views/api-test/report/exportCasePDF.vue b/frontend/src/views/api-test/report/exportCasePDF.vue
index 788fbd1f44..999a36e8e4 100644
--- a/frontend/src/views/api-test/report/exportCasePDF.vue
+++ b/frontend/src/views/api-test/report/exportCasePDF.vue
@@ -5,7 +5,7 @@
     class="report-detail-container"
   >
     <div id="report-detail" class="report-detail">
-      <div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-white p-[16px]">
+      <div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[16px]">
         {{ reportStepDetail?.name }}
       </div>
       <CaseReportCom :detail-info="reportStepDetail" is-export />
diff --git a/frontend/src/views/api-test/report/exportScenarioPDF.vue b/frontend/src/views/api-test/report/exportScenarioPDF.vue
index 008c6d7edc..8e77983e5e 100644
--- a/frontend/src/views/api-test/report/exportScenarioPDF.vue
+++ b/frontend/src/views/api-test/report/exportScenarioPDF.vue
@@ -5,7 +5,7 @@
     class="report-detail-container"
   >
     <div id="report-detail" class="report-detail">
-      <div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-white p-[16px]">
+      <div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[16px]">
         {{ reportStepDetail?.name }}
       </div>
       <ScenarioCom :detail-info="reportStepDetail" is-export />
diff --git a/frontend/src/views/api-test/report/shareCaseIndex.vue b/frontend/src/views/api-test/report/shareCaseIndex.vue
index 900150aa61..32d3680217 100644
--- a/frontend/src/views/api-test/report/shareCaseIndex.vue
+++ b/frontend/src/views/api-test/report/shareCaseIndex.vue
@@ -61,14 +61,18 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
-      @apply mb-4 bg-white;
+      background: var(--color-text-fff);
+      @apply mb-4;
+
+      background-color: var(--color-text-fff);
     }
     .analyze {
       min-height: 196px;
       max-height: 200px;
       border-radius: 4px;
-      @apply mb-2 flex justify-between  bg-white;
+      @apply mb-2 flex justify-between;
+
+      background-color: var(--color-text-fff);
       .request-analyze {
         @apply flex flex-1 flex-col p-4;
         .chart-legend {
@@ -118,7 +122,7 @@
     .report-info {
       padding: 16px;
       border-radius: 4px;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
     }
   }
   .block-title {
diff --git a/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue b/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
index b437f91735..c8502f0c5d 100644
--- a/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
+++ b/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
@@ -325,7 +325,7 @@
 
 <style lang="less">
   .scenario-csv-trigger {
-    @apply bg-white;
+    background-color: var(--color-text-fff);
     .scenario-csv-trigger-content {
       padding: 16px;
       width: 400px;
diff --git a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
index 169dde7ae3..958facd65e 100644
--- a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
@@ -1406,7 +1406,7 @@
   .exec-btn {
     margin-right: 12px;
     :deep(.arco-btn) {
-      color: white !important;
+      color: var(--color-text-fff) !important;
       background-color: rgb(var(--primary-5)) !important;
       .btn-base-primary-hover();
       .btn-base-primary-active();
@@ -1430,19 +1430,21 @@
     .ms-scroll-bar();
   }
   .sticky-content {
-    @apply sticky bg-white;
+    @apply sticky;
 
     z-index: 101;
+    background-color: var(--color-text-fff);
   }
   .request-content-and-response {
     display: flex;
     &.vertical {
       flex-direction: column;
       .response :deep(.response-head) {
-        @apply sticky bg-white;
+        @apply sticky;
 
         top: 46px; // 请求参数tab高度(不算border-bottom)
         z-index: 11;
+        background-color: var(--color-text-fff);
       }
       .request-tab-pane {
         min-height: 400px;
diff --git a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
index 66cf5ea064..e4a93e24eb 100644
--- a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
@@ -1093,7 +1093,7 @@
 <style lang="less" scoped>
   .exec-btn {
     :deep(.arco-btn) {
-      color: white !important;
+      color: var(--color-text-fff) !important;
       background-color: rgb(var(--primary-5)) !important;
       .btn-base-primary-hover();
       .btn-base-primary-active();
@@ -1112,19 +1112,21 @@
     .ms-scroll-bar();
   }
   .sticky-content {
-    @apply sticky bg-white;
+    @apply sticky;
 
     z-index: 101;
+    background-color: var(--color-text-fff);
   }
   .request-content-and-response {
     display: flex;
     &.vertical {
       flex-direction: column;
       .response :deep(.response-head) {
-        @apply sticky bg-white;
+        @apply sticky;
 
         top: 46px; // 请求参数tab高度(不算border-bottom)
         z-index: 11;
+        background-color: var(--color-text-fff);
       }
       .request-tab-pane {
         min-height: 400px;
diff --git a/frontend/src/views/api-test/scenario/components/common/exportScenario/scenarioExportModal.vue b/frontend/src/views/api-test/scenario/components/common/exportScenario/scenarioExportModal.vue
index 2ed5c98a58..3348700e9a 100644
--- a/frontend/src/views/api-test/scenario/components/common/exportScenario/scenarioExportModal.vue
+++ b/frontend/src/views/api-test/scenario/components/common/exportScenario/scenarioExportModal.vue
@@ -205,12 +205,13 @@
 
 <style scoped lang="less">
   .import-item {
-    @apply flex cursor-pointer items-center bg-white;
+    @apply flex cursor-pointer items-center;
 
     padding: 8px;
     width: 150px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     gap: 6px;
   }
   .import-item--active {
diff --git a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
index 9c48c4729e..37e0541f93 100644
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
@@ -14,7 +14,7 @@
       </a-tabs>
       <a-divider :margin="0"></a-divider>
       <div class="flex h-[calc(100%-49px)]">
-        <div v-show="!isAdvancedSearchMode" class="w-[300px] border-r p-[16px]">
+        <div v-show="!isAdvancedSearchMode" class="w-[300px] border-r border-[var(--color-text-n8)] p-[16px]">
           <div class="flex flex-col">
             <div class="mb-[12px] flex items-center gap-[8px] overflow-hidden">
               <MsProjectSelect
diff --git a/frontend/src/views/api-test/scenario/components/common/loopPagination.vue b/frontend/src/views/api-test/scenario/components/common/loopPagination.vue
index ca55414650..a8f750c708 100644
--- a/frontend/src/views/api-test/scenario/components/common/loopPagination.vue
+++ b/frontend/src/views/api-test/scenario/components/common/loopPagination.vue
@@ -63,7 +63,7 @@
           border: none;
           border-radius: var(--border-radius-mini);
           color: var(--color-text-1);
-          background-color: white;
+          background-color: var(--color-text-fff);
           line-height: 20px;
         }
         .ms-pagination-item-previous {
@@ -76,7 +76,7 @@
         .ms-pagination-item-active {
           border: 1px solid rgb(var(--primary-5)) !important;
           color: rgb(var(--primary-5)) !important;
-          background-color: white !important;
+          background-color: var(--color-text-fff) !important;
         }
       }
       .ms-pagination-jumper {
@@ -87,7 +87,7 @@
         background-color: var(--color-text-n8);
         .ms-pagination-jumper-input {
           width: 48px;
-          background-color: white;
+          background-color: var(--color-text-fff);
           input {
             height: 18px;
           }
diff --git a/frontend/src/views/api-test/scenario/components/common/responsePopover.vue b/frontend/src/views/api-test/scenario/components/common/responsePopover.vue
index 97a775882c..eed9539df9 100644
--- a/frontend/src/views/api-test/scenario/components/common/responsePopover.vue
+++ b/frontend/src/views/api-test/scenario/components/common/responsePopover.vue
@@ -110,14 +110,17 @@
     .arco-popover-content {
       @apply mt-0 h-full;
       .response-header-pre {
-        @apply h-full overflow-auto bg-white;
-        .ms-scroll-bar();
+        @apply h-full overflow-auto;
 
         padding: 8px 12px;
         border-radius: var(--border-radius-small);
+        background-color: var(--color-text-fff);
+        .ms-scroll-bar();
       }
       .response-result {
-        @apply h-full overflow-auto bg-white;
+        @apply h-full overflow-auto;
+
+        background-color: var(--color-text-fff);
         .ms-scroll-bar();
         .arco-tabs-tab:first-child {
           margin-left: 0;
diff --git a/frontend/src/views/api-test/scenario/components/common/scriptOperationDrawer.vue b/frontend/src/views/api-test/scenario/components/common/scriptOperationDrawer.vue
index ffe7d2d549..de4509ea3d 100644
--- a/frontend/src/views/api-test/scenario/components/common/scriptOperationDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/scriptOperationDrawer.vue
@@ -227,15 +227,17 @@
     margin-left: 0;
   }
   .response-header-pre {
-    @apply h-full overflow-auto bg-white;
-    .ms-scroll-bar();
+    @apply h-full overflow-auto;
 
     padding: 8px 12px;
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
+    .ms-scroll-bar();
   }
   .sticky-content {
-    @apply sticky overflow-visible bg-white;
+    @apply sticky overflow-visible;
 
     z-index: 101;
+    background-color: var(--color-text-fff);
   }
 </style>
diff --git a/frontend/src/views/api-test/scenario/components/executeHistory.vue b/frontend/src/views/api-test/scenario/components/executeHistory.vue
index ce80452a67..443497feda 100644
--- a/frontend/src/views/api-test/scenario/components/executeHistory.vue
+++ b/frontend/src/views/api-test/scenario/components/executeHistory.vue
@@ -10,7 +10,7 @@
               :self-style="{
                 border: `1px solid ${color}`,
                 color: color,
-                backgroundColor: 'white',
+                backgroundColor: 'var(--color-text-fff)',
               }"
             >
               {{ record.testPlanNum }}
diff --git a/frontend/src/views/api-test/scenario/components/import.vue b/frontend/src/views/api-test/scenario/components/import.vue
index 014b92423c..446f8aa5ac 100644
--- a/frontend/src/views/api-test/scenario/components/import.vue
+++ b/frontend/src/views/api-test/scenario/components/import.vue
@@ -221,12 +221,13 @@
 
 <style lang="less" scoped>
   .import-item {
-    @apply flex cursor-pointer items-center bg-white;
+    @apply flex cursor-pointer items-center;
 
     padding: 8px;
     width: 200px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     gap: 6px;
   }
   .import-item--active {
diff --git a/frontend/src/views/api-test/scenario/components/step/stepTree.vue b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
index 6a196ae239..7355817858 100644
--- a/frontend/src/views/api-test/scenario/components/step/stepTree.vue
+++ b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
@@ -1384,11 +1384,10 @@
 
 <style lang="less" scoped>
   .add-step-btn {
-    @apply bg-white;
-
     padding: 4px;
     border: 1px dashed rgb(var(--primary-3));
     color: rgb(var(--primary-5));
+    background-color: var(--color-text-fff);
     &:hover,
     &:focus {
       border: 1px dashed rgb(var(--primary-5));
@@ -1422,9 +1421,10 @@
       }
     }
     .arco-tree-node-title {
-      @apply !cursor-pointer bg-white;
+      @apply !cursor-pointer;
 
       padding: 8px 4px;
+      background-color: var(--color-text-fff);
       &:hover {
         background-color: var(--color-text-n9) !important;
       }
diff --git a/frontend/src/views/api-test/scenario/index.vue b/frontend/src/views/api-test/scenario/index.vue
index 89d3f25364..893a885fb5 100644
--- a/frontend/src/views/api-test/scenario/index.vue
+++ b/frontend/src/views/api-test/scenario/index.vue
@@ -773,7 +773,7 @@
   .pageWrap {
     height: calc(100% - 50px);
     border-radius: var(--border-radius-large);
-    @apply bg-white;
+    background-color: var(--color-text-fff);
   }
   .case {
     padding: 8px 4px;
@@ -814,12 +814,16 @@
     }
   }
   .recycle {
-    @apply absolute bottom-0 bg-white  pb-4;
+    @apply absolute bottom-0  pb-4;
+
+    background-color: var(--color-text-fff);
     :deep(.arco-divider-horizontal) {
       margin: 8px 0;
     }
     .recycle-bin {
-      @apply bottom-0 flex items-center bg-white;
+      @apply bottom-0 flex items-center;
+
+      background-color: var(--color-text-fff);
       .recycle-count {
         margin-left: 4px;
         color: var(--color-text-4);
diff --git a/frontend/src/views/api-test/scenario/recycle.vue b/frontend/src/views/api-test/scenario/recycle.vue
index 9162ad62f8..b8bae2b64a 100644
--- a/frontend/src/views/api-test/scenario/recycle.vue
+++ b/frontend/src/views/api-test/scenario/recycle.vue
@@ -112,7 +112,7 @@
   .pageWrap {
     height: calc(100% - 65px);
     border-radius: var(--border-radius-large);
-    @apply bg-white;
+    background-color: var(--color-text-fff);
     .case {
       padding: 8px 4px;
       border-radius: var(--border-radius-small);
@@ -153,12 +153,16 @@
     }
   }
   .recycle {
-    @apply absolute bottom-0 bg-white  pb-4;
+    @apply absolute bottom-0   pb-4;
+
+    background-color: var(--color-text-fff);
     :deep(.arco-divider-horizontal) {
       margin: 8px 0;
     }
     .recycle-bin {
-      @apply bottom-0 flex items-center bg-white;
+      @apply bottom-0 flex items-center;
+
+      background-color: var(--color-text-fff);
       .recycle-count {
         margin-left: 4px;
         color: var(--color-text-4);
diff --git a/frontend/src/views/base/invite/index.vue b/frontend/src/views/base/invite/index.vue
index 29af6344e4..90c086bfd0 100644
--- a/frontend/src/views/base/invite/index.vue
+++ b/frontend/src/views/base/invite/index.vue
@@ -5,7 +5,7 @@
         <icon-close-circle-fill :size="68" />
       </template>
     </a-empty>
-    <div v-else class="form-box w-1/3 rounded-[12px] bg-white">
+    <div v-else class="form-box w-1/3 rounded-[12px] bg-[var(--color-text-fff)]">
       <div class="form-box-title">{{ t('invite.title') }}</div>
       <a-form
         ref="registerFormRef"
diff --git a/frontend/src/views/bug-management/components/bug-detail-drawer.vue b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
index d4253118de..5c9b631228 100644
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@@ -105,7 +105,7 @@
       </div>
     </template>
     <template #default>
-      <div ref="wrapperRef" class="bg-white">
+      <div ref="wrapperRef" class="bg-[var(--color-text-fff)]">
         <div class="header relative h-[48px] pl-2">
           <MsTab
             v-model:active-key="activeTab"
diff --git a/frontend/src/views/bug-management/createSuccess.vue b/frontend/src/views/bug-management/createSuccess.vue
index af95e53752..3006d4c075 100644
--- a/frontend/src/views/bug-management/createSuccess.vue
+++ b/frontend/src/views/bug-management/createSuccess.vue
@@ -146,13 +146,16 @@
 
 <style scoped lang="less">
   .outerWrapper {
+    background-color: var(--color-text-fff);
     box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
-    @apply rounded bg-white;
+    @apply rounded;
     .innerWrapper {
       background: var(--color-bg-3);
       @apply rounded p-6;
       .logo-img {
-        @apply mr-3 flex items-center bg-white;
+        @apply mr-3 flex items-center;
+
+        background-color: var(--color-text-fff);
       }
     }
   }
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
index 25231bb2a5..bb236c309f 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue
@@ -136,8 +136,8 @@
       </div>
     </template>
     <template #default="{ detail, loading }">
-      <div ref="wrapperRef" class="bg-white">
-        <div class="header relative h-[48px] border-b pl-2">
+      <div ref="wrapperRef" class="bg-[var(--color-text-fff)]">
+        <div class="header relative h-[48px] border-b border-[var(--color-text-n8)] pl-2">
           <div class="max-w-[calc(100%-100px)]">
             <MsTab
               v-model:active-key="activeTab"
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue b/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue
index eccc90249f..d316d5aa78 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/createSuccess.vue
@@ -158,13 +158,16 @@
 
 <style scoped lang="less">
   .outerWrapper {
+    background-color: var(--color-text-fff);
     box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
-    @apply rounded bg-white;
+    @apply rounded;
     .innerWrapper {
       background: var(--color-bg-3);
       @apply rounded p-6;
       .logo-img {
-        @apply mr-3 flex items-center bg-white;
+        @apply mr-3 flex items-center;
+
+        background-color: var(--color-text-fff);
       }
     }
   }
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
index 9f3eed0ebe..b80c05996f 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
@@ -912,7 +912,7 @@
     min-width: 1000px;
     height: calc(100vh - 126px);
     border-radius: var(--border-radius-large);
-    @apply bg-white;
+    background-color: var(--color-text-fff);
     .back {
       margin-right: 8px;
       width: 20px;
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue b/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
index 7b1cd205e3..7a8c2a9a01 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue
@@ -44,7 +44,7 @@
     padding: 16px;
     width: 700px;
     border-radius: var(--border-radius-medium);
+    background-color: var(--color-text-fff);
     box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
-    @apply bg-white;
   }
 </style>
diff --git a/frontend/src/views/case-management/caseManagementFeature/index.vue b/frontend/src/views/case-management/caseManagementFeature/index.vue
index ad4e382895..7748937db7 100644
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@@ -315,12 +315,16 @@
     }
   }
   .recycle {
-    @apply absolute bottom-0 bg-white pb-4;
+    @apply absolute bottom-0 pb-4;
+
+    background-color: var(--color-text-fff);
     :deep(.arco-divider-horizontal) {
       margin: 8px 0;
     }
     .recycle-bin {
-      @apply bottom-0 flex items-center bg-white;
+      @apply bottom-0 flex items-center;
+
+      background-color: var(--color-text-fff);
       .recycle-count {
         margin-left: 4px;
         color: var(--color-text-4);
diff --git a/frontend/src/views/case-management/caseReview/caseDetail.vue b/frontend/src/views/case-management/caseReview/caseDetail.vue
index 396e5332b9..28f5d27525 100644
--- a/frontend/src/views/case-management/caseReview/caseDetail.vue
+++ b/frontend/src/views/case-management/caseReview/caseDetail.vue
@@ -2,7 +2,7 @@
   <MsCard :min-width="1100" has-breadcrumb hide-footer no-content-padding hide-divider show-full-screen>
     <template #headerLeft>
       <a-tooltip :content="reviewDetail.name">
-        <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-000)]">
+        <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-1)]">
           {{ reviewDetail.name }}
         </div>
       </a-tooltip>
@@ -119,7 +119,7 @@
               <div class="flex items-center">
                 <MsIcon type="icon-icon_folder_filled1" class="mr-[4px] text-[var(--color-text-4)]" />
                 <a-tooltip :content="caseDetail.moduleName || t('common.root')">
-                  <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-000)]">
+                  <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-1)]">
                     {{ caseDetail.moduleName || t('common.root') }}
                   </div>
                 </a-tooltip>
@@ -669,7 +669,7 @@
 
       padding: 16px;
       border-radius: var(--border-radius-small);
-      background-color: white;
+      background-color: var(--color-text-fff);
     }
     .case-item--active {
       @apply relative;
diff --git a/frontend/src/views/case-management/caseReview/detail.vue b/frontend/src/views/case-management/caseReview/detail.vue
index a693e3e5bb..fd4a02fa21 100644
--- a/frontend/src/views/case-management/caseReview/detail.vue
+++ b/frontend/src/views/case-management/caseReview/detail.vue
@@ -12,7 +12,7 @@
   >
     <template #headerLeft>
       <a-tooltip :content="reviewDetail.name">
-        <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-000)]">
+        <div class="one-line-text mr-[8px] max-w-[300px] font-medium text-[var(--color-text-1)]">
           {{ reviewDetail.name }}
         </div>
       </a-tooltip>
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index e94c9e015d..d68be3ca1b 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="preheat" class="login-form" :style="props.isPreview ? 'height: inherit' : 'height: 100vh'">
+  <div
+    v-if="preheat && !props.isPreview"
+    class="login-form"
+    :style="props.isPreview ? 'height: inherit' : 'height: 100vh'"
+  >
     <a-spin :loading="preheat" :tip="t('login.form.loading')"> </a-spin>
   </div>
   <div v-else class="login-form" :style="props.isPreview ? 'height: inherit' : 'height: 100vh'">
@@ -365,14 +369,16 @@
   }
 
   onMounted(() => {
-    userStore.getAuthentication();
-    initPlatformInfo();
-    try {
-      isLogin().then((res) => {
-        preheat.value = res;
-      });
-    } catch (e) {
-      preheat.value = false;
+    if (!props.isPreview) {
+      userStore.getAuthentication();
+      initPlatformInfo();
+      try {
+        isLogin().then((res) => {
+          preheat.value = res;
+        });
+      } catch (e) {
+        preheat.value = false;
+      }
     }
   });
 </script>
@@ -385,10 +391,11 @@
       color: rgb(var(--primary-5));
     }
     .form {
-      @apply relative bg-white;
+      @apply relative;
 
       padding: 40px;
       border-radius: var(--border-radius-large);
+      background-color: var(--color-text-fff);
       box-shadow: 0 8px 10px 0 #3232330d, 0 16px 24px 0 #3232330d, 0 6px 30px 0 #3232330d;
       .login-form-item {
         margin-bottom: 28px;
diff --git a/frontend/src/views/project-management/environmental/components/EnvGroupBox.vue b/frontend/src/views/project-management/environmental/components/EnvGroupBox.vue
index d7a51e2a80..8c3ca68476 100644
--- a/frontend/src/views/project-management/environmental/components/EnvGroupBox.vue
+++ b/frontend/src/views/project-management/environmental/components/EnvGroupBox.vue
@@ -205,7 +205,7 @@
       overflow-y: auto;
       padding: 16px 16px 0;
       max-height: calc(100% - 100px);
-      background-color: #ffffff;
+      background-color: var(--color-text-fff);
     }
     .footer {
       position: fixed;
@@ -215,7 +215,7 @@
       display: flex;
       justify-content: flex-end;
       padding: 16px;
-      background-color: #ffffff;
+      background-color: var(--color-text-fff);
       box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
       gap: 16px;
     }
diff --git a/frontend/src/views/project-management/environmental/components/EnvParamBox.vue b/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
index e98d92e737..14e88ae618 100644
--- a/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/EnvParamBox.vue
@@ -35,7 +35,7 @@
         @change="handleTabChange"
       />
     </div>
-    <div class="content h-full">
+    <div class="content w-full">
       <EnvParamsTab v-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_PARAM" />
       <HttpTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_HTTP" />
       <DataBaseTab v-else-if="activeKey === EnvTabTypeEnum.ENVIRONMENT_DATABASE" />
@@ -336,11 +336,13 @@
       padding: 16px 16px 0;
     }
     .content {
+      .ms-scroll-bar();
+
       overflow-y: auto;
       padding: 0 16px;
       height: 100%;
       max-height: calc(100% - 320px);
-      background-color: #ffffff;
+      background-color: var(--color-text-fff);
     }
     .no-content {
       :deep(.arco-tabs-content) {
@@ -355,7 +357,7 @@
       display: flex;
       justify-content: flex-end;
       padding: 24px;
-      background-color: #ffffff;
+      background-color: var(--color-text-fff);
       box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
       gap: 16px;
     }
diff --git a/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue b/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
index cded5e690c..03ad0d77d3 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/DatabaseTab.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="grid grid-cols-4">
-    <div class="col-start-1">
-      <a-button v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" type="outline" @click="handleAdd">{{
-        t('project.environmental.database.addDatabase')
-      }}</a-button>
-    </div>
-    <div class="col-end-5 text-right">
+  <div>
+    <div class="flex items-center justify-between">
+      <a-button v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" type="outline" @click="handleAdd">
+        {{ t('project.environmental.database.addDatabase') }}
+      </a-button>
       <a-input-search
         v-model="keyword"
         class="w-[240px]"
@@ -16,37 +14,37 @@
         @clear="fetchData"
       ></a-input-search>
     </div>
+    <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
+      <template #driverId="{ record }">
+        {{ getDriver(record.driverId) }}
+      </template>
+      <template #operation="{ record }">
+        <div class="flex flex-row flex-nowrap items-center">
+          <MsButton class="!mr-0" :disabled="isDisabled" @click="handleCopy(record)">{{ t('common.copy') }}</MsButton>
+          <a-divider class="h-[16px]" direction="vertical" />
+          <MsButton class="!mr-0" :disabled="isDisabled" @click="handleEdit(record)">{{ t('common.edit') }}</MsButton>
+          <a-divider class="h-[16px]" direction="vertical" />
+          <MsTableMoreAction
+            v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
+            :list="moreActionList"
+            trigger="click"
+            @select="handleMoreActionSelect($event, record)"
+          />
+        </div>
+      </template>
+      <template v-if="(keyword || '').trim() === ''" #empty>
+        <div class="flex w-full items-center justify-center text-[var(--color-text-4)]">
+          <span v-if="hasAnyPermission(['PROJECT_ENVIRONMENT:READ+UPDATE'])">{{
+            t('caseManagement.caseReview.tableNoData')
+          }}</span>
+          <span v-else>{{ t('caseManagement.featureCase.tableNoData') }}</span>
+          <MsButton v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" class="ml-[8px]" @click="handleAdd">
+            {{ t('project.environmental.database.addDatabase') }}
+          </MsButton>
+        </div>
+      </template>
+    </MsBaseTable>
   </div>
-  <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
-    <template #driverId="{ record }">
-      {{ getDriver(record.driverId) }}
-    </template>
-    <template #operation="{ record }">
-      <div class="flex flex-row flex-nowrap items-center">
-        <MsButton class="!mr-0" :disabled="isDisabled" @click="handleCopy(record)">{{ t('common.copy') }}</MsButton>
-        <a-divider class="h-[16px]" direction="vertical" />
-        <MsButton class="!mr-0" :disabled="isDisabled" @click="handleEdit(record)">{{ t('common.edit') }}</MsButton>
-        <a-divider class="h-[16px]" direction="vertical" />
-        <MsTableMoreAction
-          v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
-          :list="moreActionList"
-          trigger="click"
-          @select="handleMoreActionSelect($event, record)"
-        />
-      </div>
-    </template>
-    <template v-if="(keyword || '').trim() === ''" #empty>
-      <div class="flex w-full items-center justify-center text-[var(--color-text-4)]">
-        <span v-if="hasAnyPermission(['PROJECT_ENVIRONMENT:READ+UPDATE'])">{{
-          t('caseManagement.caseReview.tableNoData')
-        }}</span>
-        <span v-else>{{ t('caseManagement.featureCase.tableNoData') }}</span>
-        <MsButton v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']" class="ml-[8px]" @click="handleAdd">
-          {{ t('project.environmental.database.addDatabase') }}
-        </MsButton>
-      </div>
-    </template>
-  </MsBaseTable>
   <AddDatabaseModal
     v-model:visible="addVisible"
     :current-id="currentId"
@@ -127,6 +125,7 @@
       dataIndex: 'timeout',
       showDrag: true,
       showInTable: true,
+      width: 130,
     },
     {
       title: 'common.operation',
diff --git a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
index 45a6f18657..b5c04bb62f 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/HttpTab.vue
@@ -5,18 +5,16 @@
       t('project.environmental.httpNoWarning')
     }}</span>
   </div>
-  <div class="grid grid-cols-6">
-    <div class="col-start-1">
-      <a-button
-        v-if="!store.currentEnvDetailInfo.mock"
-        v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
-        type="outline"
-        @click="handleAddHttp"
-        >{{ t('project.environmental.addHttp') }}</a-button
-      >
-    </div>
+  <div class="flex items-center justify-between">
+    <a-button
+      v-if="!store.currentEnvDetailInfo.mock"
+      v-permission="['PROJECT_ENVIRONMENT:READ+UPDATE']"
+      type="outline"
+      @click="handleAddHttp"
+      >{{ t('project.environmental.addHttp') }}</a-button
+    >
 
-    <div class="col-span-2 col-end-7 flex flex-row gap-[8px]">
+    <div class="flex items-center justify-end gap-[8px]">
       <a-input-number
         v-model:model-value="form.requestTimeout"
         :min="0"
@@ -24,6 +22,7 @@
         :precision="0"
         :max="600000"
         :disabled="isDisabled"
+        class="w-[180px]"
       >
         <template #prefix>
           <span class="text-[var(--color-text-3)]">{{ t('project.environmental.http.linkTimeOut') }}</span>
@@ -36,6 +35,7 @@
         :max="600000"
         :precision="0"
         :disabled="isDisabled"
+        class="w-[180px]"
       >
         <template #prefix>
           <span class="text-[var(--color-text-3)]">{{ t('project.environmental.http.resTimeOut') }}</span>
diff --git a/frontend/src/views/project-management/environmental/components/envParams/popUp/apiTree.vue b/frontend/src/views/project-management/environmental/components/envParams/popUp/apiTree.vue
index 4c941d2c90..9740387ac5 100644
--- a/frontend/src/views/project-management/environmental/components/envParams/popUp/apiTree.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/popUp/apiTree.vue
@@ -1147,7 +1147,7 @@
         .arco-tree-node-plus-icon {
           border: 1px solid var(--color-text-4);
           border-radius: var(--border-radius-mini);
-          background-color: white;
+          background-color: var(--color-text-fff);
           &::after,
           &::before {
             background-color: var(--color-text-4);
@@ -1218,7 +1218,7 @@
         .arco-tree-node-plus-icon {
           border: 1px solid rgb(var(--primary-5));
           border-radius: var(--border-radius-mini);
-          background-color: white;
+          background-color: var(--color-text-fff);
           &::after,
           &::before {
             background-color: rgb(var(--primary-5));
diff --git a/frontend/src/views/project-management/environmental/index.vue b/frontend/src/views/project-management/environmental/index.vue
index ea0241e662..fc0c3414d9 100644
--- a/frontend/src/views/project-management/environmental/index.vue
+++ b/frontend/src/views/project-management/environmental/index.vue
@@ -834,9 +834,10 @@
 
 <style lang="less" scoped>
   .page {
-    @apply h-full bg-white;
+    @apply h-full;
 
     border-radius: var(--border-radius-large);
+    background-color: var(--color-text-fff);
   }
   .env-item {
     display: flex;
diff --git a/frontend/src/views/project-management/fileManagement/components/rightBox.vue b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
index 4234d58b77..5644c85f4e 100644
--- a/frontend/src/views/project-management/fileManagement/components/rightBox.vue
+++ b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
@@ -51,7 +51,7 @@
         @module-change="searchList"
       >
         <template #name="{ record, rowIndex }">
-          <div class="flex w-full justify-start overflow-hidden">
+          <div class="flex w-full items-center justify-start overflow-hidden">
             <MsTag
               v-if="record.fileType.toLowerCase() === 'jar'"
               theme="light"
@@ -70,7 +70,7 @@
             <a-tooltip :content="record.name">
               <a-button
                 type="text"
-                class="max-w-full flex-1 justify-start px-0"
+                class="max-w-[calc(100%-60px)] flex-1 justify-start px-0"
                 @click="openFileDetail(record.id, rowIndex)"
               >
                 <div class="one-line-text">{{ record.name }}</div>
diff --git a/frontend/src/views/project-management/fileManagement/index.vue b/frontend/src/views/project-management/fileManagement/index.vue
index 8e5820ed99..7d4c006cf9 100644
--- a/frontend/src/views/project-management/fileManagement/index.vue
+++ b/frontend/src/views/project-management/fileManagement/index.vue
@@ -251,10 +251,11 @@
 
 <style lang="less" scoped>
   .page {
-    @apply h-full bg-white;
+    @apply h-full;
 
     min-width: 1000px;
     border-radius: var(--border-radius-large);
+    background-color: var(--color-text-fff);
     .folder {
       @apply flex cursor-pointer items-center justify-between;
 
diff --git a/frontend/src/views/project-management/messageManagement/components/messageList.vue b/frontend/src/views/project-management/messageManagement/components/messageList.vue
index b350c72bf0..bea2400096 100644
--- a/frontend/src/views/project-management/messageManagement/components/messageList.vue
+++ b/frontend/src/views/project-management/messageManagement/components/messageList.vue
@@ -8,7 +8,7 @@
     @toggle-full-screen="handleToggleFullScreen"
   >
     <template #headerLeft>
-      <div class="font-medium text-[var(--color-text-000)]">{{ t('project.messageManagement.config') }}</div>
+      <div class="font-medium text-[var(--color-text-1)]">{{ t('project.messageManagement.config') }}</div>
     </template>
     <template #headerRight>
       <MsSelect
diff --git a/frontend/src/views/project-management/messageManagement/components/messagePreview.vue b/frontend/src/views/project-management/messageManagement/components/messagePreview.vue
index 7f28e69041..b8e9a7bc66 100644
--- a/frontend/src/views/project-management/messageManagement/components/messagePreview.vue
+++ b/frontend/src/views/project-management/messageManagement/components/messagePreview.vue
@@ -7,7 +7,7 @@
     v-if="props.robot.platform === 'IN_SITE'"
     class="preview-rounded h-full w-[400px] bg-[var(--color-text-n9)] p-[12px] text-[14px]"
   >
-    <div class="preview-rounded h-full overflow-scroll bg-white">
+    <div class="preview-rounded h-full overflow-scroll bg-[var(--color-text-fff)]">
       <div
         v-if="!props.isUpdatePreview"
         class="flex items-center justify-between border-b border-[var(--color-text-n8)] p-[16px]"
@@ -44,13 +44,17 @@
         {{ t('project.messageManagement.emailReceiver') }}
       </div>
     </div>
-    <div class="preview-rounded bg-white p-[16px] text-[var(--color-text-2)]" v-html="template || '-'"> </div>
+    <div
+      class="preview-rounded bg-[var(--color-text-fff)] p-[16px] text-[var(--color-text-2)]"
+      v-html="template || '-'"
+    >
+    </div>
   </div>
   <div
     v-else-if="props.robot.platform === 'WE_COM'"
     class="preview-rounded h-full w-[400px] overflow-scroll bg-[var(--color-text-n9)] p-[12px] text-[14px]"
   >
-    <div class="preview-rounded bg-white">
+    <div class="preview-rounded bg-[var(--color-text-fff)]">
       <div class="flex items-center justify-between border-b border-[var(--color-text-n8)] p-[16px_16px_8px_16px]">
         <div class="flex items-center gap-[4px] text-[14px] font-medium text-[var(--color-text-1)]">
           <MsIcon type="icon-logo_wechat-work" size="20"></MsIcon>
@@ -99,14 +103,14 @@
         </template>
         <MsTag
           size="small"
-          class="ml-[4px] flex items-center gap-[4px] border-none !bg-white px-[4px] !text-[var(--color-text-4)]"
+          class="ml-[4px] flex items-center gap-[4px] border-none !bg-[var(--color-text-fff)] px-[4px] !text-[var(--color-text-4)]"
         >
           <MsIcon type="icon-icon_bot1" size="22" />
           {{ t('project.messageManagement.robot') }}
         </MsTag>
       </div>
       <div
-        class="rounded-[var(--border-radius-small)] bg-white p-[12px] text-[var(--color-text-2)]"
+        class="rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[12px] text-[var(--color-text-2)]"
         v-html="`【${subject}】${template || '-'}`"
       >
       </div>
@@ -141,7 +145,7 @@
         </div>
       </div>
       <div
-        class="rounded-[var(--border-radius-small)] bg-white p-[12px] text-[var(--color-text-2)]"
+        class="rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[12px] text-[var(--color-text-2)]"
         v-html="`【${subject}】${template || '-'}`"
       >
       </div>
@@ -151,7 +155,7 @@
     v-else-if="props.robot.platform === 'CUSTOM'"
     class="preview-rounded h-full w-[400px] overflow-scroll bg-[var(--color-text-n9)] p-[12px] text-[14px]"
   >
-    <div class="preview-rounded bg-white">
+    <div class="preview-rounded bg-[var(--color-text-fff)]">
       <div class="flex items-center justify-between border-b border-[var(--color-text-n8)] p-[16px_16px_8px_16px]">
         <div class="flex items-center gap-[4px] text-[14px] font-medium text-[var(--color-text-1)]">
           <MsIcon type="icon-logo_wechat-work" size="20"></MsIcon>
diff --git a/frontend/src/views/project-management/messageManagement/components/robotList.vue b/frontend/src/views/project-management/messageManagement/components/robotList.vue
index 7e7de032a4..c1eb1b6285 100644
--- a/frontend/src/views/project-management/messageManagement/components/robotList.vue
+++ b/frontend/src/views/project-management/messageManagement/components/robotList.vue
@@ -581,11 +581,12 @@
       border-radius: var(--border-radius-small);
       gap: 16px;
       .robot-card {
-        @apply flex flex-col bg-white;
+        @apply flex flex-col;
 
         padding: 24px;
         max-height: 128px;
         border-radius: var(--border-radius-small);
+        background-color: var(--color-text-fff);
         gap: 16px;
       }
     }
diff --git a/frontend/src/views/project-management/messageManagement/edit.vue b/frontend/src/views/project-management/messageManagement/edit.vue
index 5701d8285b..57c54e1502 100644
--- a/frontend/src/views/project-management/messageManagement/edit.vue
+++ b/frontend/src/views/project-management/messageManagement/edit.vue
@@ -95,7 +95,7 @@
           </div>
           <div
             v-else
-            class="flex h-[calc(100%-156px)] flex-col items-center gap-[16px] bg-white"
+            class="flex h-[calc(100%-156px)] flex-col items-center gap-[16px] bg-[var(--color-text-fff)]"
             @click="focusTemplate"
           >
             <div class="content-empty-img"></div>
@@ -325,13 +325,14 @@
     padding: 16px 10px 16px 16px;
   }
   .field-item {
-    @apply flex cursor-pointer bg-white;
+    @apply flex cursor-pointer;
 
     margin-bottom: 4px;
     padding: 8px 12px;
     height: 38px;
     border: 1px solid var(--color-text-n8);
     border-radius: var(--border-radius-small);
+    background-color: var(--color-text-fff);
     gap: 8px;
     .field-plus {
       @apply invisible ml-auto;
diff --git a/frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue b/frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue
index 61bcbe248f..89d42c8bea 100644
--- a/frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue
+++ b/frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue
@@ -3,7 +3,7 @@
     <a-alert type="error">{{ t('project.basicInfo.alertDescription') }}</a-alert>
   </div>
   <div class="wrapper mb-6 flex justify-between">
-    <span class="font-medium text-[var(--color-text-000)]">{{ t('project.basicInfo.basicInfo') }}</span>
+    <span class="font-medium text-[var(--color-text-1)]">{{ t('project.basicInfo.basicInfo') }}</span>
     <a-button
       v-show="!projectDetail?.deleted"
       v-permission="['PROJECT_BASE_INFO:READ+UPDATE']"
@@ -12,11 +12,11 @@
       >{{ t('project.basicInfo.edit') }}</a-button
     >
   </div>
-  <div class="project-info mb-6 h-[112px] bg-white p-1">
+  <div class="project-info mb-6 h-[112px] bg-[var(--color-text-fff)] p-1">
     <div class="inner-wrapper rounded-md p-4">
       <div class="detail-info flex flex-col justify-between rounded-md p-4">
         <div class="flex items-center">
-          <span class="one-line-text mr-1 max-w-[300px] font-medium text-[var(--color-text-000)]">{{
+          <span class="one-line-text mr-1 max-w-[300px] font-medium text-[var(--color-text-1)]">{{
             projectDetail?.name
           }}</span>
           <span class="button mr-1" :class="[projectDetail?.deleted ? 'delete-button' : 'enable-button']">
diff --git a/frontend/src/views/project-management/projectAndPermission/index.vue b/frontend/src/views/project-management/projectAndPermission/index.vue
index 62beb9689e..4063d3fe22 100644
--- a/frontend/src/views/project-management/projectAndPermission/index.vue
+++ b/frontend/src/views/project-management/projectAndPermission/index.vue
@@ -4,7 +4,7 @@
       :title="t('project.permission.projectAndPermission')"
       :default-key="currentKey"
       :menu-list="menuList"
-      class="mr-[16px] w-[208px] min-w-[208px] bg-white p-[16px]"
+      class="mr-[16px] w-[208px] min-w-[208px] bg-[var(--color-text-fff)] p-[16px]"
       @toggle-menu="toggleMenu"
     />
     <!-- 272:左边MsMenuPanel的宽度224+边距16*3 -->
@@ -161,8 +161,8 @@
   }
   .right-menu-wrapper {
     border-radius: 12px;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgb(120 56 135/ 5%);
-    @apply bg-white;
   }
   .is-active {
     border-radius: 4px;
diff --git a/frontend/src/views/project-management/projectAndPermission/member/index.vue b/frontend/src/views/project-management/projectAndPermission/member/index.vue
index 42120209f0..06a68276bf 100644
--- a/frontend/src/views/project-management/projectAndPermission/member/index.vue
+++ b/frontend/src/views/project-management/projectAndPermission/member/index.vue
@@ -15,4 +15,8 @@
   });
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+  div {
+    color: var(--color-text-1);
+  }
+</style>
diff --git a/frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue b/frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue
index 58b67f107d..ab940a8bfd 100644
--- a/frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue
+++ b/frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue
@@ -979,6 +979,9 @@
 </script>
 
 <style scoped lang="less">
+  div {
+    color: var(--color-text-1);
+  }
   .icon-class {
     margin: 0 8px 0 16px;
     width: 20px;
diff --git a/frontend/src/views/project-management/projectAndPermission/projectVersion/index.vue b/frontend/src/views/project-management/projectAndPermission/projectVersion/index.vue
index 7eaae764f3..b0c3060b1a 100644
--- a/frontend/src/views/project-management/projectAndPermission/projectVersion/index.vue
+++ b/frontend/src/views/project-management/projectAndPermission/projectVersion/index.vue
@@ -597,7 +597,7 @@
     padding: 6px;
     border: 0.5px solid rgb(212 212 216 / 100%);
     border-radius: var(--border-radius-medium);
-    background: white;
+    background: var(--color-text-fff);
     box-shadow: 0 5px 5px -3px rgb(0 0 0 / 10%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 3px 14px 2px rgb(0 0 0 / 5%);
     gap: 2px;
   }
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
index f177d2296a..f281a232ef 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
@@ -16,7 +16,7 @@
   <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
     <template #name="{ record }">
       <div class="flex flex-row items-center gap-[4px]">
-        <div class="one-line-text">{{ record.name }}</div>
+        <div class="one-line-text text-[var(--color-text-1)]">{{ record.name }}</div>
         <div class="ml-1 text-[var(--color-text-4)]">{{
           `(${
             record.internal
@@ -333,5 +333,3 @@
     fetchData();
   });
 </script>
-
-<style scoped></style>
diff --git a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
index 04607cdcd7..1cb21913b0 100644
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
+++ b/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
@@ -179,3 +179,12 @@
     }
   });
 </script>
+
+<style lang="less" scoped>
+  .arco-table {
+    div,
+    span {
+      color: var(--color-text-1);
+    }
+  }
+</style>
diff --git a/frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue b/frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue
index f9309a629d..671e8a8760 100644
--- a/frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue
+++ b/frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue
@@ -2,7 +2,7 @@
   <MsCard simple class="mb-[16px]" auto-height :loading="loading">
     <div class="outer-wrapper">
       <div class="mb-[16px] flex justify-between">
-        <div class="font-medium text-[var(--color-text-000)]">{{ t('organization.service.integrationList') }}</div>
+        <div class="font-medium text-[var(--color-text-1)]">{{ t('organization.service.integrationList') }}</div>
         <div>
           <a-input-search
             v-model="keyword"
@@ -267,7 +267,7 @@
         padding: 24px;
         height: 144px;
         border-radius: 4px;
-        background: white;
+        background: var(--color-text-fff);
         @apply flex flex-col justify-between;
         .ms-enable {
           font-size: 12px;
diff --git a/frontend/src/views/setting/organization/serviceIntegration/index.vue b/frontend/src/views/setting/organization/serviceIntegration/index.vue
index 0c1233367a..a5131fea26 100644
--- a/frontend/src/views/setting/organization/serviceIntegration/index.vue
+++ b/frontend/src/views/setting/organization/serviceIntegration/index.vue
@@ -164,7 +164,7 @@
     padding: 16px;
     width: calc(50% - 10px);
     height: 78px;
-    border: 1px solid #ffffff;
+    border: 1px solid var(--color-text-n8);
     box-shadow: 0 0 7px rgb(120 56 135 / 10%);
     @apply flex items-center rounded-md;
   }
diff --git a/frontend/src/views/setting/organization/template/components/addTemplate.vue b/frontend/src/views/setting/organization/template/components/addTemplate.vue
index c513c9aa84..bd5041cdd3 100644
--- a/frontend/src/views/setting/organization/template/components/addTemplate.vue
+++ b/frontend/src/views/setting/organization/template/components/addTemplate.vue
@@ -816,7 +816,7 @@
           top: -12px;
           right: 16px;
           z-index: 9 !important;
-          background: white;
+          background: var(--color-text-fff);
           opacity: 0;
           @apply flex items-center justify-end;
           .actionList {
diff --git a/frontend/src/views/setting/organization/template/components/templateItem.vue b/frontend/src/views/setting/organization/template/components/templateItem.vue
index 0e637b5516..b8854a42e9 100644
--- a/frontend/src/views/setting/organization/template/components/templateItem.vue
+++ b/frontend/src/views/setting/organization/template/components/templateItem.vue
@@ -232,8 +232,9 @@
     margin: 0 8px;
   }
   .outerWrapper {
+    background-color: var(--color-text-fff);
     box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
-    @apply rounded bg-white;
+    @apply rounded;
     .innerWrapper {
       background: var(--color-bg-3);
       @apply rounded p-6;
@@ -241,7 +242,9 @@
         @apply flex;
         .logo-img {
           border-radius: var(--border-radius-small);
-          @apply mr-3 flex items-center justify-center bg-white;
+          @apply mr-3 flex items-center justify-center;
+
+          background-color: var(--color-text-fff);
         }
         .template-operation {
           .operation {
diff --git a/frontend/src/views/setting/organization/template/components/workflowCard.vue b/frontend/src/views/setting/organization/template/components/workflowCard.vue
index 2c99da05ba..46e28ea2fa 100644
--- a/frontend/src/views/setting/organization/template/components/workflowCard.vue
+++ b/frontend/src/views/setting/organization/template/components/workflowCard.vue
@@ -30,7 +30,7 @@
         <icon-check :style="{ 'font-size': '16px' }" class="text-[rgb(var(--success-6))]" />
       </div>
       <template #content>
-        <div class="w-[400px] rounded bg-white p-[24px] shadow-[0_0_10px_rgba(100,100,102,0.15)]">
+        <div class="w-[400px] rounded bg-[var(--color-text-fff)] p-[24px] shadow-[0_0_10px_rgba(100,100,102,0.15)]">
           <div class="flex items-center justify-between">
             <div class="font-medium text-[var(--color-text-1)]">{{ title }}</div>
             <div class="cursor-pointer text-[18px] text-[var(--color-text-2)]" @click="handleCancel">×</div>
diff --git a/frontend/src/views/setting/system/config/components/baseConfig.vue b/frontend/src/views/setting/system/config/components/baseConfig.vue
index 03b596e24a..ab8a710274 100644
--- a/frontend/src/views/setting/system/config/components/baseConfig.vue
+++ b/frontend/src/views/setting/system/config/components/baseConfig.vue
@@ -593,7 +593,7 @@
       @apply flex items-center;
 
       gap: 2px;
-      color: var(--color-text-000);
+      color: var(--color-text-1);
     }
   }
 </style>
diff --git a/frontend/src/views/setting/system/config/components/memoryCleanup.vue b/frontend/src/views/setting/system/config/components/memoryCleanup.vue
index 276dc5f922..30675090a5 100644
--- a/frontend/src/views/setting/system/config/components/memoryCleanup.vue
+++ b/frontend/src/views/setting/system/config/components/memoryCleanup.vue
@@ -2,7 +2,7 @@
   <div>
     <MsCard class="mb-[16px]" :loading="loading" simple auto-height>
       <div class="mb-[16px] flex justify-between">
-        <div class="font-medium text-[var(--color-text-000)]">{{ t('system.config.memoryCleanup') }}</div>
+        <div class="font-medium text-[var(--color-text-1)]">{{ t('system.config.memoryCleanup') }}</div>
       </div>
       <a-radio-group v-model:model-value="activeType" type="button">
         <a-radio value="log">{{ t('system.config.memoryCleanup.log') }}</a-radio>
@@ -10,7 +10,7 @@
       </a-radio-group>
       <template v-if="activeType === 'log'">
         <div class="mb-[8px] mt-[16px] flex items-center">
-          <div class="text-[var(--color-text-000)]">{{ t('system.config.memoryCleanup.keepTime') }}</div>
+          <div class="text-[var(--color-text-1)]">{{ t('system.config.memoryCleanup.keepTime') }}</div>
           <a-tooltip :content="t('system.config.memoryCleanup.keepTimeTip')" position="right">
             <icon-question-circle
               class="ml-[4px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-5))]"
@@ -39,7 +39,7 @@
       </template>
       <template v-else>
         <div class="mb-[8px] mt-[16px] flex items-center">
-          <div class="text-[var(--color-text-000)]">{{ t('system.config.memoryCleanup.saveCount') }}</div>
+          <div class="text-[var(--color-text-1)]">{{ t('system.config.memoryCleanup.saveCount') }}</div>
           <a-tooltip position="right">
             <template #content>
               <div>{{ t('system.config.memoryCleanup.saveCountTip') }}</div>
diff --git a/frontend/src/views/setting/system/config/components/pageConfig.vue b/frontend/src/views/setting/system/config/components/pageConfig.vue
index 71182341d4..00c66278b4 100644
--- a/frontend/src/views/setting/system/config/components/pageConfig.vue
+++ b/frontend/src/views/setting/system/config/components/pageConfig.vue
@@ -218,7 +218,7 @@
       <div class="config-title">
         {{ t('system.config.page.platformConfig') }}
       </div>
-      <div class="config-content border border-solid border-[var(--color-text-n8)] !bg-white">
+      <div class="config-content border border-solid border-[var(--color-text-n8)] !bg-[var(--color-text-fff)]">
         <div class="config-title !mb-[8px] flex items-center justify-between">
           {{ t('system.config.page.pagePreview') }}
           <MsButton
@@ -253,7 +253,7 @@
                 class="overflow-hidden"
                 is-preview
               >
-                <div class="w-full bg-white" style="height: calc(100% - 28px)"></div>
+                <div class="w-full bg-[var(--color-text-fff)]" style="height: calc(100% - 28px)"></div>
               </defaultLayout>
             </div>
           </div>
@@ -330,7 +330,7 @@
       </div>
     </MsCard>
     <div
-      class="fixed bottom-0 right-[16px] z-[999] flex justify-between bg-white p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
+      class="fixed bottom-0 right-[16px] z-[999] flex justify-between bg-[var(--color-text-fff)] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
       :style="{ width: `calc(100% - ${menuWidth + 16}px)` }"
     >
       <a-button v-permission="['SYSTEM_PARAMETER_SETTING_DISPLAY:READ+UPDATE']" type="secondary" @click="resetAll">
@@ -648,10 +648,11 @@
         height: auto;
       }
       .config-preview-head {
-        @apply flex items-center justify-between bg-white;
+        @apply flex items-center justify-between;
 
         padding: 8px;
         width: 735px;
+        background-color: var(--color-text-fff);
         @media screen and (min-width: 1600px) {
           width: 100%;
         }
@@ -660,9 +661,10 @@
         width: 100vw;
       }
       .login-preview {
-        @apply relative bg-white;
+        @apply relative;
 
         width: 740px;
+        background-color: var(--color-text-fff);
         @media screen and (min-width: 1600px) {
           width: 888px;
         }
@@ -704,12 +706,11 @@
         margin-left: 12px;
         width: 40%;
         .config-form-card {
-          @apply bg-white;
-
           margin-bottom: 8px;
           padding: 12px;
           border: 1px solid var(--color-text-n8);
           border-radius: var(--border-radius-small);
+          background-color: var(--color-text-fff);
         }
       }
     }
diff --git a/frontend/src/views/setting/system/config/components/qrCodeConfig.vue b/frontend/src/views/setting/system/config/components/qrCodeConfig.vue
index 1a5610e243..d44957eeeb 100644
--- a/frontend/src/views/setting/system/config/components/qrCodeConfig.vue
+++ b/frontend/src/views/setting/system/config/components/qrCodeConfig.vue
@@ -2,7 +2,7 @@
   <MsCard simple class="mb-[16px]" auto-height :loading="loading">
     <div class="outer-wrapper">
       <div class="mb-[16px] flex justify-between">
-        <div class="font-medium text-[var(--color-text-000)]">{{ t('organization.service.integrationList') }}</div>
+        <div class="font-medium text-[var(--color-text-1)]">{{ t('organization.service.integrationList') }}</div>
       </div>
       <div class="ms-card-wrap">
         <a-scrollbar
@@ -361,7 +361,7 @@
         padding: 24px;
         height: 144px;
         border-radius: 4px;
-        background: white;
+        background: var(--color-text-fff);
         @apply flex flex-col justify-between;
         .ms-enable {
           font-size: 12px;
diff --git a/frontend/src/views/setting/system/log/components/logCards.vue b/frontend/src/views/setting/system/log/components/logCards.vue
index 9703276386..ae28367673 100644
--- a/frontend/src/views/setting/system/log/components/logCards.vue
+++ b/frontend/src/views/setting/system/log/components/logCards.vue
@@ -104,7 +104,7 @@
     </MsCard>
     <MsCard class="log-card" simple auto-height>
       <div class="log-card-header">
-        <div class="font-medium text-[var(--color-text-000)]">{{ t('system.log.log') }}</div>
+        <div class="font-medium text-[var(--color-text-1)]">{{ t('system.log.log') }}</div>
       </div>
       <ms-base-table v-bind="propsRes" no-disable sticky-header v-on="propsEvent">
         <template #range="{ record }">
diff --git a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
index 01acd7ab39..eaa10477d1 100644
--- a/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
+++ b/frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
@@ -439,7 +439,7 @@
     height: 16px;
     border-radius: 50%;
     background: var(--color-text-n8) !important;
-    @apply bg-white;
+    background-color: var(--color-text-fff);
   }
   :deep(.expand) {
     width: 16px;
@@ -459,7 +459,9 @@
   }
   .ms-footerNum {
     width: 100%;
-    @apply sticky bottom-0 left-0 z-20  bg-white  pt-4 text-sm text-slate-500;
+    @apply sticky bottom-0 left-0 z-20  pt-4 text-sm text-slate-500;
+
+    background-color: var(--color-text-fff);
   }
   :deep(.arco-table-tr .arco-table-td) {
     height: 54px !important;
diff --git a/frontend/src/views/setting/system/resourcePool/index.vue b/frontend/src/views/setting/system/resourcePool/index.vue
index 30060db344..021a1abc15 100644
--- a/frontend/src/views/setting/system/resourcePool/index.vue
+++ b/frontend/src/views/setting/system/resourcePool/index.vue
@@ -59,7 +59,7 @@
             >
             </a-switch>
             <template #content>
-              <span class="text-[var(--color-text-000)]">{{ t('system.authorized.resourcePoolTableTip') }}</span>
+              <span class="text-[var(--color-text-1)]">{{ t('system.authorized.resourcePoolTableTip') }}</span>
               <span class="ml-2 inline-block cursor-pointer text-[rgb(var(--primary-4))]" @click="goTry">
                 {{ t('system.authorized.applyTrial') }}
               </span>
diff --git a/frontend/src/views/setting/system/user/index.vue b/frontend/src/views/setting/system/user/index.vue
index 61a96160c2..92c43ef900 100644
--- a/frontend/src/views/setting/system/user/index.vue
+++ b/frontend/src/views/setting/system/user/index.vue
@@ -193,7 +193,7 @@
     </template>
     <div v-if="importResult === 'success'" class="flex flex-col items-center justify-center">
       <icon-check-circle-fill class="text-[32px] text-[rgb(var(--success-6))]" />
-      <div class="mb-[8px] mt-[16px] text-[16px] font-medium leading-[24px] text-[var(--color-text-000)]">
+      <div class="mb-[8px] mt-[16px] text-[16px] font-medium leading-[24px] text-[var(--color-text-1)]">
         {{ t('system.user.importSuccess') }}
       </div>
       <div class="sub-text">
diff --git a/frontend/src/views/taskCenter/component/executeResultStatus.vue b/frontend/src/views/taskCenter/component/executeResultStatus.vue
index a9ce875e4b..a48d6bb570 100644
--- a/frontend/src/views/taskCenter/component/executeResultStatus.vue
+++ b/frontend/src/views/taskCenter/component/executeResultStatus.vue
@@ -8,7 +8,7 @@
         :self-style="{
           border: `1px solid ${methodColor}`,
           color: methodColor,
-          backgroundColor: 'white',
+          backgroundColor: 'var(--color-text-fff)',
         }"
       >
         {{ t('report.detail.script.error') }}
diff --git a/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue b/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
index bc72ab4f7d..4e59025bde 100644
--- a/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
+++ b/frontend/src/views/taskCenter/component/testPlanExecuteResultDrawer.vue
@@ -415,8 +415,9 @@
     .analysis {
       padding: 16px;
       border: 1px solid transparent;
+      background-color: var(--color-text-fff);
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply h-full rounded-xl bg-white;
+      @apply h-full rounded-xl;
       .charts {
         @apply absolute text-center;
 
diff --git a/frontend/src/views/test-plan/report/detail/component/config.vue b/frontend/src/views/test-plan/report/detail/component/config.vue
index 62ec7cd257..f2f7ce1044 100644
--- a/frontend/src/views/test-plan/report/detail/component/config.vue
+++ b/frontend/src/views/test-plan/report/detail/component/config.vue
@@ -403,7 +403,9 @@
   .report-name {
     padding: 0 16px;
     height: 56px;
-    @apply flex items-center justify-between border-b bg-white;
+    border-color: var(--color-text-n8);
+    background-color: var(--color-text-fff);
+    @apply flex items-center justify-between border-b;
   }
   .block-title {
     @apply mb-4 font-medium;
@@ -416,7 +418,7 @@
       width: 300px;
       border-radius: 0 0 10px 10px;
       box-sizing: border-box;
-      @apply bg-white;
+      background-color: var(--color-text-fff);
       .custom-card-list {
         @apply grid grid-cols-2 gap-2;
         .custom-card-item {
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
index 295b30d3f2..ee92ae9c78 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
@@ -345,7 +345,7 @@
   :deep(.arco-table-tr.test-set-expand-tr) {
     &:hover {
       > .arco-table-td {
-        background: white !important;
+        background: var(--color-text-fff) !important;
       }
     }
   }
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue b/frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue
index 810bf16b04..cad5ceb3d7 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue
@@ -179,7 +179,8 @@
   .test-set-wrapper {
     padding-bottom: 16px;
     border-radius: 12px;
-    @apply overflow-y-auto bg-white;
+    background-color: var(--color-text-fff);
+    @apply overflow-y-auto;
     .ms-scroll-bar();
   }
   :deep(.selected-row-class.arco-table-tr) {
diff --git a/frontend/src/views/test-plan/report/detail/component/viewReport.vue b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
index a92158ce33..950d6de3d9 100644
--- a/frontend/src/views/test-plan/report/detail/component/viewReport.vue
+++ b/frontend/src/views/test-plan/report/detail/component/viewReport.vue
@@ -673,7 +673,10 @@
   .report-name {
     padding: 0 16px;
     height: 56px;
-    @apply flex items-center justify-between border-b bg-white;
+    @apply flex items-center justify-between border-b;
+
+    border-color: var(--color-text-n8);
+    background-color: var(--color-text-fff);
   }
   .block-title {
     @apply mb-4 font-medium;
@@ -684,8 +687,9 @@
       padding: 24px;
       height: 250px;
       border: 1px solid transparent;
+      background-color: var(--color-text-fff);
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply rounded-xl bg-white;
+      @apply rounded-xl;
       .charts {
         @apply absolute text-center;
 
@@ -735,7 +739,7 @@
         left: 50%;
         transform: translateX(-50%);
         z-index: 9 !important;
-        background: white;
+        background: var(--color-text-fff);
         opacity: 0;
         @apply flex items-center justify-end;
         .actionList {
@@ -763,7 +767,8 @@
     display: flex;
     padding: 16px;
     border-radius: 12px;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgb(120 56 135 / 5%);
-    @apply flex-col bg-white;
+    @apply flex-col;
   }
 </style>
diff --git a/frontend/src/views/test-plan/report/detail/exportPDF.vue b/frontend/src/views/test-plan/report/detail/exportPDF.vue
index 63033756d4..aedc1eabfd 100644
--- a/frontend/src/views/test-plan/report/detail/exportPDF.vue
+++ b/frontend/src/views/test-plan/report/detail/exportPDF.vue
@@ -1040,10 +1040,11 @@
     }
   }
   .report-header {
-    @apply mb-4 flex items-center bg-white;
+    @apply mb-4 flex items-center;
 
     padding: 16px;
     border-radius: var(--border-radius-large);
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgb(120 56 135 / 5%);
   }
   .block-title {
@@ -1055,8 +1056,9 @@
       padding: 24px;
       height: 250px;
       border: 1px solid transparent;
+      background-color: var(--color-text-fff);
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply rounded-xl bg-white;
+      @apply rounded-xl;
       .charts {
         @apply absolute text-center;
 
@@ -1100,7 +1102,7 @@
       left: 50%;
       transform: translateX(-50%);
       z-index: 9 !important;
-      background: white;
+      background: var(--color-text-fff);
       opacity: 0;
       @apply flex items-center justify-end;
       .actionList {
@@ -1121,8 +1123,9 @@
     display: flex;
     padding: 16px;
     border-radius: 12px;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgb(120 56 135 / 5%);
-    @apply flex-col bg-white;
+    @apply flex-col;
   }
   :deep(.arco-table-body) {
     max-height: 100% !important;
diff --git a/frontend/src/views/test-plan/testPlan/detail/executeResultDrawer.vue b/frontend/src/views/test-plan/testPlan/detail/executeResultDrawer.vue
index 72df0e6345..23cf87e3fb 100644
--- a/frontend/src/views/test-plan/testPlan/detail/executeResultDrawer.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/executeResultDrawer.vue
@@ -3,7 +3,9 @@
     <template #title>
       <div class="flex flex-1 items-center gap-[8px] overflow-hidden">
         <a-tag :color="executeResultMap[detail.result]?.color">
-          {{ t(executeResultMap[detail.result]?.label || '-') }}
+          <div class="text-[var(--color-text-1)]">
+            {{ t(executeResultMap[detail.result]?.label || '-') }}
+          </div>
         </a-tag>
         <div class="one-line-text flex-1">{{ detail.taskName }}</div>
       </div>
diff --git a/frontend/src/views/workbench/components/notData.vue b/frontend/src/views/workbench/components/notData.vue
index 38832d61c7..235eb942f4 100644
--- a/frontend/src/views/workbench/components/notData.vue
+++ b/frontend/src/views/workbench/components/notData.vue
@@ -64,7 +64,8 @@
     border: 1px solid var(--color-border-2);
     border-radius: 4px;
     color: var(--color-text-4);
-    @apply flex items-center justify-center bg-white;
+    background-color: var(--color-text-fff);
+    @apply flex items-center justify-center;
   }
   .no-config-svg {
     margin: 0 auto 24px;
diff --git a/frontend/src/views/workbench/homePage/components/cardSettingDrawer.vue b/frontend/src/views/workbench/homePage/components/cardSettingDrawer.vue
index a3a2553011..a8ba3a3ec1 100644
--- a/frontend/src/views/workbench/homePage/components/cardSettingDrawer.vue
+++ b/frontend/src/views/workbench/homePage/components/cardSettingDrawer.vue
@@ -204,8 +204,8 @@
     .setting-wrapper-config {
       padding-left: 12px;
       width: 300px;
+      background-color: var(--color-text-fff);
       box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-      @apply bg-white;
     }
     .setting-wrapper-content {
       padding: 16px;
@@ -218,8 +218,9 @@
   .card-item {
     padding: 16px;
     border-radius: 4px;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-    @apply flex items-center justify-between bg-white;
+    @apply flex items-center justify-between;
     .card-item-text {
       @apply flex items-center gap-2;
     }
diff --git a/frontend/src/views/workbench/homePage/components/cardSettingList.vue b/frontend/src/views/workbench/homePage/components/cardSettingList.vue
index e55ebe50f1..a3984f846f 100644
--- a/frontend/src/views/workbench/homePage/components/cardSettingList.vue
+++ b/frontend/src/views/workbench/homePage/components/cardSettingList.vue
@@ -248,7 +248,7 @@
     .ms-scroll-bar();
     :deep(.card-config-item) {
       padding: 0;
-      background: white;
+      background: var(--color-text-fff);
     }
     .card-config-menu-item {
       padding: 8px 16px 8px 10px;
@@ -283,14 +283,14 @@
       padding: 0 !important;
       .arco-menu-inline-header {
         &:hover {
-          background: white !important;
+          background: var(--color-text-fff) !important;
         }
       }
       .arco-menu-selected {
         font-weight: normal !important;
         color: var(--color-text-1) !important;
         &:not(.arco-menu-inline-header) {
-          background-color: white !important;
+          background-color: var(--color-text-fff) !important;
         }
       }
     }
diff --git a/frontend/src/views/workbench/homePage/index.vue b/frontend/src/views/workbench/homePage/index.vue
index e6056153aa..12304de499 100644
--- a/frontend/src/views/workbench/homePage/index.vue
+++ b/frontend/src/views/workbench/homePage/index.vue
@@ -385,8 +385,9 @@
   .card-wrapper {
     padding: 24px;
     min-width: 356px;
+    background-color: var(--color-text-fff);
     box-shadow: 0 0 10px rgba(120 56 135/ 5%);
-    @apply rounded-xl bg-white;
+    @apply rounded-xl;
     &.card-min-height {
       min-height: 356px;
     }