feat: 暗黑模式自定义样式统一调整

Former-commit-id: 7af83db7f0e80c03e78db388b802168847ded436

src/styles/dark.scss

@@ -1,11 +1,19 @@
 // only scss variables
 
 $--colors: (
-  "primary": (
-    "base": #589ef8,
-  ),
+  "primary": ("base": red),
 );
 
-@forward "element-plus/theme-chalk/src/dark/var.scss" with (
-  $colors: $--colors
-);
+@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
+
+
+html.dark {
+  .navbar {
+    background-color: var(--el-bg-color);
+    color: var(--el-text-color-regular);
+  }
+
+  .hamburger {
+    fill: var(--el-text-color-regular);
+  }
+}

src/styles/global.scss

@@ -0,0 +1,23 @@
+html,
+body,
+#app {
+    height: 100%;
+}
+
+svg {
+    display: inline-block;
+    vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+}
+
+// main-container global css
+.app-container {
+    padding: 20px;
+}
+
+.search {
+    padding: 18px 0 0 10px;
+    margin-bottom: 10px;
+    border-radius: var(--el-card-border-radius);
+    border: 1px solid var(--el-border-color-light);
+    box-shadow: var(--el-box-shadow-light);
+}

src/styles/index.scss

@@ -1,20 +1,5 @@
-@import 'src/styles/variables.module';
-@import 'src/styles/element-plus';
+@import './element.scss';
 @import './sidebar.scss';
 @import './tailwind.scss';
-@import './reset.scss';
-
-
-// main-container global css
-.app-container {
-  padding: 20px;
-}
-
-.search{
-  padding: 18px 0 0 10px;
-  margin-bottom: 10px;
-  border-radius: 5px;
-  border: 1px solid #eee;
-  box-shadow: 1px 1px 1px #eee;
-}
-
+@import './global.scss';
+@import './dark.scss';

src/styles/mixin.scss

@@ -1,14 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}

src/styles/reset.scss

@@ -1,4 +0,0 @@
-
-svg{
-  display: inline-block;
-}

src/styles/sidebar.scss

@@ -70,11 +70,11 @@
       }
     }
 
-    .is-active > .el-sub-menu__title {
+    .is-active>.el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -88,6 +88,7 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+
       .svg-icon {
         margin-right: 0px;
       }
@@ -117,7 +118,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -136,8 +137,8 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
+        &>.el-sub-menu__title {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -174,6 +175,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -183,17 +185,18 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
+
     .sub-el-icon {
       margin-right: 12px;
       margin-left: -2px;
     }
   }
 
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
+  .nest-menu .el-sub-menu>.el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -202,7 +205,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
+  >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
@@ -219,25 +222,4 @@
       border-radius: 20px;
     }
   }
-}
-body[layout="mix"] {
-
-  .horizontal-header{
-    .el-menu-item{
-      height: 50px!important;
-      line-height: 50px!important;
-    }
-
-    .el-sub-menu__title {
-      background-color: #001529!important;
-      height: 50px!important;
-    }
-  }
-  .horizontal-header-right>div {
-    color: #FFF;
-  }
-  .svg-icon{
-    margin-right: 16px;
-  }
-
-}
+}

src/styles/ts-variables.module.scss

@@ -0,0 +1,6 @@
+// 导出 variables.module.scss 变量提供给TypeScript使用
+:export {
+    menuBg: $menuBg;
+    menuText: $menuText;
+    menuActiveText: $menuActiveText
+}

src/styles/variables.module.scss

@@ -1,25 +1,11 @@
-// sidebar
+// 全局SCSS变量
 $menuText: #bfcbd9;
 $menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5;
-
 $menuBg: #304156;
 $menuHover: #263445;
 
 $subMenuBg: #1f2d3d;
+$subMenuActiveText: #f4f4f5;
 $subMenuHover: #001528;
 
-$sideBarWidth: 210px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}
+$sideBarWidth: 210px;