From d83bebfad68401d5b4124b27c006f562565323df Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 8 Oct 2021 17:22:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/db/migration/V26__de1.3.sql     |   1 +
 frontend/package.json                         |   2 +-
 frontend/src/App.vue                          |   6 +-
 frontend/src/components/LangSelect/index.vue  |  14 +-
 .../src/components/Notification/index.vue     |  69 ++++----
 .../src/components/business/LayoutContent.vue |   2 +-
 .../components/dataease/DeAsideContainer.vue  |   4 +-
 .../dataease/dragbar/DeLeft2RightDragBar.vue  |  13 +-
 frontend/src/lang/en.js                       |   9 +-
 frontend/src/lang/tw.js                       |   9 +-
 frontend/src/lang/zh.js                       |   9 +-
 .../src/layout/components/Sidebar/index.vue   |  21 +--
 frontend/src/layout/components/Topbar.vue     |  18 +-
 frontend/src/layout/index.vue                 |   2 +
 frontend/src/styles/common/mixins.scss        |  15 --
 frontend/src/styles/common/variables.scss     |  54 ------
 frontend/src/styles/index.scss                | 167 ++++++++++++++++++
 frontend/src/styles/sidebar.scss              |  31 ++--
 frontend/src/styles/theme/dark.scss           |  38 ++++
 frontend/src/styles/theme/default.scss        |  35 ++++
 frontend/src/styles/topbar.scss               |  48 +++--
 frontend/src/styles/variables.scss            |   5 +-
 frontend/src/views/chart/group/Group.vue      |   1 +
 frontend/src/views/chart/index.vue            |   2 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 137 +++++++++-----
 frontend/src/views/dataset/data/FieldEdit.vue |   1 +
 .../src/views/dataset/data/TabDataPreview.vue |   4 +-
 frontend/src/views/dataset/data/ViewTable.vue |   2 +-
 frontend/src/views/dataset/group/Group.vue    |   9 +-
 frontend/src/views/login/index.vue            |  11 +-
 frontend/src/views/panel/list/PanelList.vue   |   1 +
 .../src/views/system/datasource/DsTree.vue    |   1 +
 .../src/views/system/datasource/index.vue     |   3 +-
 frontend/vue.config.js                        |   7 +
 34 files changed, 516 insertions(+), 235 deletions(-)
 delete mode 100644 frontend/src/styles/common/mixins.scss
 delete mode 100644 frontend/src/styles/common/variables.scss
 create mode 100644 frontend/src/styles/theme/dark.scss
 create mode 100644 frontend/src/styles/theme/default.scss

diff --git a/backend/src/main/resources/db/migration/V26__de1.3.sql b/backend/src/main/resources/db/migration/V26__de1.3.sql
index b5fdc2ab27..b75ea86c92 100644
--- a/backend/src/main/resources/db/migration/V26__de1.3.sql
+++ b/backend/src/main/resources/db/migration/V26__de1.3.sql
@@ -30,6 +30,7 @@ ALTER TABLE `sys_user` ADD COLUMN `from` int(4) NOT NULL COMMENT '来源' AFTER
 -- INSERT INTO `sys_menu` VALUES (60, 1, 0, 1, '导入LDAP用户', 'system-user-import', 'system/user/imp-ldap', 11, NULL, 'user-ldap', b'0', b'0', b'1', 'user:import', NULL, NULL, NULL, NULL);
 -- ----------------------------
 BEGIN;
+INSERT INTO `system_parameter` VALUES ('ui.themeStr', 'light', 'text', 12);
 INSERT INTO `system_parameter` VALUES ('ldap.url', NULL, 'text', 1);
 INSERT INTO `system_parameter` VALUES ('ldap.dn', NULL, 'text', 2);
 INSERT INTO `system_parameter` VALUES ('ldap.password', NULL, 'password', 3);
diff --git a/frontend/package.json b/frontend/package.json
index 8dc8ff7521..4f9a709770 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -72,7 +72,7 @@
     "mockjs": "1.0.1-beta3",
     "runjs": "^4.1.3",
     "sass": "^1.32.5",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "^0.7.2",
     "serve-static": "^1.13.2",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ec9032c1c6..9aaba1031a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+
+  beforeCreate() {
+    // document.body.className = 'blackTheme'
+  }
 }
 </script>
diff --git a/frontend/src/components/LangSelect/index.vue b/frontend/src/components/LangSelect/index.vue
index 55b565ecb0..5f7615d761 100644
--- a/frontend/src/components/LangSelect/index.vue
+++ b/frontend/src/components/LangSelect/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dropdown style="display: flex;align-items: center;" trigger="click" class="international" @command="handleSetLanguage">
     <div>
-      <svg-icon :style="{color: topMenuTextColor}" class-name="international-icon" icon-class="language" />
+      <svg-icon style="color: var(--TextPrimary)" class-name="international-icon" icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language==='zh_CN'" command="zh_CN">
@@ -24,19 +24,19 @@
 </template>
 
 <script>
-import variables from '@/styles/variables.scss'
+/* import variables from '@/styles/variables.scss' */
 export default {
   computed: {
     language() {
       return this.$store.getters.language
-    },
-    variables() {
+    }
+    /* variables() {
       return variables
-    },
-    topMenuTextColor() {
+    }, */
+    /* topMenuTextColor() {
       if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.topMenuTextColor'] && this.$store.getters.uiInfo['ui.topMenuTextColor'].paramValue) { return this.$store.getters.uiInfo['ui.topMenuTextColor'].paramValue }
       return this.variables.topBarMenuText
-    }
+    } */
   },
   methods: {
     handleSetLanguage(lang) {
diff --git a/frontend/src/components/Notification/index.vue b/frontend/src/components/Notification/index.vue
index 3a3051e057..29290eec5b 100644
--- a/frontend/src/components/Notification/index.vue
+++ b/frontend/src/components/Notification/index.vue
@@ -9,44 +9,45 @@
     style="display: flex;align-items: center;"
     class="international"
   >
-    <div style="height: 30px;">
-      <div style="float: left;font-size:16px;font-weight:bold;">
-        <span>{{ $t('webmsg.web_msg') }}</span>
-      </div>
-      <div v-if="showSetting" style="float: right;">
-        <a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
-      </div>
+    <div>
+      <div style="height: 30px;">
+        <div style="float: left;font-size:16px;font-weight:bold;">
+          <span>{{ $t('webmsg.web_msg') }}</span>
+        </div>
+        <div v-if="showSetting" style="float: right;">
+          <a href="#" style="text-detext-decoratext-decoration:none;cursor:point;" @click="msgSetting">消息规则</a>
+        </div>
 
-    </div>
-    <el-divider class="msg-line-class" />
-    <el-table
-      class="de-msg-data-table"
-      :data="data"
-      :show-header="false"
-      :highlight-current-row="true"
-      style="width: 100%"
-    >
-      <el-table-column prop="content" :label="$t('commons.name')">
-        <template slot-scope="scope">
-          <div class="start-item">
-            <div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
-              <!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
-              <div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
-              <div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
-            </div>
+      </div>
+      <el-divider class="msg-line-class" />
+      <el-table
+        class="de-msg-data-table"
+        :data="data"
+        :show-header="false"
+        :highlight-current-row="true"
+        style="width: 100%"
+      >
+        <el-table-column prop="content" :label="$t('commons.name')">
+          <template slot-scope="scope">
+            <div class="start-item">
+              <div class="filter-db-row star-item-content" @click="showDetail(scope.row)">
+                <!-- <svg-icon icon-class="panel" class="ds-icon-scene" /> -->
+                <div class="title-div"><span>【{{ getTypeName(scope.row.typeId) }}】&nbsp;&nbsp;{{ scope.row.content }}</span></div>
+                <div class="title-div"><span>{{ scope.row.createTime | timestampFormatDate }}</span></div>
+              </div>
             <!-- <div class="star-item-close">
               <i class="el-icon-delete " @click="remove(scope.row)" />
             </div> -->
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="msg-foot-class" @click="showMore">
-      <el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
-        <span>{{ $t('webmsg.show_more') }}</span>
-      </el-row>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="msg-foot-class" @click="showMore">
+        <el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
+          <span>{{ $t('webmsg.show_more') }}</span>
+        </el-row>
+      </div>
     </div>
-
     <div slot="reference">
       <div>
         <svg-icon
@@ -233,7 +234,7 @@ export default {
     right: 178px;
     top: 8px;
     background: red;
-    color: #fff;
+    color: var(--TextActive);
     border-radius: 17px;
     padding: 4px 7px;
     font-size: 16px;
diff --git a/frontend/src/components/business/LayoutContent.vue b/frontend/src/components/business/LayoutContent.vue
index ced3fc27d8..7f8916a912 100644
--- a/frontend/src/components/business/LayoutContent.vue
+++ b/frontend/src/components/business/LayoutContent.vue
@@ -42,7 +42,7 @@ export default {
 
 .content-container {
   transition: 0.3s;
-  background-color: #FFFFFF;
+  background-color: var(--ContentBG);
   overflow: auto;
   height: 100%;
   padding: 20px;
diff --git a/frontend/src/components/dataease/DeAsideContainer.vue b/frontend/src/components/dataease/DeAsideContainer.vue
index ae14df5849..1aad5f9967 100644
--- a/frontend/src/components/dataease/DeAsideContainer.vue
+++ b/frontend/src/components/dataease/DeAsideContainer.vue
@@ -39,11 +39,11 @@ export default {
 <style scoped>
 
   .ms-aside-container {
-    border: 1px solid #E6E6E6;
+    /* border: 1px solid #E6E6E6; */
     padding: 10px;
     border-radius: 2px;
     box-sizing: border-box;
-    background-color: #FFF;
+    background-color: var(--MainBG);
     height: calc(100vh - 56px);
     border-right: 0px;
     position: relative;
diff --git a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
index eb87242d0f..dca2fc1cb4 100644
--- a/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
+++ b/frontend/src/components/dataease/dragbar/DeLeft2RightDragBar.vue
@@ -17,7 +17,18 @@ export default {
     right: 0px;
     top: 0;
     cursor: col-resize;
-    background-color: #E6E6E6;
+    background-color: #E6E6E6;;
+    border: 0px;
+  }
+
+  .blackTheme .drag-bar {
+    height: 100%;
+    width: 1px;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    cursor: col-resize;
+    background-color: var(--MainBorderColor) !important;
     border: 0px;
   }
 
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index fee7e203df..173ef60cb8 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -127,7 +127,8 @@ export default {
     tokenError: 'Token error, please login again',
     username_error: 'Please enter the correct ID',
     password_error: 'The password can not be less than 8 digits',
-    re_login: 'Login again'
+    re_login: 'Login again',
+    default_login: 'Normal'
   },
   commons: {
     search: 'Search',
@@ -1329,7 +1330,11 @@ export default {
     loginImage: 'Picture on the right side of the login page',
     loginTitle: 'Login page title',
     title: 'System name',
-    advice_size: 'Advice picture size'
+    advice_size: 'Advice picture size',
+
+    themeLight: 'Light',
+    themeDark: 'Dark',
+    themeCustom: 'Custom'
   },
   auth: {
     authConfig: 'Auth Config',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 36c6a44c81..b5df216da6 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -127,7 +127,8 @@ export default {
     tokenError: '登陸信息錯誤，請重新登錄',
     username_error: '請輸入正確的 ID',
     password_error: '密碼不小于 8 位',
-    re_login: '重新登錄'
+    re_login: '重新登錄',
+    default_login: '普通登錄'
   },
   commons: {
     search: '搜索',
@@ -1340,7 +1341,11 @@ export default {
 
     topMenuTextColor: '頭部字體顔色',
 
-    topMenuTextActiveColor: '頭部字體選中顔色'
+    topMenuTextActiveColor: '頭部字體選中顔色',
+
+    themeLight: '淺色',
+    themeDark: '深色',
+    themeCustom: '自定義'
 
   },
   auth: {
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index a06788ef86..8239c0b483 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -127,7 +127,8 @@ export default {
     tokenError: '登陆信息错误，请重新登录',
     username_error: '请输入正确的 ID',
     password_error: '密码不小于 8 位',
-    re_login: '重新登录'
+    re_login: '重新登录',
+    default_login: '普通登录'
   },
   commons: {
     search: '搜索',
@@ -1345,7 +1346,11 @@ export default {
 
     topMenuTextColor: '头部字体颜色',
 
-    topMenuTextActiveColor: '头部字体选中颜色'
+    topMenuTextActiveColor: '头部字体选中颜色',
+
+    themeLight: '浅色',
+    themeDark: '深色',
+    themeCustom: '自定义'
 
   },
   auth: {
diff --git a/frontend/src/layout/components/Sidebar/index.vue b/frontend/src/layout/components/Sidebar/index.vue
index 1c8de2b267..61e3eca843 100644
--- a/frontend/src/layout/components/Sidebar/index.vue
+++ b/frontend/src/layout/components/Sidebar/index.vue
@@ -1,11 +1,13 @@
 <template>
-  <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}">
+  <!-- <div :class="{'has-logo':showLogo}" :style="{'--active-bg': activeBg, '--theme':$store.state.settings.theme , '--left-menu-hovor': variables.leftMenuHovor}"> -->
+  <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-menu
       :default-active="activeMenu"
       :collapse="isCollapse"
       :unique-opened="false"
       :collapse-transition="false"
+      background-color="var(--MainBG)"
       mode="vertical"
     >
       <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
@@ -18,7 +20,6 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-import { getThemeCluster } from '@/utils/style'
 export default {
   components: { SidebarItem, Logo },
 
@@ -48,23 +49,15 @@ export default {
     },
     isCollapse() {
       return false
-    },
-    activeBg() {
-      const theme = this.$store.state.settings.theme
-      const styleCluster = getThemeCluster(theme.replace('#', ''))
-      if (styleCluster.length > 2) {
-        const len = styleCluster.length
-        const val = styleCluster[len - 2]
-        return val
-      }
-      return ''
     }
+
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.sidebar-container {
+
+/* .sidebar-container {
     >>>li.el-menu-item.is-active {
         background-color: var(--active-bg) !important;
     }
@@ -85,5 +78,5 @@ export default {
     .is-active > .el-submenu__title {
       color: var(--theme) !important;
     }
-}
+} */
 </style>
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 451737667f..26e432fa7a 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -1,17 +1,15 @@
 <template>
-  <div class="top-nav" :style="{backgroundColor: topMenuColor, '--active-bg-color': topMenuActiveColor}">
+  <div class="top-nav">
     <div v-loading="!axiosFinished" class="log">
       <svg-icon v-if="!logoUrl && axiosFinished" icon-class="DataEase" custom-class="top-nav-logo-icon" />
       <img v-if="logoUrl && axiosFinished" :src="logoUrl" width="140" alt="" style="padding-top: 10px;">
     </div>
     <el-menu
       class="de-top-menu"
-      :background-color="topMenuColor"
-      :text-color="topMenuTextColor"
-      :active-text-color="topMenuTextActiveColor"
-      :default-active="activeMenu"
       mode="horizontal"
       :style="{'margin-left': '260px', 'position': 'absolute'}"
+      active-text-color="#409EFF"
+      :default-active="activeMenu"
       @select="handleSelect"
     >
       <div v-for="item in permission_routes" :key="item.path" class="nav-item">
@@ -24,7 +22,7 @@
       </div>
     </el-menu>
 
-    <div class="right-menu" :style=" {color: topMenuTextColor}">
+    <div class="right-menu" style="color: var(--TextPrimary)">
       <template>
 
         <notification class="right-menu-item hover-effect" />
@@ -37,7 +35,7 @@
       </template>
 
       <el-dropdown class="top-dropdown" style="display: flex;align-items: center; width:100px;">
-        <span :style=" {color: topMenuTextColor}" class="el-dropdown-link" style="font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+        <span class="el-dropdown-link" style="color: var(--TextPrimary);font-size: 14px;max-width: 80px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
           {{ name }}
           <i class="el-icon-arrow-down el-icon--right" />
         </span>
@@ -302,9 +300,7 @@ export default {
   }
 
   .de-top-menu {
-      >>>li.is-active {
-          // background-color: #0a7be0 !important;
-          background-color: var(--active-bg-color) !important;
-      }
+      background-color: var(--MainBG);
+
   }
 </style>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 313ed1ff09..45a93b2d0b 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -80,6 +80,7 @@ export default {
     position: relative;
     height: 100%;
     // height: $contentHeight;
+    background-color: var(--MainBG);
     width: 100%;
     &.mobile.openSidebar{
       position: fixed;
@@ -123,6 +124,7 @@ export default {
         height: calc(100vh - 80px) !important;
         overflow-x: hidden !important;
         overflow-y: auto !important;
+        background-color: var(--MainBG) !important;
       }
   }
 </style>
diff --git a/frontend/src/styles/common/mixins.scss b/frontend/src/styles/common/mixins.scss
deleted file mode 100644
index 8cb316fb91..0000000000
--- a/frontend/src/styles/common/mixins.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin flex-row($justify: flex-start, $align: stretch) {
-  display: flex;
-  @if $justify != flex-start {
-    justify-content: $justify;
-  }
-  @if $align != stretch {
-    align-items: $align;
-  }
-}
-
-@mixin variant($color, $background-color, $border-color) {
-  color: $color;
-  background-color: $background-color;
-  border-color: $border-color;
-}
diff --git a/frontend/src/styles/common/variables.scss b/frontend/src/styles/common/variables.scss
deleted file mode 100644
index 1ab70a09a0..0000000000
--- a/frontend/src/styles/common/variables.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/* Element 变量 */
-$--color-primary: #447df7;
-$--color-success: #87cb16;
-$--color-warning: #ffa534;
-$--color-danger: #fb404b;
-
-$--box-shadow-light: 0 1px 4px 0 rgb(0 0 0 / 14%);
-
-$--color-text-primary: #3c4858;
-
-/* layout */
-$layout-bg-color: #f2f2f2;
-
-/* sidebar */
-$sidebar-open-width: 260px;
-$sidebar-close-width: 60px;
-$sidebar-bg-color: #30373d;
-$sidebar-bg-gradient: linear-gradient(to bottom right, #30373d, #3e3e3d);
-
-/* menu */
-$menu-height: 50px; // 菜单项高度
-$menu-bg-color: transparent; // 菜单项背景
-$menu-bg-color-hover: mix($sidebar-bg-color, #000, 90%); // 菜单项hover背景
-$menu-color: #b6c0cd; // 菜单项字体颜色
-$menu-open-bg-color: #252b2f; // 菜单项展开背景
-$menu-active-color: #FFF; // 菜单项激活时颜色
-$menu-active-bg-color: transparent; // 菜单项激活时背景
-
-$submenu-height: 40px; // 子菜单项高度
-$submenu-bg-color-hover: mix($menu-open-bg-color, #000, 80%); // 子菜单项hover背景
-$submenu-active-color: $menu-active-color; // 子菜单项激活时颜色
-$submenu-active-bg-color: transparent; // 子菜单项激活时背景
-
-$menu-active-prefix-color: $--color-primary; // 菜单激活前缀颜色
-$menu-active-prefix-width: 4px; // 菜单激活前缀宽度
-
-/* logo */
-$logo-height: 40px;
-$logo-bg-color: #4e5051;
-
-/* header */
-$header-height: 60px;
-$header-padding: 30px;
-
-/* main */
-$view-padding: 15px;
-
-/* fit2cloud-ui的variables加载了element-ui的变量 */
-@import "~fit2cloud-ui/src/styles/common/variables";
-
-:export {
-  theme: $--color-primary;
-}
-
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 3b154419ea..23126c2d41 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,3 +1,17 @@
+
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+.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";
+}
+
+
+
 @import '~normalize.css/normalize.css';
 @import './variables.scss';
 @import './mixin.scss';
@@ -361,3 +375,156 @@ div:focus {
 .el-color-dropdown__link-btn {
   display: none!important;
 }
+
+.el-table {
+    background-color: var(--MainBG) !important;
+    tr {
+        background-color: var(--MainBG) !important;
+    }
+    th {
+        background-color: var(--MainBG) !important;
+    }
+}
+
+.blackTheme .el-input__inner {
+    background-color: var(--MainBG) !important;    
+}
+.blackTheme .el-input__inner:not(:focus) {
+    
+    // border: none !important;
+    border-color: var(--border-color-input) !important;
+}
+
+
+.el-pagination {
+    button:disabled {
+        background-color: var(--MainBG) !important;
+    }
+}
+
+.el-pager li {
+    background-color: var(--MainBG) !important;
+}
+
+.blackTheme .el-select-dropdown {
+    background-color: var(--MainBG) !important;
+}
+
+.fu-search-bar-button {
+    background-color: var(--Main) !important;
+}
+
+.fu-quick-search input {
+    background-color: var(--MainBG) !important;
+}
+
+.blackTheme .el-popover {
+    background-color: var(--MainBG);
+}
+
+.blackTheme .main-area-input {
+    input.el-input__inner {
+        background-color: var(--ContentBG) !important;
+    }
+    .el-input-group__append {
+        background-color: var(--ContentBG) !important;
+        border-color: var(--ContentBG) !important;
+    }    
+}
+
+.el-tree {
+    background-color: var(--MainBG) !important;
+}
+
+.el-tree-node__content:hover {
+    background-color: var(--ContentBG) !important;
+}
+
+.is-current > .el-tree-node__content {
+    background-color: var(--ContentBG) !important;
+}
+.blackTheme .el-collapse-item__header {
+    background-color: var(--ContentBG) !important;
+    color: var(--TextPrimary) !important;
+    border: none !important;
+}
+.blackTheme .el-collapse-item__wrap {
+    background-color: var(--ContentBG) !important;
+    border: none !important;
+}
+.blackTheme .content-container__header {
+    color: var(--TextPrimary);
+}
+.blackTheme .el-button--default {
+    background-color: var(--MainBG) !important;
+    color: var(--Main) !important;
+}
+.blackTheme .el-dialog {
+    background: var(--ContentBG) !important;
+    color: var(--TextPrimary) !important;
+}
+.blackTheme .el-dialog__title {
+    color: var(--TextPrimary) !important;
+}
+
+.blackTheme .title-text {
+    color: var(--TextPrimary) !important;
+}
+
+.blackTheme .el-tabs__item:not(.is-active) {
+    color: var(--TextPrimary) !important;
+}
+.blackTheme .el-tabs__item:hover{
+    color: var(--Main) !important;
+}
+
+.blackTheme .elx-table--main-wrapper {
+    
+    .body--wrapper {
+        background-color: var(--ContentBG) !important;
+    }
+}
+.blackTheme .elx-table {
+    color: var(--TextPrimary) !important;
+}
+
+.blackTheme .elx-body--column {
+    background-image: linear-gradient(var(--MainBorderColor), var(--MainBorderColor)), linear-gradient(var(--MainBorderColor), var(--MainBorderColor)) !important;
+}
+.blackTheme .elx-header--column {
+    background-image: linear-gradient(--MainBorderColor, --MainBorderColor), linear-gradient(--MainBorderColor, --MainBorderColor) !important;
+}
+.blackTheme tr.row--current {
+    background-color: var(--MainBG) !important;
+}
+.blackTheme tr.elx-body--row:hover {
+    background-color: var(--MainBG) !important;
+}
+
+.blackTheme .elx-table--header-border-line {
+    border-color: var(--MainBorderColor) !important;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0!important;
+}
+.el-collapse-item__header {
+  height: 34px !important;
+  line-height: 34px !important;
+  padding: 0 0 0 6px !important;
+  font-size: 12px !important;
+  font-weight: 400 !important;
+}
+
+.blackTheme .el-submenu__title {
+    color: var(--TextPrimary) ;
+}
+
+/* .chart-radio-div {
+    label.el-radio {
+        span.el-radio__input {
+            display: none !important;
+        }
+    }
+} */
+
diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss
index 3638594849..86a013668b 100644
--- a/frontend/src/styles/sidebar.scss
+++ b/frontend/src/styles/sidebar.scss
@@ -1,7 +1,6 @@
 #app {
 
   .main-container {
-    // min-height: 100%;
     height: $contentHeight;
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
@@ -15,21 +14,16 @@
 
   .sidebar-container {
     transition: width 0.28s;
-    background-color: $leftMenuBg;
+    // background-color: $--background-color-base;
     height: $contentHeight;
     position: fixed;
     font-size: 0px;
-    // top: 0;
     top: $topBarHeight;
     bottom: 0;
     left: 0;
     z-index: 999;
     overflow: hidden;
-    // min-width: 260px;
-    // max-width: 400px;
-    // border-right: 1px solid rgba(0, 0, 0, 0.12);
-
-    // reset element-ui css
+    
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
@@ -71,16 +65,14 @@
       height: 100%;
       width: 100% !important;
 
-      /* .is-active {
-        background-color: $leftMenuActive;
-      } */
+     
     }
 
-    // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: $leftMenuHovor !important;
+        // background-color: $leftMenuHovor !important;
+        background-color: var(--ContentBG) !important;
       }
     }
 
@@ -91,10 +83,12 @@
     & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $leftMenuBg !important;
+      // background-color: $leftMenuBg !important;
+      background-color: var(--MainBG) !important;
 
       &:hover {
-        background-color: $leftMenuHovor !important;
+        // background-color: $leftMenuHovor !important;
+        background-color: var(--ContentBG) !important;
       }
     }
   }
@@ -146,6 +140,7 @@
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
+            
           }
         }
       }
@@ -156,7 +151,6 @@
     min-width: $sideBarWidth !important;
   }
 
-  // mobile responsive
   .mobile {
     .main-container {
       margin-left: 0px;
@@ -185,7 +179,6 @@
   }
 }
 
-// when menu collapsed
 .el-menu--vertical {
   & > .el-menu {
     .svg-icon {
@@ -196,11 +189,11 @@
   .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
-      background-color: $leftMenuHovor !important;
+      // background-color: $leftMenuHovor !important;
+      background-color: var(--ContentBG) !important;
     }
   }
 
-  // the scroll bar appears when the subMenu is too long
   > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
diff --git a/frontend/src/styles/theme/dark.scss b/frontend/src/styles/theme/dark.scss
new file mode 100644
index 0000000000..10f48c68c2
--- /dev/null
+++ b/frontend/src/styles/theme/dark.scss
@@ -0,0 +1,38 @@
+/* 改变主题色变量 */
+$--color-primary: #2681ff;
+$--color-success: #05AA65;
+$--color-warning: #FF9227;
+$--color-danger: #F64346;
+$--color-info: #BABEC5;
+
+
+$--color-text-primary: #F2F6FC;
+$--color-text-regular: #EBEEF5;
+$--color-text-secondary: #E4E7ED;
+$--color-text-placeholder: #DCDFE6;
+
+$--border-color-base: #2681ff;
+$--border-color-light: #2681ff;
+$--border-color-lighter: #2681ff;
+$--border-color-extra-light: #2681ff;
+
+$--color-white: #FFFFFF;
+$--color-black: #000000;
+
+$--background-color-base: #171b22;
+
+// 与CSS原生变量映射
+#app {
+  --Main:#2681ff;
+  --test:#FF9227;
+  --color-primary: #000;
+  --MainBG: #171b22;
+  --ContentBG: #303640;
+  --MainBorderColor: #2681ff;
+  --TextActive: #FFFFFF;
+  --TextPrimary: #F2F6FC;
+  --border-color-input: #303640;
+  --border-color-input-hovor: #303640;
+}
+
+
diff --git a/frontend/src/styles/theme/default.scss b/frontend/src/styles/theme/default.scss
new file mode 100644
index 0000000000..e0cfcefc32
--- /dev/null
+++ b/frontend/src/styles/theme/default.scss
@@ -0,0 +1,35 @@
+/* 改变主题色变量 */
+$--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/styles/topbar.scss b/frontend/src/styles/topbar.scss
index cf659dc197..f622678c94 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -1,14 +1,11 @@
 .top-nav {
-  // margin-left: $sideBarWidth;
   width: 100%;
-  // background-color: #304156;
-  background-color: $topBarBg;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1001;
   overflow: hidden;
-  border-bottom: 1px solid #DCDFE6;
+  border-bottom: 1px solid $--color-primary;
 
   .log {
     padding: 0 16px;
@@ -16,9 +13,7 @@
     height: 56px;
     font-size: 24px;
     font-weight: bold;
-    // color: rgb(191, 203, 217);
-    // color: rgba(255, 255, 255, 0.87);
-    // color: $topBarBg;
+
     float: left;
 
     img {
@@ -30,29 +25,51 @@
   .el-menu {
     float: left;
     border: none !important;
-    background-color: $topBarBg;
 
     .nav-item {
       display: inline-block;
 
       .el-menu-item:not(.is-active) {
-        color: $topBarMenuText;
 
         &:hover {
-          background-color: $topBarMenuHovor !important;
+          background-color: var(--ContentBG, #ecf5ff) !important;
         }
 
         &:focus {
-          background-color: $topBarMenuHovor !important;
+          background-color: var(--ContentBG, #ecf5ff) !important;
         }
 
       }
+      .el-menu-item.is-active {
+        background-color: var(--ContentBG, #ecf5ff) ;
+        color: var(--TextActive) !important;
+      }
 
-      /* .is-active {
-        background-color: $topBarMenuActive !important;
-      } */
     }
   }
+/* .blackTheme .el-menu {
+    
+    .nav-item {
+      
+
+      .el-menu-item:not(.is-active) {
+
+        &:hover {
+          background-color: var(--ContentBG) !important;
+        }
+
+        &:focus {
+          background-color: var(--ContentBG) !important;
+        }
+
+      }
+      .blackTheme .el-menu-item.is-active {
+        background-color: var(--ContentBG) !important;
+        color: var(--TextActive) !important;
+      }
+
+    }
+} */
 
   .right-menu {
     float: right;
@@ -71,8 +88,7 @@
       padding: 10px 8px;
       height: 100%;
       font-size: 18px;
-      // color: #5a5e66;
-      // color: #606266;
+      
       vertical-align: text-bottom;
 
       &.hover-effect {
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 5835490982..f823d8a86c 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -7,10 +7,10 @@
 
 /* theme color */
 
-$--color-primary: #0a7be0;
+/* $--color-primary: #0a7be0;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
-$--color-danger: #F56C6C;
+$--color-danger: #F56C6C; */
 // $--color-info: #1E1E1E;
 
 $--button-font-weight: 400;
@@ -23,7 +23,6 @@ $--table-border: 1px solid #dfe6ec;
 $--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "~element-ui/packages/theme-chalk/src/index";
-@import "~fit2cloud-ui/src/styles/common/variables";
 // topBar
 $topBarBg: #f1f3f8;
 $topBarMenuHovor: rgba(158,158,158,.2);
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index e4aead51a2..98176c3c51 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -18,6 +18,7 @@
               :placeholder="$t('chart.search')"
               prefix-icon="el-icon-search"
               clearable
+              class="main-area-input"
             />
           </el-form-item>
         </el-form>
diff --git a/frontend/src/views/chart/index.vue b/frontend/src/views/chart/index.vue
index dc2f2ac653..7e5d0b43ad 100644
--- a/frontend/src/views/chart/index.vue
+++ b/frontend/src/views/chart/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
+  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
 
     <de-aside-container>
       <group :save-status="saveStatus" @switchComponent="switchComponent" />
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index e95665f5a9..4daf893549 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1,7 +1,8 @@
 <template>
   <el-row v-loading="loading" style="height: 100%;overflow-y: hidden;width: 100%;">
     <!--    <span v-show="false">{{ vId }}</span>-->
-    <el-row style="height: 40px;background-color: white" class="padding-lr">
+    <!-- <el-row style="height: 40px;background-color: white" class="padding-lr"> -->
+    <el-row style="height: 40px;" class="padding-lr">
       <el-popover
         placement="right-start"
         width="400"
@@ -10,7 +11,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="chart" :data="view" :tab-status="tabStatus" />
-        <span slot="reference" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
+        <span slot="reference" class="title-text" style="line-height: 40px;cursor: pointer;">{{ view.name }}</span>
       </el-popover>
       <span style="float: right;line-height: 40px;">
         <!--        <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="changeDs">-->
@@ -29,9 +30,9 @@
       <el-tabs type="card" :stretch="true" class="tab-header">
         <el-tab-pane :label="$t('chart.chart_data')" class="padding-tab" style="width: 360px">
           <el-row class="view-panel">
-            <el-col
-              style="width: 180px;border-right: 1px solid #E6E6E6;"
-            >
+            <!-- <el-col style="width: 180px;border-right: 1px solid #E6E6E6;" > -->
+            <el-col class="theme-border-class" style="width: 180px;border-right: 1px solid #E6E6E6;">
+
               <div style="display: flex;align-items: center;justify-content: center;padding: 6px;">
                 <el-input
                   v-model="searchField"
@@ -39,6 +40,7 @@
                   :placeholder="$t('chart.search')"
                   prefix-icon="el-icon-search"
                   clearable
+                  class="main-area-input"
                 />
                 <el-button :title="$t('dataset.edit_field')" :disabled="!table || !hasDataPermission('manage',table.privileges)" icon="el-icon-setting" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="editField" />
                 <el-button :title="$t('chart.change_ds')" :disabled="!hasDataPermission('manage',param.privileges)" icon="el-icon-refresh" type="text" size="mini" style="float: right;width: 20px;margin-left: 4px;" @click="changeDs" />
@@ -92,25 +94,9 @@
             <el-col
               style="height: 100%;width: 180px;border-right: 1px solid #E6E6E6;"
             >
-              <!--        <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
-              <!--          <el-row>-->
-              <!--            <span>{{ $t('chart.title') }}</span>-->
-              <!--            <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
-              <!--          </el-row>-->
-              <!--          <el-form>-->
-              <!--            <el-form-item class="form-item">-->
-              <!--              <el-input-->
-              <!--                v-model="view.title"-->
-              <!--                size="mini"-->
-              <!--                :placeholder="$t('chart.title')"-->
-              <!--                prefix-icon="el-icon-search"-->
-              <!--                clearable-->
-              <!--              />-->
-              <!--            </el-form-item>-->
-              <!--          </el-form>-->
-              <!--        </div>-->
-              <div style="height: 25vh;overflow:auto" class="padding-lr">
-                <span>{{ $t('chart.chart_type') }}</span>
+
+              <div style="height: 25vh;overflow:auto" class="padding-lr theme-border-class">
+                <span class="title-text">{{ $t('chart.chart_type') }}</span>
                 <el-row>
                   <div class="chart-type">
                     <el-radio-group
@@ -119,7 +105,7 @@
                       :disabled="!hasDataPermission('manage',param.privileges)"
                       @change="save(true,'chart',true,true)"
                     >
-                      <div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
+                      <div class="chart-radio-div" style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
                         <el-radio value="table-normal" label="table-normal">
                           <span :title="$t('chart.chart_table_normal')">
                             <svg-icon icon-class="table-normal" class="chart-icon" />
@@ -233,7 +219,7 @@
                     </el-radio-group>
                   </div>
                 </el-row>
-                <el-row style="color: #909399;">
+                <el-row class="title-text" style="color: #909399;">
                   <span>
                     <span v-show="chart.type && (chart.type.includes('pie') || chart.type.includes('funnel') || chart.type.includes('text') || chart.type.includes('gauge') || chart.type.includes('treemap'))">
                       Tips: {{ $t('chart.only_one_quota') }}
@@ -247,7 +233,7 @@
                   </span>
                 </el-row>
               </div>
-              <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style">
+              <div style="overflow:auto;border-top: 1px solid #e6e6e6" class="attr-style theme-border-class">
                 <el-row style="height: 100%;">
                   <el-row v-if="view.type ==='map'" class="padding-lr">
                     <span style="width: 80px;text-align: right;">
@@ -419,6 +405,7 @@
                       group="drag"
                       animation="300"
                       :move="onMove"
+                      class="theme-item-class"
                       style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
                       @add="addCustomFilter"
                       @update="save(true)"
@@ -462,9 +449,9 @@
         </el-tab-pane>
         <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 360px;">
           <el-row class="view-panel">
-            <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style">
+            <div style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;" class="attr-style theme-border-class">
               <el-row class="padding-lr">
-                <span>{{ $t('chart.style_priority') }}</span>
+                <span class="title-text">{{ $t('chart.style_priority') }}</span>
                 <el-row>
                   <el-radio-group v-model="view.stylePriority" :disabled="!hasDataPermission('manage',param.privileges)" size="mini" @change="save">
                     <el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
@@ -1659,6 +1646,9 @@ export default {
     height: calc(100% - 40px);
     background-color: #f7f8fa;
   }
+  .blackTheme .view-panel {
+    background-color: var(--MainBG);
+  }
 
   .drag-list {
     height: calc(100% - 26px);
@@ -1680,6 +1670,13 @@ export default {
     text-overflow: ellipsis;
   }
 
+  .blackTheme .item-dimension {
+    border: solid 1px ;
+    border-color: var(--MainBorderColor);
+    color: var(--TextPrimary);
+    background-color: var(--MainBG);
+  }
+
   .item-dimension + .item-dimension {
     margin-top: 2px;
   }
@@ -1691,13 +1688,18 @@ 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;
     border: solid 1px #eee;
     text-align: left;
     color: #606266;
-    /*background-color: rgba(35,46,64,.05);*/
     background-color: white;
     display: block;
     word-break: break-all;
@@ -1705,6 +1707,14 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+  .blackTheme .item-quota {
+
+    border: solid 1px ;
+    border-color: var(--MainBorderColor);
+    color: var(--TextPrimary);
+    background-color: var(--MainBG);
+
+  }
 
   .item-quota + .item-quota {
     margin-top: 2px;
@@ -1717,6 +1727,10 @@ export default {
     cursor: pointer;
   }
 
+  .blackTheme .item-quota:hover {
+    background: var(--ContentBG);
+  }
+
   .el-form-item {
     margin-bottom: 0;
   }
@@ -1730,10 +1744,19 @@ export default {
     background-color: #E8EAED;
   }
 
+  .blackTheme .tab-header>>>.el-tabs__item{
+    background-color: var(--MainBG);
+  }
+
   .tab-header>>>.is-active{
     background-color: #f7f8fa;
     border-bottom-color: #f7f8fa!important;
   }
+
+  .blackTheme .tab-header>>>.is-active{
+    background-color: var(--ContentBG);
+    border-bottom-color: var(--ContentBG) !important;
+  }
   .tab-header>>>.el-tabs__nav-scroll{
     padding-left: 0!important;
   }
@@ -1763,7 +1786,7 @@ export default {
   }
 
   .chart-type>>>.el-radio__input{
-    display: none!important;
+    display: none !important;
   }
 
   .el-radio{
@@ -1778,6 +1801,11 @@ export default {
     height: calc(100vh - 56px - 25vh - 40px - 40px);
   }
 
+  .blackTheme .attr-style{
+    border-color: var(--MainBorderColor) !important;
+    color: var(--TextPrimary);
+  }
+
   .attr-selector{
     width:100%;
     height: 100%;
@@ -1788,15 +1816,9 @@ export default {
     background-color: white
   }
 
-  .style-collapse>>>.el-collapse-item__content {
-    padding-bottom: 0!important;
-  }
-  .style-collapse>>>.el-collapse-item__header {
-    height: 34px;
-    line-height: 34px;
-    padding: 0 0 0 6px;
-    font-size: 12px;
-    font-weight: 400;
+  .blackTheme .attr-selector{
+
+    background-color: var(--MainBG)
   }
 
   .disabled-none-cursor{
@@ -1830,6 +1852,7 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
+
   .chart-error-class{
     text-align: center;
     height: 100%;
@@ -1838,10 +1861,20 @@ export default {
     justify-content: center;
     background-color: #ece7e7;
   }
+  .blackTheme .chart-error-class{
+
+    background-color: var(--MainBG)
+  }
+
   .field-height{
     height: calc(50% - 20px);
     border-top: 1px solid #E6E6E6;
   }
+  .blackTheme .field-height{
+
+    border-top: 1px solid ;
+    border-color: var(--MainBorderColor) !important;
+  }
   .padding-tab{
     padding: 0;
     height: 100%;
@@ -1852,6 +1885,7 @@ export default {
           font-weight: normal !important;
       }
   }
+
   .drag-block-style{
     padding:2px 0 0 0;
     width:100%;
@@ -1863,6 +1897,12 @@ export default {
     align-items: center;
     background-color: white;
   }
+  .blackTheme .drag-block-style{
+    border: 1px solid ;
+    border-color: var(--MainBorderColor);
+    background-color: var(--ContentBG);
+  }
+
   .drag-placeholder-style{
     position: absolute;
     top: calc(50% - 2px);
@@ -1870,7 +1910,24 @@ export default {
     width: 100%;
     color: #CCCCCC;
   }
+  .blackTheme .drag-placeholder-style{
+    color: var(--TextPrimary);
+  }
   .drag-placeholder-style-span{
     padding-left: 16px;
   }
+
+  .blackTheme .theme-border-class {
+    border-color: var(--MainBorderColor) !important;
+    color: var(--TextPrimary) !important;
+    background-color: var(--ContentBG);
+  }
+  .blackTheme .padding-lr {
+    border-color: var(--MainBorderColor) !important;
+  }
+  .blackTheme .theme-item-class {
+      background-color: var(--MainBG) !important;
+      border-color: var(--MainBorderColor) !important;
+  }
+
 </style>
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index bc4408383c..ef7c1bac6b 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -23,6 +23,7 @@
             :placeholder="$t('dataset.search')"
             prefix-icon="el-icon-search"
             clearable
+            class="main-area-input"
           />
         </el-form-item>
       </el-form>
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 11b4d9a940..c849810db2 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -4,8 +4,8 @@
       <el-col style="width: 300px;">
         <el-form ref="form" :model="form" size="mini" class="row-style">
           <el-form-item>
-            <span style="width: 100px;">{{ $t('dataset.showRow') }}</span>
-            <el-input v-model="form.row">
+            <span class="title-text" style="width: 100px;">{{ $t('dataset.showRow') }}</span>
+            <el-input v-model="form.row" class="main-area-input">
               <el-button slot="append" size="mini" icon="el-icon-search" @click="reSearch" />
             </el-input>
           </el-form-item>
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 3e645ec7c8..675416e63d 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -10,7 +10,7 @@
         @hide="hideTab"
       >
         <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-        <span slot="reference" style="line-height: 26px;cursor: pointer;">
+        <span slot="reference" class="title-text" style="line-height: 26px;cursor: pointer;">
           {{ table.name }}
         </span>
       </el-popover>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 1d86c4b06b..b25b5d598d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -30,6 +30,7 @@
               :placeholder="$t('dataset.search')"
               prefix-icon="el-icon-search"
               clearable
+              class="main-area-input"
             />
           </el-form-item>
         </el-form>
@@ -341,7 +342,7 @@
 </template>
 
 <script>
-import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post, isKettleRunning, alter} from '@/api/dataset/dataset'
+import { loadTable, getScene, addGroup, delGroup, addTable, delTable, post, isKettleRunning, alter } from '@/api/dataset/dataset'
 import GroupMoveSelector from './GroupMoveSelector'
 import DsMoveSelector from './DsMoveSelector'
 
@@ -420,9 +421,6 @@ export default {
   },
   computed: {
   },
-  created() {
-    this.kettleState()
-  },
   watch: {
     search(val) {
       this.$emit('switchComponent', { name: '' })
@@ -439,6 +437,9 @@ export default {
       this.refreshNodeBy(this.saveStatus.sceneId)
     }
   },
+  created() {
+    this.kettleState()
+  },
   mounted() {
     this.treeNode(this.groupForm)
     this.refresh()
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 9d321b8f59..4077f02945 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -17,7 +17,7 @@
             <div class="login-form">
               <el-form-item v-if="loginTypes.length > 1">
                 <el-radio-group v-if="loginTypes.length > 1" v-model="loginForm.loginType" @change="changeLoginType">
-                  <el-radio :label="0" size="mini">普通登录</el-radio>
+                  <el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
                   <el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
                   <el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
                 </el-radio-group>
@@ -146,7 +146,16 @@ export default {
       if (this.uiInfo['ui.loginLogo'] && this.uiInfo['ui.loginLogo'].paramValue) {
         this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
       }
+      if (this.uiInfo['ui.themeStr'] && this.uiInfo['ui.themeStr'].paramValue) {
+        // this.loginLogoUrl = '/system/ui/image/' + this.uiInfo['ui.loginLogo'].paramValue
+        if (this.uiInfo['ui.themeStr'].paramValue === 'dark') {
+          document.body.className = 'blackTheme'
+        } else if (this.uiInfo['ui.themeStr'].paramValue === 'light') {
+          document.body.className = ''
+        }
+      }
     },
+
     handleLogin() {
       this.clearOidcMsg()
       this.$refs.loginForm.validate(valid => {
diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue
index 6cb5495057..a595fa4de1 100644
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@@ -9,6 +9,7 @@
             :placeholder="$t('commons.search')"
             prefix-icon="el-icon-search"
             clearable
+            class="main-area-input"
           />
         </el-col>
         <el-col :span="8">
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index 2eb2680db0..e44e1b0a46 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -18,6 +18,7 @@
               :placeholder="$t('chart.search')"
               prefix-icon="el-icon-search"
               clearable
+              class="main-area-input"
             />
           </el-form-item>
         </el-form>
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index 1e0d024244..713cdb2583 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
+  <!-- <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa"> -->
+  <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
     <de-main-container>
       <ds-main ref="dsMain" />
     </de-main-container>
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index 8005c12a4a..4dcd9d89bf 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -79,6 +79,13 @@ module.exports = {
       .options({
         symbolId: 'icon-[name]'
       })
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `@import "@/style/index.scss"`
+      }
+    }
   }
 
 }