diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index 29290eec5b..aad83b84da 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -262,7 +262,17 @@ export default {
   padding-top: 5px;
   :hover {
     cursor: pointer;
+
     background-color: #f4f4f5;
   }
 }
+
+.blackTheme .msg-foot-class {
+  padding-top: 5px;
+  :hover {
+    cursor: pointer;
+
+    background-color: #171422;
+  }
+}
 </style>
diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index 5a1e319f18..873117ae63 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -155,7 +155,7 @@ export default {
             cursor: pointer;
 
             &:hover {
-                background-color: #f5f7fa;
+                background-color: var(--background-color-base, #f5f7fa);
             }
         }
     }
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index 339f9f3268..36e4c13da2 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -175,7 +175,7 @@ export default {
         cursor: pointer;
 
         &:hover {
-          background-color: #f5f7fa;
+          background-color: var(--background-color-base, #f5f7fa);
         }
       }
     }
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue b/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
index 7e1376cbcf..3144ff9c82 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenuTest.vue
@@ -173,7 +173,7 @@ export default {
         cursor: pointer;
 
         &:hover {
-          background-color: #f5f7fa;
+         background-color: var(--background-color-base, #f5f7fa);
         }
       }
     }
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index f78fe8bc5e..38ec468d53 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -34,7 +34,7 @@
         </div>
       </template>
 
-      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
+      <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;" trigger="click">
         <span class="el-dropdown-link" style="color: var(--TopTextColor);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
           {{ name }}
           <i class="el-icon-arrow-down el-icon--right" />
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index dd52aecd24..36e3cc149a 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,10 +1,10 @@
 
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-.defaultTheme {
+/* .defaultTheme {
   @import './theme/default.scss';
   @import "~element-ui/packages/theme-chalk/src/index";
-}
+} */
 .blackTheme {
   @import './theme/dark.scss';
   @import "~element-ui/packages/theme-chalk/src/index";
@@ -360,6 +360,8 @@ div:focus {
   z-index: 10000 !important;
 }
 
+
+
 ::-webkit-scrollbar-thumb {
   width: 10px;
   height: 10px;
@@ -367,6 +369,7 @@ div:focus {
   border-radius: 4px;
 }
 
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
@@ -455,9 +458,9 @@ div:focus {
     border-color: var(--border-color-input) !important;
 }
 
-.blackTheme .el-popover {
+/* .blackTheme .el-popover {
     background-color: var(--MainBG);
-}
+} */
 
 .blackTheme .main-area-input {
     input.el-input__inner {
@@ -497,12 +500,13 @@ div:focus {
     background-color: var(--MainBG) !important;
     color: var(--Main) !important;
 }
-.blackTheme .el-dialog {
+/* .blackTheme .el-dialog {
     background: var(--ContentBG) !important;
     color: var(--TextPrimary) !important;
 }
+ */
 .blackTheme .el-dialog__title {
-    color: var(--TextPrimary) !important;
+    color: #ffffff !important;
 }
 
 .blackTheme .title-text {
@@ -557,12 +561,60 @@ div:focus {
 .blackTheme .el-submenu__title {
     color: var(--TextPrimary) ;
 }
+.blackTheme .el-drawer__body {
+    background-color: var(--MainContentBG);
+}
+
+.blackTheme .el-select-dropdown__item.hover {
+    background-color: #171B22 !important;
+}
+.blackTheme .el-select-dropdown__item:hover {
+    background-color: #171B22 !important;
+}
+
+.blackTheme .el-dropdown-menu__item:not(.is-disabled):hover {
+    background-color: #171B22 !important;
+}
+
+.blackTheme .el-dropdown-menu__item:focus {
+    background-color: #171B22 !important;
+}
+
+
+.blackTheme .el-dropdown-menu__item--divided:before {
+    background-color: #000000 !important;
+}
+
+
+.blackTheme .el-card__header {
+    border-color: var(--TableBorderColor) !important;
+}
+
+.blackTheme .CodeMirror {
+    background-color: #000000 ;
+    color: #ffffff;
+}
+.blackTheme .CodeMirror-code {
+    background-color: transparent;
+}
+
+.blackTheme .CodeMirror-gutters {
+    background-color: #000000 ;
+}
+
+.blackTheme .el-radio-button__inner {
+    background-color: var(--TableBG);
+    color: var(--TableColor);
+    border: var(--TableBorder);
+}
+
+.blackTheme .el-loading-mask {
+    background-color: rgb(135 131 131 / 70%);
+}
+
+.blackTheme >>> ::-webkit-scrollbar-thumb {
+    background: #38393a !important;
+}
+
 
-/* .chart-radio-div {
-    label.el-radio {
-        span.el-radio__input {
-            display: none !important;
-        }
-    }
-} */
 
diff --git a/frontend/src/styles/theme/dark.scss b/frontend/src/styles/theme/dark.scss
index 3ca0793b42..1ca486bd9e 100644
--- a/frontend/src/styles/theme/dark.scss
+++ b/frontend/src/styles/theme/dark.scss
@@ -16,13 +16,13 @@ $--border-color-light: #495865;
 $--border-color-lighter: #495865;
 $--border-color-extra-light: #495865;
 
-$--color-white: #FFFFFF;
-$--color-black: #000000;
-
-$--color-text-regular: #fff;
+$--color-white: #21333b;
+$--color-black: #FFFFFF;
 
 $--background-color-base: #171b22;
 
+
+
 // 与CSS原生变量映射
 #app {
   --Main:#2681ff;
@@ -53,6 +53,11 @@ $--background-color-base: #171b22;
   --TableColor: #acbac3;
   --TableBorder: .05rem solid #495865;
   --TableBorderColor: #495865;
+
+  --background-color-base: #171b22;
+
+
+  
 }
 
 
diff --git a/frontend/src/styles/theme/default.scss b/frontend/src/styles/theme/default.scss
deleted file mode 100644
index e0cfcefc32..0000000000
--- a/frontend/src/styles/theme/default.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/* 改变主题色变量 */
-$--color-primary: #409EFF;
-$--color-success: #67C23A;
-$--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
-$--color-info: #909399;
-
-$--color-text-primary: #303133;
-$--color-text-regular: #606266;
-$--color-text-secondary: #909399;
-$--color-text-placeholder: #C0C4CC;
-
-$--border-color-base: #DCDFE6;
-$--border-color-light: #E4E7ED;
-$--border-color-lighter: #EBEEF5;
-$--border-color-extra-light: #F2F6FC;
-
-$--color-white: #FFFFFF;
-$--color-black: #000000;
-
-
-$--background-color-base: #F5F7FA;
-
-
-// 与CSS原生变量映射
-#app {
-  --Main:#00B9AD;
-  --test:#FF9227;
-  --color-primary: #00B9AD;
-  --MainBG: #FFFFFF;
-
-
-  --border-color-input: #DCDFE6;
-  --border-color-input-hovor: #C0C4CC;
-}
\ No newline at end of file
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 4daf893549..34a27cb828 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1672,7 +1672,7 @@ export default {
 
   .blackTheme .item-dimension {
     border: solid 1px ;
-    border-color: var(--MainBorderColor);
+    border-color: var(--TableBorderColor);
     color: var(--TextPrimary);
     background-color: var(--MainBG);
   }
@@ -1710,7 +1710,7 @@ export default {
   .blackTheme .item-quota {
 
     border: solid 1px ;
-    border-color: var(--MainBorderColor);
+    border-color: var(--TableBorderColor);
     color: var(--TextPrimary);
     background-color: var(--MainBG);
 
@@ -1802,7 +1802,7 @@ export default {
   }
 
   .blackTheme .attr-style{
-    border-color: var(--MainBorderColor) !important;
+    border-color: var(--TableBorderColor) !important;
     color: var(--TextPrimary);
   }
 
@@ -1873,7 +1873,7 @@ export default {
   .blackTheme .field-height{
 
     border-top: 1px solid ;
-    border-color: var(--MainBorderColor) !important;
+    border-color: var(--TableBorderColor) !important;
   }
   .padding-tab{
     padding: 0;
@@ -1899,7 +1899,7 @@ export default {
   }
   .blackTheme .drag-block-style{
     border: 1px solid ;
-    border-color: var(--MainBorderColor);
+    border-color: var(--TableBorderColor);
     background-color: var(--ContentBG);
   }
 
@@ -1918,16 +1918,16 @@ export default {
   }
 
   .blackTheme .theme-border-class {
-    border-color: var(--MainBorderColor) !important;
+    border-color: var(--TableBorderColor) !important;
     color: var(--TextPrimary) !important;
     background-color: var(--ContentBG);
   }
   .blackTheme .padding-lr {
-    border-color: var(--MainBorderColor) !important;
+    border-color: var(--TableBorderColor) !important;
   }
   .blackTheme .theme-item-class {
       background-color: var(--MainBG) !important;
-      border-color: var(--MainBorderColor) !important;
+      border-color: var(--TableBorderColor) !important;
   }
 
 </style>
diff --git a/frontend/src/views/dataset/add/AddCustom.vue b/frontend/src/views/dataset/add/AddCustom.vue
index f3bcac3f3e..8906e24097 100644
--- a/frontend/src/views/dataset/add/AddCustom.vue
+++ b/frontend/src/views/dataset/add/AddCustom.vue
@@ -1,6 +1,6 @@
 <template>
   <el-col>
-    <el-row style="height: 26px;">
+    <el-row style="height: 26px;" class="title-text">
       <span style="line-height: 26px;">
         {{ param.tableId?$t('dataset.edit_custom_table'):$t('dataset.add_custom_table') }}
       </span>
@@ -292,6 +292,11 @@ export default {
     height: calc(100vh - 56px - 15px - 26px - 25px - 43px);
   }
 
+  .blackTheme .panel-height{
+    height: calc(100vh - 56px - 15px - 26px - 25px - 43px);
+    border-color: var(--TableBorderColor) !important;
+  }
+
   .span-number{
     color: #0a7be0;
   }
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index 39bcafa005..0229c1e0d3 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row style="display: flex;flex-direction: column;height: 100%">
-    <el-row style="height: 26px;">
+    <el-row style="height: 26px;" class="title-text">
       <span style="line-height: 26px;">
         {{ $t('dataset.add_db_table') }}
       </span>
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 97de738753..4ec282d36b 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,18 +1,18 @@
 <template>
   <el-col>
     <el-row>
-      <el-row style="height: 26px;">
+      <el-row style="height: 26px;" class="title-text">
         <span style="line-height: 26px;">
           {{ param.tableId?$t('dataset.edit_excel_table'):$t('dataset.add_excel_table') }}
         </span>
         <span style="line-height: 26px;">
           <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="bottom">
             <div slot="content">
-              {{$t('dataset.excel_info_1')}}<br/>
-              {{$t('dataset.excel_info_2')}}<br/>
-              {{$t('dataset.excel_info_3')}}
+              {{ $t('dataset.excel_info_1') }}<br>
+              {{ $t('dataset.excel_info_2') }}<br>
+              {{ $t('dataset.excel_info_3') }}
             </div>
-            <i class="el-icon-info" style="cursor: pointer;"></i>
+            <i class="el-icon-info" style="cursor: pointer;" />
           </el-tooltip>
         </span>
         <el-row style="float: right">
@@ -26,11 +26,10 @@
       </el-row>
       <el-divider />
 
-
       <el-row style="margin-top: 10px;">
 
         <el-container>
-          <el-aside width="200px"  >
+          <el-aside width="200px">
             <el-row>
               <el-col style="width: 200px;">
                 <el-form :inline="true" size="mini" class="row-style">
@@ -58,19 +57,18 @@
               </el-col>
             </el-row>
 
-
-            <el-tree ref="tree"
-                     :data="excelData"
-                     :default-expanded-keys=defaultExpandedKeys
-                     :default-checked-keys=defaultCheckedKeys
-                     node-key="id"
-                    :props="props"
-                    show-checkbox
-                    highlight-current
-                    @node-click="handleNodeClick"
-                    @check-change="handleCheckChange">
-            </el-tree>
-
+            <el-tree
+              ref="tree"
+              :data="excelData"
+              :default-expanded-keys="defaultExpandedKeys"
+              :default-checked-keys="defaultCheckedKeys"
+              node-key="id"
+              :props="props"
+              show-checkbox
+              highlight-current
+              @node-click="handleNodeClick"
+              @check-change="handleCheckChange"
+            />
 
           </el-aside>
 
@@ -79,13 +77,13 @@
               <el-row>
                 <el-col style="width: 500px;">
                   <el-form :inline="true" size="mini" class="row-style">
-                    <el-form-item class="form-item" :label="$t('dataset.name')" v-show="!param.tableId">
-                      <el-input  v-model="sheetObj.datasetName" :placeholder="$t('commons.name')" @change="changeDatasetName" />
+                    <el-form-item v-show="!param.tableId" class="form-item" :label="$t('dataset.name')">
+                      <el-input v-model="sheetObj.datasetName" :placeholder="$t('commons.name')" @change="changeDatasetName" />
                     </el-form-item>
                     <el-form-item>
                       <div>
                         <span>{{ $t('dataset.data_preview') }}</span>
-                        <span style="font-size: 12px;color: #3d4d66;">（{{ $t('dataset.preview_100_data') }}）</span>
+                        <span class="limit-length-data">（{{ $t('dataset.preview_100_data') }}）</span>
                       </div>
                     </el-form-item>
                   </el-form>
@@ -94,7 +92,7 @@
             </el-header>
             <el-main>
 
-              <div class="text item" >
+              <div class="text item">
                 <ux-grid
                   ref="plxTable"
                   size="mini"
@@ -112,7 +110,7 @@
                     :resizable="true"
                   >
                     <template slot="header" slot-scope="scope">
-                      <span  style="display: flex;align-items: center;">
+                      <span style="display: flex;align-items: center;">
                         <span style="display: inline-block;font-size: 12px;">
                           <div style="display: inline-block;">
                             <el-select v-model="field.fieldType" size="mini" style="display: inline-block;width: 120px;" @change="changeDatasetName">
@@ -136,9 +134,9 @@
                           {{ field.remarks }}
                         </span>
                       </span>
-<!--                      <span v-else style="font-size: 12px;">-->
-<!--                        {{ field.remarks }}-->
-<!--                      </span>-->
+                      <!--                      <span v-else style="font-size: 12px;">-->
+                      <!--                        {{ field.remarks }}-->
+                      <!--                      </span>-->
                     </template>
                   </ux-table-column>
                 </ux-grid>
@@ -176,7 +174,7 @@ export default {
   },
   data() {
     return {
-      sheetObj: {datasetName: " ", fields: []},
+      sheetObj: { datasetName: ' ', fields: [] },
       sheets: [],
       data: [],
       mode: '1',
@@ -220,20 +218,20 @@ export default {
   },
   methods: {
     handleCheckChange(data, checked, indeterminate) {
-      if(checked){
+      if (checked) {
         this.defaultCheckedKeys.push(data.id)
         this.handleNodeClick(data)
-      }else {
+      } else {
         var index = this.defaultCheckedKeys.findIndex(id => {
-          if ( id == data.id) {
-            return true;
+          if (id == data.id) {
+            return true
           }
         })
-        this.defaultCheckedKeys.splice(index,1)
+        this.defaultCheckedKeys.splice(index, 1)
       }
     },
     handleNodeClick(data) {
-      if(data.sheet){
+      if (data.sheet) {
         this.sheetObj = data
         this.fields = data.fields
         this.jsonArray = data.jsonArray
@@ -241,11 +239,11 @@ export default {
         this.$refs.plxTable.reloadData(datas)
       }
     },
-    changeDatasetName(){
-      for(var i=0;i<this.excelData.length;i++){
-        if(this.excelData[i].excelId==this.sheetObj.sheetExcelId){
-          for(var j=0;j<this.excelData[i].sheets.length;j++){
-            if(this.excelData[i].sheets[j].excelId==this.sheetObj.sheetId){
+    changeDatasetName() {
+      for (var i = 0; i < this.excelData.length; i++) {
+        if (this.excelData[i].excelId == this.sheetObj.sheetExcelId) {
+          for (var j = 0; j < this.excelData[i].sheets.length; j++) {
+            if (this.excelData[i].sheets[j].excelId == this.sheetObj.sheetId) {
               this.excelData[i].sheets[j] = this.sheetObj
             }
           }
@@ -287,19 +285,18 @@ export default {
       this.defaultExpandedKeys.push(response.data.id)
       this.defaultCheckedKeys.push(response.data.sheets[0].id)
       this.$nextTick(() => {
-        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys);
-      });
+        this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys)
+      })
       this.fileList = fileList
     },
 
     save() {
-
-      var validate = true;
+      var validate = true
       var selectedSheet = []
       var sheetFileMd5 = []
       var selectNode = this.$refs.tree.getCheckedNodes()
-      for(var i=0;i<selectNode.length;i++){
-        if(selectNode[i].sheet){
+      for (var i = 0; i < selectNode.length; i++) {
+        if (selectNode[i].sheet) {
           if (!selectNode[i].datasetName || selectNode[i].datasetName === '') {
             validate = false
             this.$message({
@@ -322,12 +319,12 @@ export default {
           sheetFileMd5.push(selectNode[i].fieldsMd5)
         }
       }
-      if(selectedSheet.length == 0){
+      if (selectedSheet.length == 0) {
         this.$message.warning(this.$t('dataset.ple_select_excel'))
         return
       }
-      if(!validate){
-        return;
+      if (!validate) {
+        return
       }
 
       let table = {}
@@ -353,7 +350,7 @@ export default {
           editType: this.param.editType ? this.param.editType : 0
         }
       }
-      if(new Set(sheetFileMd5).size !== sheetFileMd5.length && !this.param.tableId){
+      if (new Set(sheetFileMd5).size !== sheetFileMd5.length && !this.param.tableId) {
         this.$confirm(this.$t('dataset.merge_msg'), this.$t('dataset.merge_title'), {
           distinguishCancelAndClose: true,
           confirmButtonText: this.$t('dataset.merge'),
@@ -366,7 +363,7 @@ export default {
             this.cancel()
           })
         }).catch(action => {
-          if(action === 'close'){
+          if (action === 'close') {
             return
           }
           table.mergeSheet = false
@@ -374,8 +371,8 @@ export default {
             this.$emit('saveSuccess', table)
             this.cancel()
           })
-        });
-      }else {
+        })
+      } else {
         post('/dataset/table/update', table).then(response => {
           this.$emit('saveSuccess', table)
           this.cancel()
@@ -439,12 +436,17 @@ export default {
   }
 
   .el-header {
-    background-color: rgb(241, 243, 248);
-    color: #333;
+    background-color: var(--MainContentBG, rgb(241, 243, 248));
+    color: var(--TextActive, #333);
     line-height: 30px;
   }
 
   .el-main {
     padding: 0px
   }
+
+  .limit-length-data {
+      font-size: 12px;
+      color: var(--TableColor, #3d4d66);
+  }
 </style>
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 15921a9e62..32db00b933 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col>
     <el-row>
-      <el-row style="height: 26px;">
+      <el-row style="height: 26px;" class="title-text">
         <span style="line-height: 26px;">
           {{ param.tableId?$t('dataset.edit_sql'):$t('dataset.add_sql_table') }}
         </span>
@@ -145,7 +145,7 @@ export default {
         theme: 'solarized',
         hintOptions: { // 自定义提示选项
           completeSingle: false // 当匹配只有一项的时候是否自动补全
-        },
+        }
       },
       data: [],
       fields: [],
diff --git a/frontend/src/views/dataset/common/DatasetCustomField.vue b/frontend/src/views/dataset/common/DatasetCustomField.vue
index 1de987d639..f93831d808 100644
--- a/frontend/src/views/dataset/common/DatasetCustomField.vue
+++ b/frontend/src/views/dataset/common/DatasetCustomField.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col>
     <el-row style="height: 25px;">
-      <span class="table-name">{{ table.name }}</span>
+      <span class="table-name title-text">{{ table.name }}</span>
     </el-row>
     <el-divider />
     <el-checkbox v-model="checkAll" :disabled="!(fields.length > 0)" :indeterminate="isIndeterminate" style="font-weight: 400;" @change="handleCheckAllChange">{{ $t('dataset.check_all') }}</el-checkbox>
diff --git a/frontend/src/views/dataset/data/CalcFieldEdit.vue b/frontend/src/views/dataset/data/CalcFieldEdit.vue
index da5ec00115..5b468dc0fa 100644
--- a/frontend/src/views/dataset/data/CalcFieldEdit.vue
+++ b/frontend/src/views/dataset/data/CalcFieldEdit.vue
@@ -430,6 +430,13 @@ export default {
     text-overflow: ellipsis;
   }
 
+  .blackTheme .item-dimension {
+    border: solid 1px ;
+    border-color: #495865;
+    color: #F2F6FC;
+    background-color: var(--MainBG);
+  }
+
   .item-dimension + .item-dimension {
     margin-top: 2px;
   }
@@ -441,6 +448,12 @@ export default {
     cursor: pointer;
   }
 
+  .blackTheme .item-dimension:hover {
+    /* color: var(--Main); */
+    background: var(--ContentBG);
+    /* cursor: pointer; */
+  }
+
   .item-quota {
     padding: 2px 10px;
     margin: 2px 2px 0 2px;
@@ -456,6 +469,15 @@ export default {
     text-overflow: ellipsis;
   }
 
+  .blackTheme .item-quota {
+
+    border: solid 1px ;
+    border-color: #495865;
+    color: #F2F6FC;
+    background-color: var(--MainBG);
+
+  }
+
   .item-quota + .item-quota {
     margin-top: 2px;
   }
@@ -466,6 +488,11 @@ export default {
     border-color: #b2d3a3;
     cursor: pointer;
   }
+
+  .blackTheme .item-quota:hover {
+    background: var(--ContentBG);
+  }
+
   span{
     font-size: 12px;
   }
@@ -478,11 +505,22 @@ export default {
     word-break: break-word;
     border: solid 1px #eee;
   }
+
+  .blackTheme .function-style {
+    border: solid 1px ;
+    border-color: #495865;
+    color: #F2F6FC;
+    background-color: var(--MainBG);
+  }
   .function-style:hover {
     background: #e8f4ff;
     border-color: #a3d3ff;
     cursor: pointer;
   }
+  .blackTheme .function-style:hover {
+    color: #1890ff;
+    background: var(--ContentBG);
+  }
   .function-height{
     height: calc(100% - 50px);
     overflow: auto;
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 4077f02945..688cd763c7 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -199,7 +199,7 @@ export default {
 }
 
 .login-background {
-  background-color: $--background-color-base;
+  background-color: var(--MainBG, $--background-color-base);
   height: 100vh;
   @include login-center;
 }
@@ -208,7 +208,7 @@ export default {
   min-width: 900px;
   width: 1280px;
   height: 520px;
-  background-color: #FFFFFF;
+  background-color: var(--MainContentBG, #FFFFFF);
   @media only screen and (max-width: 1280px) {
     width: 900px;
     height: 380px;
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index 942b2a94a4..79f7e31389 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -179,7 +179,7 @@ export default {
   .filter-header-text {
     font-size: 14px;
     max-width: 100%;
-    color: gray;
+    color: var(--TextPrimary, gray);
     text-align: left;
     white-space: pre;
     text-overflow: ellipsis;
@@ -217,7 +217,7 @@ export default {
         color: #3685f2;
     }
     .filter-widget-text {
-        color: #3d4d66;
+         color: var(--TextActive, #3d4d66);
     }
   }
   .time-filter:hover {
@@ -238,7 +238,7 @@ export default {
         color: #23beef;
     }
     .filter-widget-text {
-        color: #3d4d66;
+        color: var(--TextActive, #3d4d66);
     }
   }
   .text-filter:hover {
@@ -258,7 +258,7 @@ export default {
         color: #37b4aa;
     }
     .filter-widget-text {
-        color: #3d4d66;
+         color: var(--TextActive, #3d4d66);
     }
   }
   .tree-filter:hover {
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 64841972f4..2e556c1578 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -9,37 +9,37 @@
     <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item :title="$t('panel.panel')" name="panel">
-<!--          <el-row class="shape-item">-->
-<!--            <span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>-->
-<!--            &lt;!&ndash;            <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />&ndash;&gt;-->
-<!--            <el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">-->
-<!--              <el-radio-button :label="true">-->
-<!--                {{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />-->
-<!--              </el-radio-button>-->
-<!--              <el-radio-button :label="false">-->
-<!--                {{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />-->
-<!--              </el-radio-button>-->
-<!--            </el-radio-group>-->
-<!--          </el-row>-->
-          <el-row style="background-color: #f7f8fa; margin: 5px">
+          <!--          <el-row class="shape-item">-->
+          <!--            <span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>-->
+          <!--            &lt;!&ndash;            <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />&ndash;&gt;-->
+          <!--            <el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">-->
+          <!--              <el-radio-button :label="true">-->
+          <!--                {{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />-->
+          <!--              </el-radio-button>-->
+          <!--              <el-radio-button :label="false">-->
+          <!--                {{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />-->
+          <!--              </el-radio-button>-->
+          <!--            </el-radio-group>-->
+          <!--          </el-row>-->
+          <el-row class="selector-div">
             <background-selector class="attr-selector" />
             <component-gap class="attr-selector" />
             <Panel-Refresh-Time class="attr-selector" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
-          <el-row style="background-color: #f7f8fa; margin: 5px">
+          <el-row class="selector-div">
             <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
             <panel-background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
-          <el-row style="background-color: #f7f8fa; margin: 5px">
+          <el-row class="selector-div">
             <panel-color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('panel.table')" name="table">
-          <el-row style="background-color: #f7f8fa; margin: 5px">
+          <el-row class="selector-div">
             <panel-color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
           </el-row>
         </el-collapse-item>
@@ -180,5 +180,12 @@ export default {
     align-items: center;
     z-index: 10001;
   }
+  .blackTheme .attr-selector{
+    background-color: var(--MainBG)
+  }
+  .selector-div {
+      background-color: var(--MainBG, #f7f8fa);
+      margin: 5px
+  }
 
 </style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 8ed5f49081..97b5477a45 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -27,7 +27,7 @@
             <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
               <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
             </div>
-            <div style="position: relative; margin: 18px auto 16px;">
+            <div class="button-text" style="position: relative; margin: 18px auto 16px;">
               <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                 {{ $t('panel.view') }}
               </div>
@@ -42,7 +42,7 @@
                 <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
                   <el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
                 </div>
-                <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
+                <div class="button-text" style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
                   <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                     {{ $t('panel.module') }}
                   </div>
@@ -59,7 +59,7 @@
                 <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
                   <el-button circle :class="show&&showIndex===3? 'button-show':'button-closed'" class="el-icon-brush" size="mini" @click="showPanel(3)" />
                 </div>
-                <div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
+                <div class="button-text" style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
                   <div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                     {{ $t('panel.other_module') }}
                   </div>
@@ -844,7 +844,7 @@ export default {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
   transition: all .25s cubic-bezier(.7, .3, .1, 1);
   transform: translate(100%);
-  background: #fff;
+  background: var(--SiderBG, #fff);
   z-index: 1003;
 }
 
@@ -884,16 +884,16 @@ export default {
   overflow-y: auto;
 }
 .button-show{
-    background-color: #ebf2fe!important;
+    background-color: var(--MainContentBG, #ebf2fe)!important;
 }
 
 .button-closed{
-  background-color: #ffffff!important;
+  background-color: var(--SiderBG, #ffffff)!important;
 }
 .style-aside{
   width: 250px;
   max-width:250px!important;
-  border: 1px solid #E6E6E6;
+  border: 1px solid var(--TableBorderColor, #E6E6E6);
   padding: 10px;
   transition: all 0.3s;
 
@@ -929,5 +929,8 @@ export default {
   .style-hidden{
     overflow-x: hidden;
   }
+.button-text {
+    color: var(--TextActive);
+}
 
 </style>
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index af9c4f8d90..779370a044 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -798,11 +798,11 @@ export default {
     // color: #fff;
   }
   .filter-db-row:hover {
-      background-color: #f5f7fa !important;
+      background-color: var(--background-color-base, #f5f7fa) !important;
       cursor: pointer;
   }
   .filter-db-row-checked:hover {
-      background-color: #f5f7fa !important;
+      background-color: var(--background-color-base, #f5f7fa) !important;
       color: inherit;
       cursor: pointer;
       i {
diff --git a/frontend/src/views/panel/filter/index.vue b/frontend/src/views/panel/filter/index.vue
index aa23f51e24..6a45b30ecf 100644
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@@ -142,7 +142,7 @@ export default {
   .filter-header-text {
     font-size: 14px;
     max-width: 100%;
-    color: gray;
+    color: var(--TextPrimary, gray);
     text-align: left;
     white-space: pre;
     text-overflow: ellipsis;
@@ -180,7 +180,7 @@ export default {
         color: #3685f2;
     }
     .filter-widget-text {
-        color: #3d4d66;
+        color: var(--TextActive, #3d4d66);
     }
   }
   .time-filter:hover {
@@ -201,7 +201,7 @@ export default {
         color: #23beef;
     }
     .filter-widget-text {
-        color: #3d4d66;
+        color: var(--TextActive, #3d4d66);
     }
   }
   .text-filter:hover {
@@ -221,7 +221,7 @@ export default {
         color: #37b4aa;
     }
     .filter-widget-text {
-        color: #3d4d66;
+       color: var(--TextActive, #3d4d66);
     }
   }
   .tree-filter:hover {
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index ef53ae2cca..fce54b9d16 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col>
-    <el-row style="margin-top: 10px;" v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-      <complex-table :data="data" :columns="columns" local-key="datasetTask" :transCondition="transCondition" :search-config="searchConfig" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
+    <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="margin-top: 10px;">
+      <complex-table :data="data" :columns="columns" local-key="datasetTask" :trans-condition="transCondition" :search-config="searchConfig" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
         <template #toolbar>
           <el-button icon="el-icon-circle-plus-outline" @click="selectDataset">{{ $t('dataset.task.create') }}</el-button>
         </template>
@@ -34,7 +34,7 @@
         <el-table-column prop="lastExecStatus" :label="$t('dataset.task.last_exec_status')">
           <template slot-scope="scope">
             <span v-if="scope.row.lastExecStatus === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
-            <span v-if="scope.row.lastExecStatus === 'Underway'" style="color: blue">
+            <span v-if="scope.row.lastExecStatus === 'Underway'" class="blue-color">
               <i class="el-icon-loading" />
               {{ $t('dataset.underway') }}
             </span>
@@ -63,10 +63,10 @@
             <span v-if="scope.row.status === 'Stopped'" style="color: red">
               <div type="danger" style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
             </span>
-            <span v-if="scope.row.status === 'Pending'" style="color: blue">
+            <span v-if="scope.row.status === 'Pending'" class="blue-color">
               <el-link type="primary" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.pending') }}</el-link>
             </span>
-            <span v-if="scope.row.status === 'Exec'" style="color: blue">
+            <span v-if="scope.row.status === 'Exec'" class="blue-color">
               <i class="el-icon-loading" />
               {{ $t('dataset.underway') }}
             </span>
@@ -79,7 +79,7 @@
 
     <el-dialog v-dialogDrag :title="update_task_dialog_title" :visible="update_task" :show-close="false" width="50%" class="dialog-css" append-to-body>
       <el-col>
-        <el-form :form="taskForm"  ref="taskForm" :model="taskForm" label-width="100px" size="mini" :rules="taskFormRules">
+        <el-form ref="taskForm" :form="taskForm" :model="taskForm" label-width="100px" size="mini" :rules="taskFormRules">
           <el-form-item :label="$t('dataset.task_name')" prop="name">
             <el-input v-model="taskForm.name" size="mini" style="width: 50%" :placeholder="$t('dataset.task_name')" />
           </el-form-item>
@@ -168,7 +168,7 @@
 
     <!--添加任务-选择数据集-->
     <el-dialog v-dialogDrag :title="$t('dataset.task.create')" :visible="selectDatasetFlag" :show-close="false" width="70%" class="dialog-css" :destroy-on-close="true">
-      <table-selector @getTable="getTable" privileges="manage" :mode="1" :customType=customType  showMode="datasetTask"/>
+      <table-selector privileges="manage" :mode="1" :custom-type="customType" show-mode="datasetTask" @getTable="getTable" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeCreateTask">{{ $t('chart.cancel') }}</el-button>
         <el-button type="primary" size="mini" :disabled="!table.id" @click="create(undefined)">{{ $t('chart.confirm') }}</el-button>
@@ -264,7 +264,7 @@ export default {
         useComplexSearch: true,
         quickPlaceholder: this.$t('dataset.task.search_by_name'),
         components: [
-          { field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'DeComplexInput'},
+          { field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'DeComplexInput' },
           { field: 'dataset_table_task.id', label: this.$t('dataset.task_id'), component: 'FuComplexInput' },
           { field: 'dataset_table.name', label: this.$t('dataset.name'), component: 'DeComplexInput' },
           { field: 'dataset_table_task.status', label: this.$t('dataset.task.task_status'), component: 'FuComplexSelect',
@@ -416,17 +416,17 @@ export default {
       this.update_task = true
     },
     changeTaskStatus(task) {
-      let param = JSON.parse(JSON.stringify(task));
+      const param = JSON.parse(JSON.stringify(task))
       param.status = task.status === 'Underway' ? 'Pending' : 'Underway'
       post('/dataset/task/updateStatus', param).then(response => {
-        if(response.success){
+        if (response.success) {
           task.status = param.status
           this.$message({
             message: this.$t('dataset.task.change_success'),
             type: 'success',
             showClose: true
           })
-        }else {
+        } else {
           this.search(this.last_condition, false)
         }
       }).catch(() => {
@@ -558,13 +558,13 @@ export default {
       this.taskForm.cron = val
     },
     disableEdit(task) {
-      return task.rate === 'SIMPLE' || task.status === 'Stopped' || !hasDataPermission('manage',task.privileges)
+      return task.rate === 'SIMPLE' || task.status === 'Stopped' || !hasDataPermission('manage', task.privileges)
     },
     disableExec(task) {
-      return task.status === 'Stopped' || task.status === 'Pending' || task.rate === 'SIMPLE' || !hasDataPermission('manage',task.privileges)
+      return task.status === 'Stopped' || task.status === 'Pending' || task.rate === 'SIMPLE' || !hasDataPermission('manage', task.privileges)
     },
     disableDelete(task) {
-      return false;
+      return false
       // !hasDataPermission('manage',task.privileges)
     },
     deleteTask(task) {
@@ -649,7 +649,7 @@ export default {
             this.resetTaskForm()
             this.search(this.last_condition, true)
           })
-        }else {
+        } else {
           return false
         }
       })
@@ -714,4 +714,8 @@ export default {
 span{
   font-size: 12px;
 }
+
+.blue-color {
+    color: var(--Main);
+}
 </style>
diff --git a/frontend/src/views/system/task/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index 2fa6084a57..9c3484bbd0 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -1,7 +1,7 @@
 <template>
   <el-col>
-    <el-row style="margin-top: 10px;" v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-      <complex-table :data="data" :columns="columns" local-key="datasetTaskRecord" :search-config="searchConfig" :transCondition="transCondition" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
+    <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="margin-top: 10px;">
+      <complex-table :data="data" :columns="columns" local-key="datasetTaskRecord" :search-config="searchConfig" :trans-condition="transCondition" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
         <el-table-column prop="name" :label="$t('dataset.task_name')">
           <template slot-scope="scope">
             <span>
@@ -24,7 +24,7 @@
         <el-table-column prop="status" :label="$t('dataset.status')">
           <template slot-scope="scope">
             <span v-if="scope.row.status === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
-            <span v-if="scope.row.status === 'Underway'" style="color: blue">
+            <span v-if="scope.row.status === 'Underway'" class="blue-color">
               <i class="el-icon-loading" />
               {{ $t('dataset.underway') }}
             </span>
@@ -56,7 +56,7 @@ import ComplexTable from '@/components/business/complex-table'
 import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { post } from '@/api/dataset/dataset'
-import {loadMenus} from "@/permission";
+import { loadMenus } from '@/permission'
 
 export default {
   name: 'TaskRecord',
@@ -127,9 +127,9 @@ export default {
     if (this.param !== null && this.param.taskId) {
       this.matchLogId = this.param.logId || this.matchLogId
       this.transCondition['dataset_table_task.id'] = {
-            operator: 'eq',
-            value: this.param.taskId
-        }
+        operator: 'eq',
+        value: this.param.taskId
+      }
     }
     this.createTimer()
   },
@@ -169,10 +169,10 @@ export default {
     select(selection) {
     },
     timerSearch(condition, showLoading = true) {
-      if(!this.lastRequestComplete){
-        return;
-      }else {
-        this.lastRequestComplete = false;
+      if (!this.lastRequestComplete) {
+        return
+      } else {
+        this.lastRequestComplete = false
       }
 
       this.last_condition = condition
@@ -183,9 +183,9 @@ export default {
       post('/dataset/taskLog/list/notexcel/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize, param, showLoading).then(response => {
         this.data = response.data.listObject
         this.paginationConfig.total = response.data.itemCount
-        this.lastRequestComplete = true;
+        this.lastRequestComplete = true
       }).catch(() => {
-        this.lastRequestComplete = true;
+        this.lastRequestComplete = true
       })
     },
     search(condition, showLoading = true) {
@@ -253,4 +253,7 @@ export default {
 span{
   font-size: 12px;
 }
+.blue-color {
+    color: var(--Main);
+}
 </style>