refactor: 暗黑模式自定义样式调整

Former-commit-id: 3857806786944e41c688cb6e81a5d90276720e2a

src/styles/dark.scss

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

src/styles/index.scss

@@ -2,4 +2,28 @@
 @import './sidebar.scss';
 @import './tailwind.scss';
 @import './global.scss';
-@import './dark.scss';
+@import './dark.scss';
+
+// 自定义全局CSS变量
+:root{
+  --menuBg:#304156;
+  --menuText:#bfcbd9;
+  --menuActiveText:#409eff;
+  --menuHover:#263445;
+
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+
+}
+
+html.dark{
+  --menuBg:var(--el-menu-bg-color);
+  --menuText:var(----el-menu-text-color);
+  --menuActiveText:var(--el-menu-active-color);
+  --menuHover:var(--el-menu-hover-bg-color);
+
+  --subMenuBg: var(--el-menu-bg-color);
+  --subMenuActiveText:var(--el-menu-active-color);
+  --subMenuHover: var(--el-menu-hover-bg-color);
+}

src/styles/variables.module.scss

@@ -1,11 +1,11 @@
 // 全局SCSS变量
-$menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$menuBg: #304156;
-$menuHover: #263445;
+$menuBg: var(--menuBg);
+$menuText: var(--menuText);
+$menuActiveText: var(--menuActiveText);
+$menuHover: var(--menuHover);
 
-$subMenuBg: #1f2d3d;
-$subMenuActiveText: #f4f4f5;
-$subMenuHover: #001528;
+$subMenuBg:var(--subMenuBg);
+$subMenuActiveText:var(--subMenuActiveText);
+$subMenuHover:var(--subMenuHover);
 
-$sideBarWidth: 210px;
+$sideBarWidth: 210px;