feat: add global night mode; 🌟

新增：全局夜晚模式；

src/App.vue

@@ -33,9 +33,15 @@ export default {
     lang(val) {
       this.setLanguage(val)
     },
+    theme(val) {
+      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
+      themeUtil.changeThemeColor(this.themeColor, val).then(() => {
+        setTimeout(closeMessage, 1000)
+      })
+    },
     themeColor(val) {
       let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
-      themeUtil.changeThemeColor(val).then(() => {
+      themeUtil.changeThemeColor(val, this.theme).then(() => {
         setTimeout(closeMessage, 1000)
       })
     }

src/components/card/ChartCard.vue

@@ -27,7 +27,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
   .chart-card-header{
     position: relative;
     overflow: hidden;
@@ -52,7 +52,6 @@ export default {
     text-overflow: ellipsis;
     word-break: break-all;
     white-space: nowrap;
-    color: #000;
     margin-top: 4px;
     margin-bottom: 0;
     font-size: 30px;

src/components/chart/RankingList.vue

@@ -30,12 +30,12 @@ export default {
       li {
         margin-top: 16px;
         span {
-          color: rgba(0,0,0,.65);
+          color: @text-color-second;
           font-size: 14px;
           line-height: 22px;
         }
         span:first-child {
-          background-color: #f5f5f5;
+          background-color: @bg-color;
           border-radius: 20px;
           display: inline-block;
           font-size: 12px;
@@ -47,8 +47,8 @@ export default {
           text-align: center;
         }
         span.active {
-          background-color: #314659;
+          background-color: #314659 !important;
-          color: #fff;
+          color: #fff !important;
         }
         span:last-child {
           float: right;

src/components/exception/ExceptionPage.vue

@@ -34,7 +34,7 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: white;
+    background-color: @base-bg-color;
     .img{
       padding-right: 52px;
       zoom: 1;

src/components/menu/SideMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
+  <a-layout-sider :theme="sideTheme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
     <div :class="['logo', theme]">
       <router-link to="/dashboard/workplace">
         <img src="@/assets/img/logo.png">
@@ -39,6 +39,9 @@ export default {
     }
   },
   computed: {
+    sideTheme() {
+      return this.theme == 'light' ? this.theme : 'dark'
+    },
     ...mapState('setting', ['isMobile', 'systemName'])
   },
   methods: {
@@ -51,41 +54,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .shadow{
+@import "index";
-    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
-  }
-  .side-menu{
-    min-height: 100%;
-    z-index: 10;
-    .logo{
-      height: 64px;
-      position: relative;
-      line-height: 64px;
-      padding-left: 24px;
-      -webkit-transition: all .3s;
-      transition: all .3s;
-      overflow: hidden;
-      background-color: @layout-trigger-background;
-      &.light{
-        background-color: #fff;
-        h1{
-          color: @primary-color;
-        }
-      }
-      h1{
-        color: #fff;
-        font-size: 20px;
-        margin: 0 0 0 12px;
-        display: inline-block;
-        vertical-align: middle;
-      }
-      img{
-        width: 32px;
-        vertical-align: middle;
-      }
-    }
-  }
-  .menu{
-    padding: 16px 0;
-  }
 </style>

src/components/menu/index.less

@@ -0,0 +1,37 @@
+.shadow{
+  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+}
+.side-menu{
+  min-height: 100%;
+  z-index: 10;
+  .logo{
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    padding-left: 24px;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    overflow: hidden;
+    background-color: @layout-trigger-background;
+    &.light{
+      background-color: #fff;
+      h1{
+        color: @primary-color;
+      }
+    }
+    h1{
+      color: @menu-dark-highlight-color;
+      font-size: 20px;
+      margin: 0 0 0 12px;
+      display: inline-block;
+      vertical-align: middle;
+    }
+    img{
+      width: 32px;
+      vertical-align: middle;
+    }
+  }
+}
+.menu{
+  padding: 16px 0;
+}

src/components/menu/menu.js

@@ -73,6 +73,9 @@ export default {
         keys.push(item.path)
       })
       return keys
+    },
+    menuTheme() {
+      return this.theme == 'light' ? this.theme : 'dark'
     }
   },
   beforeMount() {
@@ -212,7 +215,7 @@ export default {
       Menu,
       {
         props: {
-          theme: this.$props.theme,
+          theme: this.menuTheme,
           mode: this.$props.mode,
           openKeys: this.openKeys,
           selectedKeys: this.selectedKeys

src/components/page/header/PageHeader.vue

@@ -57,46 +57,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .page-header{
+  @import "index";
-    background: #fff;
-    padding: 16px 24px;
-    border-bottom: 1px solid #e8e8e8;
-    .page-header-wide{
-      &.head{
-        margin: auto;
-        max-width: 1400px;
-      }
-      &.side{
-      }
-      .breadcrumb{
-        margin-bottom: 20px;
-      }
-      .detail{
-        display: flex;
-        .row {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-between;
-        }
-        .avatar {
-          margin:0 24px 0 0;
-        }
-        .main{
-          width: 100%;
-          .title{
-            font-size: 20px;
-            color: rgba(0,0,0,.85);
-            margin-bottom: 16px;
-          }
-          .content{
-            display: flex;
-            flex-wrap: wrap;
-          }
-          .extra{
-            display: flex;
-          }
-        }
-      }
-    }
-  }
 </style>

src/components/page/header/index.less

@@ -0,0 +1,42 @@
+.page-header{
+  background: @base-bg-color;
+  padding: 16px 24px;
+  .page-header-wide{
+    &.head{
+      margin: auto;
+      max-width: 1400px;
+    }
+    &.side{
+    }
+    .breadcrumb{
+      margin-bottom: 20px;
+    }
+    .detail{
+      display: flex;
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+      .avatar {
+        margin:0 24px 0 0;
+      }
+      .main{
+        width: 100%;
+        .title{
+          font-size: 20px;
+          color: @title-color;
+          margin-bottom: 16px;
+        }
+        .content{
+          display: flex;
+          flex-wrap: wrap;
+          color: @text-color-second;
+        }
+        .extra{
+          display: flex;
+        }
+      }
+    }
+  }
+}

src/components/result/Result.vue

@@ -35,11 +35,11 @@ export default {
       color: @success-color;
     }
     .error {
-      color: red;
+      color: @error-color;
     }
     .title{
       font-size: 24px;
-      color: rgba(0,0,0,.85);
+      color: @title-color;
       font-weight: 500;
       line-height: 32px;
       margin-bottom: 16px;
@@ -47,11 +47,11 @@ export default {
     .desc{
       font-size: 14px;
       line-height: 22px;
-      color: rgba(0, 0, 0, 0.45);
+      color: @text-color-second;
       margin-bottom: 24px;
     }
     .content{
-      background: #fafafa;
+      background-color: @background-color-light;
       padding: 24px 40px;
       border-radius: 2px;
       text-align: left;

src/components/setting/Setting.vue

@@ -4,6 +4,7 @@
       <img-checkbox-group @change="values => setTheme(values[0])" :default-values="[theme]">
         <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" value="dark"/>
         <img-checkbox :title="$t('theme.light')" img="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" value="light"/>
+        <img-checkbox :title="$t('theme.night')" img="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg" value="night"/>
       </img-checkbox-group>
     </setting-item>
     <setting-item :title="$t('theme.color')">
@@ -136,7 +137,7 @@ export default {
 <style lang="less" scoped>
   .side-setting{
     min-height: 100%;
-    background-color: #fff;
+    background-color: @base-bg-color;
     padding: 24px;
     font-size: 14px;
     line-height: 1.5;

src/components/setting/i18n.js

@@ -5,6 +5,7 @@ module.exports = {
         title: '整体风格设置',
         light: '亮色菜单风格',
         dark: '暗色菜单风格',
+        night: '深夜模式',
         color: '主题色'
       },
       navigate: {
@@ -36,6 +37,7 @@ module.exports = {
         title: '整體風格設置',
         light: '亮色菜單風格',
         dark: '暗色菜單風格',
+        night: '深夜模式',
         color: '主題色'
       },
       navigate: {
@@ -67,6 +69,7 @@ module.exports = {
         title: 'Page Style Setting',
         light: 'Light Style',
         dark: 'Dark Style',
+        night: 'Night Style',
         color: 'Theme Color'
       },
       navigate: {

src/components/task/TaskGroup.vue

@@ -49,9 +49,9 @@ export default {
   .task-group{
     width: 33.33%;
     padding: 8px 8px;
-    background-color: #e1e4e8;
+    background-color: @background-color-light;
     border-radius: 6px;
-    border: 1px solid #d1d4d8;
+    border: 1px solid @shadow-color;
     .task-head{
       margin-bottom: 8px;
       .title{

src/components/task/TaskItem.vue

@@ -16,7 +16,6 @@ export default {
     margin-bottom: 16px;
     box-shadow: 0 1px 1px rgba(27,31,35,0.1);
     border-radius: 6px;
-    color: #24292e;
     & :hover{
       cursor: move;
       box-shadow: 0 1px 1px rgba(27,31,35,0.15);

src/components/tool/DetailList.vue

@@ -102,7 +102,7 @@ export default {
   .detail-list{
     .title {
       font-size: 16px;
-      color: rgba(0,0,0,.85);
+      color: @title-color;
       font-weight: bolder;
       margin-bottom: 16px;
     }
@@ -111,7 +111,7 @@ export default {
       line-height: 20px;
       padding-bottom: 16px;
       margin-right: 8px;
-      color: rgba(0,0,0,.85);
+      color: @title-color;
       white-space: nowrap;
       display: table-cell;
       &:after {
@@ -125,13 +125,13 @@ export default {
       line-height: 22px;
       width: 100%;
       padding-bottom: 16px;
-      color: rgba(0,0,0,.65);
+      color: @text-color;
       display: table-cell;
     }
     &.small{
       .title{
         font-size: 14px;
-        color: rgba(0,0,0,.65);
+        color: @text-color;
         font-weight: normal;
         margin-bottom: 12px;
       }

src/components/tool/Drawer.vue

@@ -76,7 +76,7 @@ export default {
     right: 0;
     bottom: 0;
     top: 0;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: @shadow-color;
     transition: all 0.5s;
     z-index: 100;
     &.open{
@@ -133,9 +133,9 @@ export default {
     .handler {
       height: 40px;
       width: 40px;
-      background-color: #fff;
+      background-color: @base-bg-color;
       font-size: 26px;
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 2px 8px @shadow-color;
       line-height: 40px;
     }
     &.left{

src/components/tool/FooterToolBar.vue

@@ -22,8 +22,8 @@ export default {
     bottom: 0;
     right: 0;
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
-    background: #fff;
+    background: @base-bg-color;
-    border-top: 1px solid #e8e8e8;
+    border-top: 1px solid @border-color-split;
     padding: 12px 24px;
     z-index: 9;
   }

src/components/tool/HeadInfo.vue

@@ -20,13 +20,13 @@ export default {
     flex-shrink: 0;
     align-self: center;
     span{
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
       display: inline-block;
       font-size: 14px;
       margin-bottom: 4px;
     }
     p{
-      color: rgba(0,0,0,.85);
+      color: @text-color;
       font-size: 24px;
       margin: 0;
     }

src/config/config.js

@@ -1,4 +1,5 @@
 // 自定义配置，参考 ./default/setting.js，需要自定义的属性在这里配置即可
 module.exports = {
   themeColor: '#13c2c2',
+  theme: 'night'
 }

src/config/default/index.js

@@ -1,4 +1,5 @@
 const animates = require('./animates')
 const setting = require('./setting')
+const theme = require('./theme')
 
-module.exports = {setting, animates}
+module.exports = {setting, animates, theme}

src/config/default/theme.js

@@ -0,0 +1,64 @@
+// 亮色模式
+const light = {
+  'layout-body-background': '#f0f2f5',
+  'body-background': '#fff',
+  'component-background': '#fff',
+  'heading-color': 'rgba(0, 0, 0, 0.85)',
+  'text-color': 'rgba(0, 0, 0, 0.65)',
+  'text-color-inverse': '#fff',
+  'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+  'shadow-color': 'rgba(0, 0, 0, 0.15)',
+  'border-color-split': '#f0f0f0',
+  'background-color-light': '#fafafa',
+  'table-selected-row-bg': '#fafafa',
+  'checkbox-check-color': '#fff',
+  'disabled-color': 'rgba(0, 0, 0, 0.25)',
+  'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
+  'menu-dark-highlight-color': '#fefefe',
+  'menu-dark-arrow-color': '#fefefe',
+  'btn-primary-color': '#fff',
+}
+
+// 暗色模式
+const dark = {
+  'layout-body-background': '#f0f2f5',
+  'body-background': '#fff',
+  'component-background': '#fff',
+  'heading-color': 'rgba(0, 0, 0, 0.85)',
+  'text-color': 'rgba(0, 0, 0, 0.65)',
+  'text-color-inverse': '#fff',
+  'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
+  'shadow-color': 'rgba(0, 0, 0, 0.15)',
+  'border-color-split': '#f0f0f0',
+  'background-color-light': '#fafafa',
+  'table-selected-row-bg': '#fafafa',
+  'checkbox-check-color': '#fff',
+  'disabled-color': 'rgba(0, 0, 0, 0.25)',
+  'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+  'menu-dark-highlight-color': '#fefefe',
+  'menu-dark-arrow-color': '#fefefe',
+  'btn-primary-color': '#fff',
+}
+
+// 黑夜模式
+const night = {
+  'layout-body-background': '#000',
+  'body-background': '#141414',
+  'component-background': '#141414',
+  'heading-color': 'rgba(255, 255, 255, 0.85)',
+  'text-color': 'rgba(255, 255, 255, 0.85)',
+  'text-color-inverse': '#141414',
+  'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
+  'shadow-color': 'rgba(255, 255, 255, 0.15)',
+  'border-color-split': '#303030',
+  'background-color-light': '#404040',
+  'table-selected-row-bg': '#404040',
+  'checkbox-check-color': '#141414',
+  'disabled-color': 'rgba(255, 255, 255, 0.25)',
+  'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
+  'menu-dark-highlight-color': '#fefefe',
+  'menu-dark-arrow-color': '#fefefe',
+  'btn-primary-color': '#141414',
+}
+
+module.exports = {light, dark, night}

src/layouts/CommonLayout.vue

@@ -24,12 +24,17 @@ export default {
   flex-direction: column;
   height: 100vh;
   overflow: auto;
-  background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
+  background-color: @layout-body-background;
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: 110px;
   background-size: 100%;
   .content{
     padding: 32px 0;
     flex: 1;
     @media (min-width: 768px){
+
       padding: 112px 0 24px;
     }
   }

src/layouts/PageLayout.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import PageHeader from '../components/page/PageHeader'
+import PageHeader from '@/components/page/header/PageHeader'
 import {mapState} from 'vuex'
 export default {
   name: 'PageLayout',
@@ -81,7 +81,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .page-header{
     margin: -24px -24px 0;
   }

src/layouts/header/AdminHeader.vue

@@ -8,7 +8,7 @@
       <a-divider v-if="isMobile" type="vertical" />
       <a-icon v-if="layout === 'side'" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
       <div v-if="layout == 'head' && !isMobile" class="admin-header-menu">
-        <i-menu style="height: 64px; line-height: 64px;" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
+        <i-menu class="head-menu" style="height: 64px; line-height: 64px;box-shadow: none" @i18nComplete="setRoutesI18n" :i18n="menuI18n" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
       </div>
       <div :class="['admin-header-right', headerTheme]">
           <header-search class="header-item" />
@@ -56,7 +56,11 @@ export default {
   computed: {
     ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang']),
     headerTheme () {
-      return (this.layout == 'side' && !this.isMobile) ? 'light' : this.theme
+      if (this.layout == 'side' && this.theme == 'dark' && !this.isMobile) {
+        return 'light'
+      }
+      return this.theme
+      // return (this.layout == 'side' && !this.isMobile && this.theme != 'night') ? 'light' : this.theme
     },
     langAlias() {
       let lang = this.langList.find(item => item.key == this.lang)
@@ -76,89 +80,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .trigger {
+@import "index";
-    font-size: 20px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color .3s;
-    &:hover{
-      color: @primary-color;
-    }
-  }
-  .admin-header{
-    padding: 0;
-    -webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
-    box-shadow: 0 1px 4px rgba(0,21,41,.08);
-    z-index: 1;
-    position: relative;
-    &.light{
-      background: #fff;
-    }
-    &.dark{
-      .trigger{
-        color: white;
-      }
-    }
-    .admin-header-wide{
-      &.head{
-        max-width: 1400px;
-        margin: auto;
-      }
-      &.side{
-        padding-right: 12px;
-      }
-      .logo {
-        height: 64px;
-        line-height: 58px;
-        vertical-align: top;
-        display: inline-block;
-        padding: 0 12px 0 24px;
-        cursor: pointer;
-        font-size: 20px;
-        &.pc{
-          padding: 0 12px 0 0;
-        }
-        img {
-          display: inline-block;
-          vertical-align: middle;
-        }
-        h1{
-          display: inline-block;
-          font-size: 16px;
-        }
-        &.dark h1{
-          color: #fff;
-        }
-      }
-      .admin-header-menu{
-        display: inline-block;
-      }
-      .admin-header-right{
-        float: right;
-        display: flex;
-        &.dark{
-          color: #fff;
-          a, i{
-            color: #fff !important;
-          }
-          .header-item:hover{
-            background-color: @primary-color;
-          }
-        }
-        .header-item{
-          padding: 0 12px;
-          cursor: pointer;
-          align-self: center;
-          &:hover{
-            background-color: @gray-3;
-          }
-          i{
-            font-size: 16px;
-            color: rgba(0,0,0,.65);
-          }
-        }
-      }
-    }
-  }
 </style>

src/layouts/header/HeaderNotice.vue

@@ -2,7 +2,7 @@
   <a-dropdown :trigger="['click']" v-model="show">
     <div slot="overlay">
       <a-spin :spinning="loading">
-        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{backgroundColor: 'white', width: '297px'}">
+        <a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
           <a-tab-pane tab="通知" key="1">
             <a-list class="tab-pane">
               <a-list-item>
@@ -32,7 +32,7 @@
       </a-spin>
     </div>
     <span @click="fetchNotice" class="header-notice">
-      <a-badge count="12">
+      <a-badge class="notice-badge" count="12">
         <a-icon :class="['header-notice-icon']" type="bell" />
       </a-badge>
     </span>
@@ -65,20 +65,24 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .header-notice{
     display: inline-block;
     transition: all 0.3s;
     span {
       vertical-align: initial;
     }
-    .header-notice-icon{
+    .notice-badge{
-      font-size: 16px;
+      color: inherit;
-      padding: 4px;
+      .header-notice-icon{
+        font-size: 16px;
+        padding: 4px;
+      }
     }
   }
   .dropdown-tabs{
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background-color: @base-bg-color;
+    box-shadow: 0 2px 8px @shadow-color;
     border-radius: 4px;
     .tab-pane{
       padding: 0 24px 12px;

src/layouts/header/index.less

@@ -0,0 +1,84 @@
+.admin-header{
+  padding: 0;
+  z-index: 2;
+  box-shadow: @shadow-down;
+  position: relative;
+  background: @base-bg-color;
+  &.dark{
+    background: @header-bg-color-dark;
+    color: white;
+  }
+  &.night{
+    .head-menu{
+      background: @base-bg-color;
+    }
+  }
+  .admin-header-wide{
+    &.head{
+      max-width: 1400px;
+      margin: auto;
+    }
+    &.side{
+      padding-right: 12px;
+    }
+    .logo {
+      height: 64px;
+      line-height: 58px;
+      vertical-align: top;
+      display: inline-block;
+      padding: 0 12px 0 24px;
+      cursor: pointer;
+      font-size: 20px;
+      color: inherit;
+      &.pc{
+        padding: 0 12px 0 0;
+      }
+      img {
+        vertical-align: middle;
+      }
+      h1{
+        color: inherit;
+        display: inline-block;
+        font-size: 16px;
+      }
+    }
+    .trigger {
+      font-size: 20px;
+      line-height: 64px;
+      padding: 0 24px;
+      cursor: pointer;
+      transition: color .3s;
+      &:hover{
+        color: @primary-color;
+      }
+    }
+    .admin-header-menu{
+      display: inline-block;
+    }
+    .admin-header-right{
+      float: right;
+      display: flex;
+      color: inherit;
+      .header-item{
+        color: inherit;
+        padding: 0 12px;
+        cursor: pointer;
+        align-self: center;
+        a{
+          color: inherit;
+          i{
+            font-size: 16px;
+          }
+        }
+      }
+      each(@theme-list, {
+        &.@{value} .header-item{
+          &:hover{
+            @class: ~'hover-bg-color-@{value}';
+            background-color: @@class;
+          }
+        }
+      })
+    }
+  }
+}

src/pages/dashboard/analysis/HotSearch.vue

@@ -107,7 +107,7 @@ export default {
 <style lang="less" scoped>
   .num-info{
     .title{
-      color: rgba(0,0,0,.45);
+      color: @text-color-second;
       font-size: 14px;
       height: 22px;
       line-height: 22px;
@@ -118,7 +118,7 @@ export default {
     }
     .value{
       .total{
-        color: rgba(0,0,0,.85);
+        color: @title-color;
         display: inline-block;
         line-height: 32px;
         height: 32px;
@@ -126,7 +126,7 @@ export default {
         margin-right: 32px;
       }
       .subtotal{
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
         font-size: 16px;
         vertical-align: top;
         margin-right: 0;

src/pages/dashboard/workplace/WorkPlace.vue

@@ -9,7 +9,7 @@
       <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
       <head-info class="split-right" :title="$t('visit')" content="2,223"/>
     </template>
-    <div>
+    <template>
       <a-row style="margin: 0 -12px">
         <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
           <a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" :title="$t('progress')" :body-style="{padding: 0}">
@@ -20,11 +20,11 @@
                   <a-card-meta :description="item.desc">
                     <div slot="title" class="card-title">
                       <a-avatar size="small" :src="item.logo" />
-                      <a>Alipay</a>
+                      <span>Alipay</span>
                     </div>
                   </a-card-meta>
                   <div class="project-item">
-                    <a href="/#/">科学搬砖组</a>
+                    <a class="group" href="/#/">科学搬砖组</a>
                     <span class="datetime">9小时前</span>
                   </div>
                 </a-card>
@@ -74,7 +74,7 @@
           </a-card>
         </a-col>
       </a-row>
-    </div>
+    </template>
   </page-layout>
 </template>
 
@@ -146,82 +146,5 @@ export default {
 </script>
 
 <style lang="less">
-  .project-list {
+@import "index";
-    .card-title {
-      font-size: 0;
-      a {
-        color: rgba(0, 0, 0, 0.85);
-        margin-left: 12px;
-        line-height: 24px;
-        height: 24px;
-        display: inline-block;
-        vertical-align: top;
-        font-size: 14px;
-        &:hover {
-          color: @primary-color;
-        }
-      }
-    }
-    .project-item {
-      display: flex;
-      margin-top: 8px;
-      overflow: hidden;
-      font-size: 12px;
-      height: 20px;
-      line-height: 20px;
-      a {
-        color: rgba(0, 0, 0, 0.45);
-        display: inline-block;
-        flex: 1 1 0;
-        &:hover {
-          color: @primary-color;
-        }
-      }
-      .datetime {
-        color: rgba(0, 0, 0, 0.25);
-        flex: 0 0 auto;
-        float: right;
-      }
-    }
-      .ant-card-meta-description {
-        color: rgba(0, 0, 0, 0.45);
-        height: 44px;
-        line-height: 22px;
-        overflow: hidden;
-      }
-  }
-  .item-group{
-    padding: 20px 0 8px 24px;
-    font-size: 0;
-    a{
-      color: rgba(0, 0, 0, 0.65);
-      display: inline-block;
-      font-size: 14px;
-      margin-bottom: 13px;
-      width: 25%;
-    }
-  }
-  .members {
-    a {
-      display: block;
-      margin: 12px 0;
-      line-height: 24px;
-      height: 24px;
-      .member {
-        font-size: 14px;
-        color: rgba(0,0,0,.65);
-        line-height: 24px;
-        max-width: 100px;
-        vertical-align: top;
-        margin-left: 12px;
-        transition: all 0.3s;
-        display: inline-block;
-      }
-      &:hover {
-        span {
-          color: @primary-color;
-        }
-      }
-    }
-  }
 </style>

src/pages/dashboard/workplace/index.less

@@ -0,0 +1,59 @@
+.project-list {
+  .card-title {
+    span{
+      vertical-align: middle;
+      &:last-child{
+        margin-left: 12px;
+      }
+    }
+  }
+  .project-item {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 8px;
+    overflow: hidden;
+    font-size: 12px;
+    color: inherit;
+    .group{
+      color: @text-color;
+      flex: 1 1 0;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+    .datetime {
+      color: @text-color-second;
+      flex: 0 0 auto;
+    }
+  }
+  .ant-card-meta-description {
+    height: 44px;
+    line-height: 22px;
+    overflow: hidden;
+  }
+}
+.item-group{
+  padding: 20px 0 8px 24px;
+  font-size: 0;
+  a{
+    color: inherit;
+    display: inline-block;
+    font-size: 14px;
+    margin-bottom: 13px;
+    width: 25%;
+  }
+}
+.members {
+  a {
+    display: block;
+    margin: 12px 0;
+    color: @text-color;
+    &:hover {
+      color: @primary-color;
+    }
+    .member {
+      vertical-align: middle;
+      margin-left: 12px;
+    }
+  }
+}

src/pages/detail/BasicDetail.vue

@@ -199,7 +199,7 @@ export default {
 
 <style lang="less" scoped>
   .title {
-    color: rgba(0,0,0,.85);
+    color: @title-color;
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 16px;

src/pages/form/advance/AdvancedForm.vue

@@ -19,7 +19,7 @@
 import RepositoryForm from './RepositoryForm'
 import TaskForm from './TaskForm'
 import UserForm from './UserForm'
-import FooterToolBar from '../../../components/tool/FooterToolBar'
+import FooterToolBar from '@/components/tool/FooterToolBar'
 
 export default {
   name: 'AdvancedForm',

src/pages/list/CardList.vue

@@ -63,7 +63,6 @@ export default {
     border-radius: 48px;
   }
   .new-btn{
-    background-color: #fff;
     border-radius: 2px;
     width: 100%;
     height: 187px;

src/pages/list/StandardList.vue

@@ -70,7 +70,7 @@ export default {
 
 <style lang="less" scoped>
   .list-content-item{
-    color: rgba(0,0,0,.45);
+    color: @text-color-second;
     display: inline-block;
     vertical-align: middle;
     font-size: 14px;

src/pages/list/search/SearchLayout.vue

@@ -2,7 +2,7 @@
     <div>
       <div class="search-head">
         <div class="search-input">
-          <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
+          <a-input-search class="search-ipt" style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
         </div>
         <div style="padding: 0 24px">
           <a-tabs :tabBarStyle="{margin: 0}" @change="navigate" :activeKey="activeKey">
@@ -57,7 +57,7 @@ export default {
 
 <style lang="less" scoped>
   .search-head{
-    background-color: #fff;
+    background-color: @base-bg-color;
     margin: -25px -24px -24px;
     .search-input{
       text-align: center;

src/pages/login/Login.vue

@@ -130,7 +130,7 @@ export default {
         }
         .title {
           font-size: 33px;
-          color: rgba(0,0,0,.85);
+          color: @title-color;
           font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
           font-weight: 600;
           position: relative;
@@ -139,7 +139,7 @@ export default {
       }
       .desc {
         font-size: 14px;
-        color: rgba(0,0,0,.45);
+        color: @text-color-second;
         margin-top: 12px;
         margin-bottom: 40px;
       }
@@ -157,7 +157,7 @@ export default {
       }
       .icon {
         font-size: 24px;
-        color: rgba(0, 0, 0, 0.2);
+        color: @text-color-second;
         margin-left: 16px;
         vertical-align: middle;
         cursor: pointer;

src/pages/result/Error.vue

@@ -5,7 +5,7 @@
           <a-button type="primary" >返回修改</a-button>
         </template>
         <div>
-          <div style="fontSize: 16px; color: rgba(0, 0, 0, 0.85); fontWeight: 500; marginBottom: 16px">
+          <div style="fontSize: 16px; fontWeight: 500; marginBottom: 16px">
             您提交的内容有如下错误：
           </div>
           <div style="margin-bottom: 16px">

src/theme/default/color.less

@@ -14,3 +14,21 @@
 @gray-11: #1f1f1f;
 @gray-12: #141414;
 @gray-13: #000000;
+
+@title-color: @heading-color;
+@text-color: @text-color;
+@text-color-second: @text-color-secondary;
+@base-bg-color: @body-background;
+@bg-color: @layout-body-background;
+@hover-bg-color: rgba(0, 0, 0, 0.025);
+@hover-bg-color-light: @hover-bg-color;
+@hover-bg-color-dark: @primary-7;
+@hover-bg-color-night: rgba(255, 255, 255, 0.025);
+@header-bg-color-dark: @layout-header-background;
+
+@shadow-down: @shadow-1-down;
+@shadow-up: @shadow-1-up;
+@shadow-left: @shadow-1-left;
+@shadow-right: @shadow-1-right;
+
+@theme-list: light, dark, night;

src/utils/colors.js

@@ -3,8 +3,13 @@ const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const antPrimaryColor = '#1890ff'
 // ant design vue 默认dark主题色，若主题色为默认主题色则返回此 dark 主题色系
 const antDarkColors = ['#000c17', '#001529', '#002140']
+const nightColors = ['#151515', '#1f1f1f', '#1f1f1f']
 
-function getDarkColors(color) {
+
+function getDarkColors(color, theme) {
+  if (theme == 'night') {
+    return nightColors
+  }
   if (color == antPrimaryColor) {
     return antDarkColors
   }
@@ -13,4 +18,37 @@ function getDarkColors(color) {
   return darkColors
 }
 
-module.exports = {getDarkColors}
+function getBgColors(theme) {
+  return theme == 'light' ? ['#f0f2f5', '#ffffff'] : ['#000000', '#141414']
+}
+
+function toNum3(color) {
+  if (isHex(color)) {
+    return varyColor.toNum3(color)
+  }
+  let colorStr = ''
+  if (isRgb(color)) {
+    colorStr = color.slice(5, color.length)
+  } else if (isRgba(color)) {
+    colorStr = color.slice(6, color.lastIndexOf(','))
+  }
+  let rgb = colorStr.split(',')
+  const r = parseInt(rgb[0])
+  const g = parseInt(rgb[1])
+  const b = parseInt(rgb[2])
+  return [r, g, b]
+}
+
+function isHex(color) {
+  return color.length >= 4 && color[0] == '#'
+}
+
+function isRgb(color) {
+  return color.length >= 10 && color.slice(0, 3) == 'rgb'
+}
+
+function isRgba(color) {
+  return color.length >= 13 && color.slice(0, 4) == 'rgba'
+}
+
+module.exports = {getDarkColors, getBgColors, isHex, isRgb, isRgba, toNum3}

src/utils/themeUtil.js

@@ -1,39 +1,44 @@
 // const varyColor = require('webpack-theme-color-replacer/client/varyColor')
 const client = require('webpack-theme-color-replacer/client')
 const generate =  require('@ant-design/colors/lib/generate').default
-const themeColor = require('../config').themeColor
+const {theme, themeColor} = require('../config')
-const getDarkColors = require('../utils/colors').getDarkColors
+const {getDarkColors, isHex, toNum3} = require('../utils/colors')
+const themeCfg = require('../config/default').theme
 
 module.exports = {
   primaryColor: themeColor,
-  getThemeColors(color) {
+  getThemeColors(color, $theme) {
-    const palettes = generate(color)
+    let _theme = $theme || theme
-    const darkBgColors = getDarkColors(color)
+    let opts = (_theme == 'night') ? {theme: 'dark'} : undefined
-    return palettes.concat(darkBgColors)
+    let palettes = generate(color, opts)
+    const primary = palettes[5]
+    palettes = palettes.concat(generate(primary))
+    console.log(palettes)
+    const darkBgColors = getDarkColors(color, _theme)
+    const _themeCfg = themeCfg[_theme]
+    const bgColors = Object.keys(_themeCfg)
+      .map(key => _themeCfg[key])
+      .map(color => isHex(color) ? color : toNum3(color).join(','))
+    let rgb = toNum3(primary).join(',')
+    return palettes.concat(darkBgColors).concat(bgColors).concat(rgb)
   },
-  changeThemeColor (newColor) {
+  changeThemeColor (newColor, $theme) {
-    let lastColor = this.lastColor || this.primaryColor
     let options = {
-      oldColors: this.getThemeColors(lastColor),
+      newColors: this.getThemeColors(newColor, $theme)
-      newColors: this.getThemeColors(newColor)
     }
     let promise = client.changer.changeColor(options)
-    this.lastColor = lastColor
     return promise
   },
   changeSelector (selector) {
     switch (selector) {
       case '.ant-layout-sider':
         return '.ant-layout-sider-dark'
-      case '.ant-calendar-today .ant-calendar-date':
+      case '.ant-menu-dark .ant-menu-inline.ant-menu-sub':
-        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
+        return '.ant-menu-dark .ant-menu-inline:not(.ant-menu-sub)'
-      case '.ant-btn:focus,.ant-btn:hover':
+      case '.ant-checkbox-checked .ant-checkbox-inner::after':
-        return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
+        return '.ant-checkbox-checked :not(.ant-checkbox-inner)::after'
-      case '.ant-btn.active,.ant-btn:active':
+      case '.side-menu .logo h1':
-        return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
+        return '.side-menu .logo :not(h1)'
-      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-      case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
-        return ':not(.ant-steps-item-process)' + selector
       case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
       case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
         return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
@@ -48,14 +53,29 @@ module.exports = {
     }
   },
   modifyVars(color) {
-    let darkColors = getDarkColors(color)
+    let opts = (theme == 'night') ? {theme: 'dark'} : undefined
+    const darkColors = getDarkColors(color, theme)
+    const palettes = generate(color, opts)
     return {
-      'primary-color': color,
+      'primary-color': palettes[5],
-      'info-color': color,
+      'primary-1': palettes[0],
-      'processing-color': color,
+      'primary-2': palettes[1],
+      'primary-3': palettes[2],
+      'primary-4': palettes[3],
+      'primary-5': palettes[4],
+      'primary-6': palettes[5],
+      'primary-7': palettes[6],
+      'primary-8': palettes[7],
+      'primary-9': palettes[8],
+      'primary-10': palettes[9],
+      'info-color': palettes[5],
+      'alert-info-bg-color': palettes[0],
+      'alert-info-border-color': palettes[3],
+      'processing-color': palettes[5],
       'menu-dark-submenu-bg': darkColors[0],
       'layout-header-background': darkColors[1],
-      'layout-trigger-background': darkColors[2]
+      'layout-trigger-background': darkColors[2],
+      ...themeCfg[theme]
     }
   }
 }