fix: 修改UI结构，封装切换按钮

src/styles/common/_dark.scss

@@ -0,0 +1,10 @@
+@import './var.scss';
+
+$dark: (
+  //背景
+    background-color: $--color-dark-bg-1,
+  //渐变背景
+    background-image: linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-2 100%),
+  //毛玻璃
+    filter-color: $--filter-color-login-dark
+);

src/styles/common/_light.scss

@@ -0,0 +1,10 @@
+@import './var.scss';
+
+$light: (
+  //背景
+    background_color: $--color-light-fill-3,
+  //渐变背景
+    background-image: linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
+  //毛玻璃
+    filter-color: $--filter-color-login-light
+);

src/styles/common/mixins/mixins.scss

@@ -1,6 +1,6 @@
 @import './config.scss';
 @import './function.scss';
-@import './theme.scss';
+@import '../theme.scss';
 
 @mixin go($block) {
   $B: $namespace + '-' + $block;

src/styles/common/mixins/theme.scss

@@ -1,25 +0,0 @@
-@import './config.scss';
-@import '../var.scss';
-
-$themes: (
-  #{$theme-light}: (
-      background_color: #cccccc,
-      //背景色
-        background-image:
-        linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
-      //文字
-        text-color: #000000a6,
-      //毛玻璃
-        filter-color: $--filter-color-login-light
-    ),
-  #{$theme-dark}: (
-      background-color: $--color-bg-1,
-      //背景
-        background-image:
-        linear-gradient(120deg, $--color-bg-1 0%, $--color-bg-2 100%),
-      //文字
-        text-color: $--color-text-3,
-      //毛玻璃
-        filter-color: $--filter-color-login-dark
-    )
-);

src/styles/common/theme.scss

@@ -0,0 +1,10 @@
+@import './mixins/config.scss';
+@import './_dark.scss';
+@import './_light.scss';
+
+$themes: (
+  // 亮白
+  #{$theme-light}: $light,
+  // 暗黑
+  #{$theme-dark}: $dark
+);

src/styles/common/var.scss

@@ -4,19 +4,27 @@ $--color-warn: #fcbc40;
 $--color-success: #34c749;
 
 // 文字
+$--color-text: hsla(0, 0%, 100%, 1);
 $--color-text-1: hsla(0, 0%, 100%, 0.9);
 $--color-text-2: hsla(0, 0%, 100%, 0.7);
 $--color-text-3: hsla(0, 0%, 100%, 0.5);
 $--color-text-4: hsla(0, 0%, 100%, 0.3);
 
+// 白色
+$--color-light-fill: #fff;
+$--color-light-fill-1: #f7f8fa;
+$--color-light-fill-2: #f2f3f5;
+$--color-light-fill-3: #e5e6eb;
+$--color-light-fill-4: #c9cdd4;
+
 // 黑色
-$--color-black: #000;
-$--color-border: #333335;
-$--color-bg-1: #17171a;
-$--color-bg-2: #232324;
-$--color-bg-3: #2a2a2b;
-$--color-bg-4: #313132;
-$--color-bg-5: #373739;
+$--color-dark-black: #000;
+$--color-dark-bg-1: #17171a;
+$--color-dark-bg-2: #232324;
+$--color-dark-bg-3: #2a2a2b;
+$--color-dark-bg-4: #313132;
+$--color-dark-bg-5: #373739;
+$--color-dark-border: #333335;
 
 // 最大宽度
 $--max-width: 1920px;
@@ -33,6 +41,6 @@ $--filter-color-login-light: rgba(187, 202, 217, 0.7);
 
 // 边框
 $--border-radius-base: 8px;
-$--border-bottom-style: 1px solid $--color-border;
+$--border-bottom-style: 1px solid $--color-dark-border;
 // 阴影
 $--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);