fix: 修改颜色的深浅

src/styles/common/_dark.scss

@@ -6,7 +6,9 @@ $dark: (
   //背景
     background-color: $--color-dark-bg-1,
     background-color1: $--color-dark-bg-1,
+    background-color1-shallow: $--color-dark-bg-1-shallow,
     background-color2: $--color-dark-bg-2,
+    background-color2-shallow: $--color-dark-bg-2-shallow,
     background-color3: $--color-dark-bg-3,
     background-color4: $--color-dark-bg-4,
     background-color5: $--color-dark-bg-5,

src/styles/common/_light.scss

@@ -8,7 +8,9 @@ $light: (
   //背景
     background-color: $--color-light-bg-3,
     background-color1: $--color-light-bg-1,
+    background-color1-shallow: $--color-light-bg-1-shallow,
     background-color2: $--color-light-bg-2,
+    background-color2-shallow: $--color-light-bg-2-shallow,
     background-color3: $--color-light-bg-3,
     background-color4: $--color-light-bg-4,
     background-color5: $--color-light-bg-5,

src/styles/common/mixins/mixins.scss

@@ -38,6 +38,12 @@
   }
 }
 
+@mixin fetch-theme-custom ($key, $value) {
+  @include themeify {
+    #{$key}: themed($value);
+  }
+}
+
 //获取背景颜色
 @mixin filter-bg-color($target) {
   @include themeify {

src/styles/common/var.scss

@@ -10,22 +10,38 @@ $--color-text-2: #86909c;
 $--color-text-3: #c9cdd4;
 $--color-text-4: #f2f3f5;
 
+// 变亮值
+$--light-shalow: 2%;
+
 // 白色
 $--color-light-bg: #fff;
 $--color-light-bg-1: #fafafc;
+$--color-light-bg-1-shallow: lighten($--color-light-bg-1, $--light-shalow);
 $--color-light-bg-2: #f2f3f5;
+$--color-light-bg-2-shallow: lighten($--color-light-bg-2, $--light-shalow);
 $--color-light-bg-3: #e5e6eb;
+$--color-light-bg-3-shallow: lighten($--color-light-bg-3, $--light-shalow);
 $--color-light-bg-4: #c9cdd4;
+$--color-light-bg-4-shallow: lighten($--color-light-bg-4, $--light-shalow);
 $--color-light-bg-5: #bebebe;
+$--color-light-bg-5-shallow: lighten($--color-light-bg-5, $--light-shalow);
 $--color-light-border: #efeff5;
 
+// 变暗值
+$--dark-shalow: 2%;
+
 // 黑色
 $--color-dark-black: #000;
 $--color-dark-bg-1: #18181c;
+$--color-dark-bg-1-shallow: darken($--color-dark-bg-1, $--dark-shalow);
 $--color-dark-bg-2: #232324;
+$--color-dark-bg-2-shallow: darken($--color-dark-bg-2, $--dark-shalow);
 $--color-dark-bg-3: #2a2a2b;
+$--color-dark-bg-3-shallow: darken($--color-dark-bg-3, $--dark-shalow);
 $--color-dark-bg-4: #313132;
+$--color-dark-bg-4-shallow: darken($--color-dark-bg-4, $--dark-shalow);
 $--color-dark-bg-5: #373739;
+$--color-dark-bg-5-shallow: darken($--color-dark-bg-5, $--dark-shalow);
 $--color-dark-border: #333335;
 
 // 最大宽度

src/views/chart/components/ContentCharts/components/ChartCommon/index.vue

@@ -48,7 +48,7 @@ $topHeight: 36px;
   display: flex;
   height: calc(100vh - #{$--header-height} - #{$topHeight});
   .common-menu-width {
-    @include filter-bg-color('background-color2');
+    @include filter-bg-color('background-color2-shallow');
   }
 }
 </style>

src/views/chart/components/ContentCharts/index.vue

@@ -133,7 +133,7 @@ $topHeight: 36px;
     height: calc(100vh - #{$--header-height} - #{$topHeight});
     .menu-width {
       flex-shrink: 0;
-      @include filter-bg-color('background-color3');
+      @include filter-bg-color('background-color2');
     }
     .menu-component-box {
       flex-shrink: 0;