新增加暗黑主题

src/assets/styles/black.scss

@@ -0,0 +1,139 @@
+// 黑夜模式
+[data-theme='theme-black'] {
+  // root
+  --base-menu-color: #304156;
+  --base-menu-color-active: #f4f4f5;
+  --base-bg-main: #304156;
+  --base-menu-background: #304156;
+  --base-logo-title-color: #ffffff;
+  --base-topBar-background: #304156 !important;
+  --base-topBar-color: #fff;
+  --base-color: #304156;
+  // --base-tags-bg-border: #304156 !important;
+  //缩小状态下子菜单选中颜色
+  // --base-sub-menu-hover: #000;
+
+  --next-color-white: #ffffff;
+  --next-color-disabled: #304156;
+  --next-color-bar: #dadada;
+  --next-color-primary: #304156;
+  --next-border-color: #424242;
+  --next-border-black: #333333;
+  --next-text-color-regular: #9b9da1;
+  --next-text-color-placeholder: #7a7a7a;
+  --next-color-hover: #3c3c3c;
+  --next-color-hover-rgba: rgba(0, 0, 0, 0.3);
+
+  // el-ement ui 设置
+  --el-fill-color-light: var(--next-color-hover-rgba) !important;
+  --el-fill-color-blank: var(--base-bg-main) !important;
+  // element plus
+  --el-table-bg-color: var(--el-fill-color-blank);
+  --el-color-white: var(--next-color-disabled) !important;
+  --el-text-color-primary: var(--next-color-bar) !important;
+  --el-border-color-base: var(--next-border-black) !important;
+  --el-border-color-light: var(--next-border-black) !important;
+  --el-text-color-regular: var(--next-text-color-regular) !important;
+  --el-bg-color: var(--base-bg-main) !important;
+  --el-color-success-lighter: var(--next-color-primary) !important;
+  --el-color-warning-lighter: var(--next-color-primary) !important;
+  --el-color-danger-lighter: var(--next-color-primary) !important;
+  --el-color-primary-lighter: var(--next-color-primary) !important;
+  --el-color-primary-light-9: var(--next-color-hover) !important;
+  --el-text-color-disabled-base: var(--el-color-primary) !important;
+  --el-border-color-lighter: var(--next-border-black) !important;
+  --el-text-color-placeholder: var(--next-text-color-placeholder) !important;
+  --el-disabled-bg-color: var(--next-color-disabled) !important;
+  --el-fill-base: var(--next-color-white) !important;
+  // el-date-picker bg
+  --el-bg-color-overlay: var(--base-bg-main) !important;
+  // drawer
+  .drawer-item,
+  .drawer-title {
+    color: var(--next-color-white) !important;
+  }
+
+  // button
+  .el-button {
+    &:hover {
+      border-color: var(--next-border-color) !important;
+    }
+  }
+  .el-button--primary,
+  .el-button--info,
+  .el-button--danger,
+  .el-button--success,
+  .el-button--warning {
+    --el-button-text-color: var(--next-color-white) !important;
+    --el-button-hover-text-color: var(--next-color-white) !important;
+    --el-button-disabled-text-color: var(--next-color-white) !important;
+    &:hover {
+      border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
+    }
+  }
+
+  // pagination
+  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: var(--next-color-white) !important;
+  }
+  .el-pagination.is-background .btn-next,
+  .el-pagination.is-background .btn-prev,
+  .el-pagination.is-background .el-pager li {
+    background-color: var(--main-bg-color);
+  }
+
+  // tabs
+  .el-tabs--border-card {
+    background-color: var(--el-color-white) !important;
+  }
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    background: var(--next-color-primary) !important;
+  }
+
+  // alert / notice-bar
+  .home-card-item {
+    border: 1px solid var(--next-border-color-light) !important;
+  }
+  .el-alert,
+  .notice-bar {
+    border: 1px solid var(--next-border-color) !important;
+    background-color: var(--next-color-disabled) !important;
+  }
+
+  // colorPicker
+  .el-color-picker__mask {
+    background: unset !important;
+  }
+  .el-color-picker__trigger {
+    border: 1px solid var(--next-border-color-light) !important;
+  }
+
+  // popper / dropdown
+  .el-popper {
+    border: 1px solid var(--next-border-color) !important;
+    color: var(--el-text-color-primary) !important;
+    .el-popper__arrow:before {
+      background: var(--el-color-white) !important;
+      border: 1px solid var(--next-border-color);
+    }
+    a {
+      color: var(--el-text-color-primary) !important;
+    }
+  }
+  .el-popper,
+  .el-dropdown-menu {
+    background: var(--el-color-white) !important;
+  }
+  .el-dropdown-menu__item:hover:not(.is-disabled) {
+    background: var(--el-bg-color) !important;
+  }
+  .el-dropdown-menu__item.is-disabled {
+    font-weight: 700 !important;
+  }
+
+  //tags menu 选择
+  .tags-view-container .tags-view-wrapper .tags-view-item.active {
+    background-color: var(--base-color) !important;
+    // border-color: var(--base-color) !important;
+  }
+}

src/assets/styles/index.scss

@@ -5,26 +5,26 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
-
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
+@import './black.scss';
 
 label {
   font-weight: 700;
 }
 
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
+html,
+body,
 #app {
+  margin: 0;
+  padding: 0;
+  width: 100%;
   height: 100%;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  background-color: var(--base-bg-main);
+  // overflow: hidden;
+  position: relative;
 }
 
 *,
@@ -91,7 +91,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -103,7 +103,7 @@ div:focus {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .link-type,
@@ -197,10 +197,10 @@ div:focus {
   margin-bottom: auto;
 }
 .w20 {
-	width: 20%;
+  width: 20%;
 }
 .w100 {
-	width: 100%;
+  width: 100%;
 }
 
 .pull-right {
@@ -269,4 +269,4 @@ div:focus {
 
 .table-td-thumb {
   width: 56px;
-}
+}

src/assets/styles/sidebar.scss

@@ -8,7 +8,7 @@
 
   // 展开sidebar状态设置svg-icon边距
   .openSidebar .layout-sidebar__container .svg-icon {
-    margin-right: 5px;
+    margin-right: 10px;
   }
   .hideSidebar {
     .layout-sidebar__container {

src/assets/styles/variables.module.scss

@@ -15,7 +15,10 @@ $panGreen: #30b08f;
   --base-menu-background: #ffffff;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;
+	--base-topBar-color: #5a5e66;
   --base-sidebar-width: 210px;
+
+  --base-tags-bg-border: #d8dce5;
 }
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {
@@ -30,8 +33,6 @@ $panGreen: #30b08f;
 
   //缩小状态下子菜单选中颜色
   --base-sub-menu-hover: #ccc;
-
-  // el-ement ui 设置
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
@@ -48,15 +49,3 @@ $panGreen: #30b08f;
   --el-fill-color-blank: #304156;
   --el-text-color-primary: #bfcbd9;
 }
-
-// sidebar
-//https://github.com/ElemeFE/element/issues/12951
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-/* js中import， import variables from '@/assets/styles/variables.module.scss'
-   template中使用 eg：variables.menuColor 
-*/
-
-// :export {
-// }