fix: 修改颜色的深浅

This commit is contained in:
MTrun 2022-01-13 18:01:33 +08:00
parent ea32cb1810
commit 95e2cdc689
7 changed files with 28 additions and 2 deletions

0
src/packages/index.ts Normal file
View File

View File

@ -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,

View File

@ -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,

View File

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

View File

@ -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;
// 最大宽度

View File

@ -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>

View File

@ -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;