颜色更换

src/styles/common/mixins/function.scss

@@ -0,0 +1,3 @@
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}

src/styles/common/mixins/mixins.scss

@@ -1,21 +1,9 @@
 @import './config.scss';
+@import './function.scss';
+@import './theme.scss';
 
 @mixin go($block) {
-  $B: $namespace + '-' + $block !global;
-  .#{$B} {
-    @content;
-  }
-}
-
-@mixin go-l($block) {
-  $B: $namespace + '-' + $theme-light + '-' + $block !global;
-  .#{$B} {
-    @content;
-  }
-}
-
-@mixin go-d($block) {
-  $B: $namespace + '-' + $theme-dark + '-' + $block !global;
+  $B: $namespace + '-' + $block;
   .#{$B} {
     @content;
   }
@@ -28,3 +16,39 @@
     }
   }
 }
+
+@mixin themeify {
+  @each $theme-name, $theme-map in $themes {
+    $theme-map: $theme-map !global;
+    [data-theme='#{$theme-name}'] & {
+      @content;
+    }
+  }
+}
+
+@mixin fetch-theme($param) {
+  @include themeify {
+    #{$param}: themed($param);
+  }
+}
+
+//获取背景颜色
+@mixin filter-color($target) {
+  @include themeify {
+    background-color: themed($target);
+  }
+}
+
+//获取背景渐变颜色
+@mixin background-image($target) {
+  @include themeify {
+    background-image: themed($target);
+  }
+}
+
+//获取字体颜色
+@mixin font-color($target) {
+  @include themeify {
+    color: themed($target);
+  }
+}

src/styles/common/mixins/theme.scss

@@ -0,0 +1,25 @@
+@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

@@ -1,9 +0,0 @@
-
-// 黑色
-$--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;

src/styles/common/var.scss

@@ -1,4 +1,3 @@
-@import './theme.scss';
 // 颜色
 $--color-red: #fc625d;
 $--color-warn: #fcbc40;
@@ -10,6 +9,16 @@ $--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-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;
+
+// 最大宽度
 $--max-width: 1920px;
 // 顶部距离
 $--header-height: 60px;
@@ -19,8 +28,11 @@ $--filter-blur-base: blur(20px);
 $--filter-color-base-1: rgba(0, 0, 0, 0.1);
 $--filter-color-base-2: rgba(0, 0, 0, 0.2);
 $--filter-color-base-3: rgba(23, 23, 26, 0.3);
+$--filter-color-login-dark: rgba(89, 95, 103, 0.45);
+$--filter-color-login-light: rgba(187, 202, 217, 0.7);
+
 // 边框
 $--border-radius-base: 8px;
 $--border-bottom-style: 1px solid $--color-border;
 // 阴影
-$--border-shadow: 0 8px 20px rgba(0,0,0, .15);
+$--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);