feat(theme): darkTheme (#34438)

Co-authored-by: baiqi <qi.bai@fit2cloud.com>

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 () => {

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;
+    background-color: var(--color-text-fff);
+  }
 }
 input::placeholder {
-    color: var(--color-text-brand);
+  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;
+}

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);
     }
   }
 

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: '';

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 {

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 {

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;

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;

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;
       }

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>

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"

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"

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;
 

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;
 

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"

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>

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;

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;

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;

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;
     }

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 {

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));

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 {

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));

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;
   }

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

frontend/src/components/pure/flow-editor/index.vue

@@ -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>

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);

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 {

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,

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)"
               >

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>

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;
           }

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);

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 {

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,

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;
       }
     }
   }

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;

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;

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 = {

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;
   }
 }

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 {

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,

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;

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));
     }

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;

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();

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>

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)'

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>

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 {

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 });

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',

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': '语言',

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'],
   },
 });
 

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 {

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);
+}

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"

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>

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>

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) {

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;

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"

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>

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;

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 {

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 {

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;

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 {

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 }}

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);

frontend/src/views/api-test/report/component/caseReportCom.vue

@@ -436,14 +436,17 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
+      background: var(--color-text-fff);
-      @apply mb-4 bg-white;
+      @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 {

frontend/src/views/api-test/report/component/caseReportDrawer.vue

@@ -210,13 +210,17 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
+      background: var(--color-text-fff);
-      @apply mb-4 bg-white;
+      @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 {

frontend/src/views/api-test/report/component/reportDetailDrawer.vue

@@ -205,8 +205,10 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
+      background: var(--color-text-fff);
-      @apply mb-4 bg-white;
+      @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 {

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') }}

frontend/src/views/api-test/report/component/scenarioCom.vue

@@ -353,8 +353,10 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
+      background: var(--color-text-fff);
-      @apply mb-4 bg-white;
+      @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 {

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;

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;

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 />

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 />

frontend/src/views/api-test/report/shareCaseIndex.vue

@@ -61,14 +61,18 @@
       padding: 0 16px;
       height: 54px;
       border-radius: 4px;
-      background: white;
+      background: var(--color-text-fff);
-      @apply mb-4 bg-white;
+      @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 {

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;

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;

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;

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 {

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

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;
           }

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;
+        @apply h-full overflow-auto;
-        .ms-scroll-bar();
 
         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;

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;
+    @apply h-full overflow-auto;
-    .ms-scroll-bar();
 
     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>

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 }}

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 {

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;
       }

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);

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);

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"

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"

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);
       }
     }
   }

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 ref="wrapperRef" class="bg-[var(--color-text-fff)]">
-        <div class="header relative h-[48px] border-b pl-2">
+        <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"

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);
       }
     }
   }

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;