change theme

src/components/Common/DataActions/index.vue

@@ -303,8 +303,6 @@ $color-drop-menu-border: #e4e7ed;
   ::v-deep .action-item.el-dropdown .el-button {
     display: block;
     color: var(--color-primary);
-    background-color: $color-btn-background;
-    border-color: $color-btn-focus-background;
 
     &:focus {
       color: $btn-text-color;

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -128,8 +128,12 @@ export default {
 
 <style lang="scss" scoped>
 .menu-main.el-menu {
-  background-color: transparent;
-  letter-spacing: 0.09em;
+  background-color: #1e2733 !important;
+  border-radius: 8px;
+  padding: 6px;
+  min-width: 180px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+  letter-spacing: 0.05em;
 
   ::v-deep .el-submenu .el-submenu__title {
     height: 38px;
@@ -143,17 +147,24 @@ export default {
 
   & ::v-deep .el-icon-arrow-down {
     font-size: 13px;
-    color: #606266;
+    color: var(--menu-text);
   }
 
   .el-menu-item {
     height: 38px;
-    width: 160px;
     line-height: 28px;
-    padding: 4px 24px;
+    padding: 6px 14px;
+    color: var(--menu-text);
+    border-radius: 6px;
 
     &:hover {
-      background-color: var(--menu-hover);
+      color: var(--menu-text-active);
+      background: var(--menu-hover);
+    }
+
+    &.is-active {
+      color: #e5edf7;
+      background: linear-gradient(90deg, rgba(64, 158, 255, 0.28) 0%, #22344b 30%, #1e2733 100%);
     }
   }
 }
@@ -196,13 +207,14 @@ export default {
   vertical-align: middle !important;
   font-size: 14px;
   text-align: center;
-  color: #1F2329;
+  color: var(--menu-text);
   margin-right: 10px;
 }
 
 .icons-title {
   display: inline-block;
   font-size: 13px;
+  color: inherit;
 
   .menu-main.mobile-view-switch ::v-deep .el-submenu__icon-arrow {
     right: 10px;

src/layout/components/NavHeader/index.vue

@@ -217,7 +217,7 @@ export default {
 
       & ::v-deep .svg-icon {
         line-height: 40px;
-        color: #fff;
+        color: #eef3fb;
         font-size: 15px;
       }
 
@@ -242,7 +242,7 @@ export default {
       }
 
       & ::v-deep i {
-        color: #fff;
+        color: #eef3fb;
         font-size: 16px;
 
         &.el-icon-arrow-down {
@@ -262,7 +262,7 @@ export default {
       }
 
       &:hover {
-        background: rgba(0, 0, 0, 12%);
+        background: rgba(255, 255, 255, 0.08);
       }
     }
   }

src/layout/components/NavLeft/index.vue

@@ -9,7 +9,12 @@
       </div>
       <div class="nav-title">
         <span :class="switchViewOtherClasses" class="switch-view active-switch-view">
-          <el-popover :open-delay="200" placement="right-start" trigger="hover">
+          <el-popover
+            :open-delay="200"
+            placement="right-start"
+            popper-class="switcher-popper"
+            trigger="hover"
+          >
             <span slot="reference" style="width: 100%">
               <el-tooltip
                 v-show="!isCollapse"
@@ -168,9 +173,9 @@ export default {
 
 $mobileHeight: 40px;
 $origin-color: #ffffff;
-$hover-bg-color: #e6e6e6;
-$hover-text-color: #606266;
-$hover-border-color: #d2d2d2;
+$hover-bg-color: var(--menu-hover);
+$hover-text-color: var(--menu-text-active);
+$hover-border-color: transparent;
 
 .left-side-wrapper {
   .nav-header {
@@ -227,9 +232,9 @@ $hover-border-color: #d2d2d2;
       white-space: nowrap;
       cursor: pointer;
       transition: all 0.3s;
-      color: var(--color-text-primary);
+      color: var(--menu-text);
       background-color: var(--menu-bg);
-      border-bottom: 1px solid var(--color-border);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 
       .switch-view {
         width: 100%;
@@ -273,8 +278,9 @@ $hover-border-color: #d2d2d2;
   .nav-footer {
     display: flex;
     justify-content: flex-start;
-    border-top: 1px solid rgba(31, 35, 41, 0.15);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
     background-color: $subMenuBg;
+    color: var(--menu-text);
 
     .toggle-bar {
       display: flex;
@@ -333,6 +339,30 @@ $hover-border-color: #d2d2d2;
       }
     }
   }
+
+  // view switcher popover
+  ::v-deep .switcher-popper {
+    padding: 8px 6px;
+    background: #1e2733;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
+    .el-menu {
+      background: transparent;
+    }
+    .el-menu-item {
+      color: var(--menu-text);
+      border-radius: 6px;
+      margin-bottom: 4px;
+      &:hover {
+        color: var(--menu-text-active);
+        background: var(--menu-hover);
+      }
+      &.is-active {
+        color: #e5edf7;
+        background: linear-gradient(90deg, rgba(64, 158, 255, 0.28) 0%, #22344b 30%, #1e2733 100%);
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 992px) {

src/styles/default-theme.scss

@@ -1,10 +1,10 @@
 :export {
-  --color-primary: #1ab394;
+  --color-primary: #409EFF;
   --color-success: #2793d7;
   --color-info: #1c84c6;
   --color-warning: #f8ac59;
   --color-danger: #ed5565;
-  --color-link: #1c84c6;
+  --color-link: #409EFF;
   --color-text-primary: #292827;
   --color-text-secondary: #7c7c7c;
   --color-icon-primary: #605e5c;
@@ -13,10 +13,10 @@
   --color-disabled-background: #F5F7FA;
   --color-disabled: #bbb;
   --color-help-text: #8F959E;
-  --banner-bg: #148f76;
-  --submenu-bg: #ffffff;
-  --menu-bg: #ffffff;
-  --menu-text: #646A73;
-  --menu-text-active: #1ab394;
-  --menu-hover: #ffffff;
+  --banner-bg: #1e2733;
+  --submenu-bg: #1e2733;
+  --menu-bg: #1e2733;
+  --menu-text: #cdd5e3;
+  --menu-text-active: #36a8ff;
+  --menu-hover: #1f3047;
 }

src/styles/element-variables.scss

@@ -18,7 +18,7 @@ $--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !defau
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
-$--color-primary: #1ab394 !default;
+$--color-primary: #409eff !default;
 /// color|1|Background Color|4
 $--color-white: #ffffff !default;
 /// color|1|Background Color|4
@@ -73,8 +73,8 @@ $--background-color-base: #f5f7fa !default;
 
 /* Link
 -------------------------- */
-$--link-color: $--color-success !default;
-$--link-hover-color: $--color-success-lighter !default;
+$--link-color: $--color-primary !default;
+$--link-hover-color: $--color-primary-light-2 !default;
 
 /* Border
 -------------------------- */

src/styles/menu.scss

@@ -15,21 +15,68 @@ $single-menu-height: 38px;
   }
 }
 
+.switcher-popper {
+  padding: 6px !important;
+  background: var(--menu-bg) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
+  &.el-popper[x-placement^='right'] .popper__arrow,
+  &.el-popper[x-placement^='left'] .popper__arrow,
+  &.el-popper[x-placement^='top'] .popper__arrow,
+  &.el-popper[x-placement^='bottom'] .popper__arrow {
+    border-color: transparent;
+    border-right-color: rgba(255, 255, 255, 0.08);
+  }
+  &.el-popper[x-placement^='right'] .popper__arrow:after,
+  &.el-popper[x-placement^='left'] .popper__arrow:after,
+  &.el-popper[x-placement^='top'] .popper__arrow:after,
+  &.el-popper[x-placement^='bottom'] .popper__arrow:after {
+    border-color: transparent;
+    border-right-color: var(--menu-bg);
+  }
+
+  .el-menu {
+    background: transparent !important;
+    padding: 0;
+  }
+
+  .el-menu-item {
+    color: var(--menu-text);
+    border-radius: 6px;
+
+    &:hover {
+      color: var(--menu-text-active);
+      background: var(--menu-hover);
+    }
+
+    &.is-active {
+      color: #e5edf7;
+      background: linear-gradient(90deg, rgba(64, 158, 255, 0.28) 0%, #22344b 30%, #1e2733 100%);
+    }
+  }
+
+  .icons,
+  .icons-title {
+    color: inherit !important;
+  }
+}
+
 @mixin collapse-active {
-  background-color: #e6e6e6;
+  background-color: var(--menu-hover);
 
   &:before {
-    width: 0
+    width: 0;
   }
 }
 
 .el-menu--vertical {
-  background-color: #fff;
+  background-color: var(--menu-bg);
 }
 
 .el-menu {
   border-right: none !important;
   background-color: inherit !important;
+  color: var(--menu-text);
 
   .svg-icon, .el-icon, .fa {
     width: $icon-width !important;
@@ -66,6 +113,12 @@ $single-menu-height: 38px;
     align-items: center;
     height: $single-menu-height;
     line-height: $single-menu-height;
+    color: var(--menu-text);
+
+    &:hover {
+      color: var(--menu-text-active);
+      background: linear-gradient(90deg, rgba(54, 168, 255, 0.12) 0%, var(--menu-hover) 40%, #22344b 100%);
+    }
   }
 
   // 通用 item 样式
@@ -73,23 +126,29 @@ $single-menu-height: 38px;
     display: flex;
     align-items: center;
     height: $single-menu-height;
-    color: var(--color-text-primary);
+    color: var(--menu-text);
     letter-spacing: 0.02em;
     font-size: 12px;
     min-width: 200px;
 
+    &:hover {
+      color: var(--menu-text-active);
+      background: linear-gradient(90deg, rgba(54, 168, 255, 0.12) 0%, var(--menu-hover) 40%, #22344b 100%);
+    }
+
     &.is-active {
-      background-color: var(--menu-hover);
+      color: #e5edf7;
+      background: linear-gradient(90deg, rgba(54, 168, 255, 0.28) 0%, #22344b 30%, #1e2733 100%);
       @include only_active;
 
       span {
-        color: var(--color-primary);
+        color: #e5edf7;
       }
     }
   }
 
   .group-title {
-    color: var(--color-text-secondary);
+    color: var(--menu-text);
     // 分组的 title 样式
     & > span {
       display: block;
@@ -98,6 +157,7 @@ $single-menu-height: 38px;
       font-weight: 600;
       line-height: 25px;
       letter-spacing: .07em;
+      opacity: 0.75;
     }
 
     .nest-menu {
@@ -107,12 +167,13 @@ $single-menu-height: 38px;
       // 存在三级子菜单
       .level1-menu {
         &.el-submenu.is-opened {
-          border-top: solid 1px var(--color-border);
+          border-top: solid 1px rgba(255, 255, 255, 0.06);
         }
 
         &.el-submenu.is-active {
           .el-submenu__title {
-            color: var(--color-primary);
+            color: #e5edf7;
+            background: linear-gradient(90deg, rgba(54, 168, 255, 0.28) 0%, #22344b 30%, #1e2733 100%);
           }
 
           .el-submenu__title, li {
@@ -155,7 +216,8 @@ $single-menu-height: 38px;
       }
 
       .el-divider.el-divider--horizontal {
-        margin: 12px 0 !important;
+        margin: 0 !important;
+        display: none;
       }
 
       .level1-menu {

src/utils/theme/color.js

@@ -86,7 +86,7 @@ export function changeMenuColor(themeColors) {
 
   // 后端不用返回 --menu-hover
   const menuActiveTextColor = colors['--menu-text-active']
-  if (menuActiveTextColor) {
+  if (menuActiveTextColor && !colors['--menu-hover']) {
     colors['--menu-hover'] = mix(white, menuActiveTextColor.replace(/#/g, ''), 90)
   }
 

src/utils/theme/index.js

@@ -102,4 +102,3 @@ export function replaceStyleColors(data) {
 
   return data
 }
-