Merge pull request #894 from dataease/pr@dev@feat_theme_switch

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

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

frontend/src/App.vue

@@ -6,6 +6,10 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+
+  beforeCreate() {
+    // document.body.className = 'blackTheme'
+  }
 }
 </script>

frontend/src/components/LangSelect/index.vue

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

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;

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;

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;

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

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',
@@ -1333,7 +1334,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',

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: '搜索',
@@ -1344,7 +1345,11 @@ export default {
 
     topMenuTextColor: '頭部字體顔色',
 
-    topMenuTextActiveColor: '頭部字體選中顔色'
+    topMenuTextActiveColor: '頭部字體選中顔色',
+
+    themeLight: '淺色',
+    themeDark: '深色',
+    themeCustom: '自定義'
 
   },
   auth: {

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: '搜索',
@@ -1349,7 +1350,11 @@ export default {
 
     topMenuTextColor: '头部字体颜色',
 
-    topMenuTextActiveColor: '头部字体选中颜色'
+    topMenuTextActiveColor: '头部字体选中颜色',
+
+    themeLight: '浅色',
+    themeDark: '深色',
+    themeCustom: '自定义'
 
   },
   auth: {

frontend/src/layout/components/Sidebar/index.vue

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

frontend/src/layout/components/Topbar.vue

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

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>

frontend/src/styles/common/mixins.scss

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

frontend/src/styles/common/variables.scss

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

frontend/src/styles/index.scss

+
+$--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;
+        }
+    }
+} */
+

frontend/src/styles/sidebar.scss

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

frontend/src/styles/theme/dark.scss

+/* 改变主题色变量 */
+$--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;
+}
+
+

frontend/src/styles/theme/default.scss

+/* 改变主题色变量 */
+$--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

frontend/src/styles/topbar.scss

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

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

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>

frontend/src/views/chart/index.vue

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

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>

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>

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>

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

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

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

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>

frontend/src/views/system/datasource/index.vue

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

frontend/vue.config.js

@@ -79,6 +79,13 @@ module.exports = {
       .options({
         symbolId: 'icon-[name]'
       })
+  },
+  css: {
+    loaderOptions: {
+      sass: {
+        prependData: `@import "@/style/index.scss"`
+      }
+    }
   }
 
 }