github/unlock-music
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

暗黑模式颜色调整，载入页颜色适配黑色

Browse Source
This commit is contained in:
KyleBing
2020-11-25 14:38:29 +08:00
parent a040c88a07
commit 5e2f3d36c2
4 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/scss/_dark-mode.scss
View File

@@ -102,13 +102,13 @@
color: $dark-text-info;
}
.el-upload-dragger{
background-color: $dark-btn-bg;
background-color: $dark-uploader-bg;
border-color: $dark-border;
.el-upload__text{
color: $dark-text-info;
}
&:hover{
background: $dark-btn-bg;
background: $dark-uploader-bg-highlight;
border-color: $dark-border-highlight;
}
}

9
src/scss/_normal.scss
View File

@@ -1,9 +1,11 @@
#app {
body{
font-family: $font-family;
font-size: $fz-main;
font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#app {
text-align: center;
color: $text-main;
padding-top: 30px;
@@ -28,7 +30,6 @@ audio{
margin-bottom: 15px; // 播放控件与表格间隔
}
a{
color: darken($color-link, 15%);
&:hover{

32
src/scss/_variables.scss
View File

@@ -3,22 +3,26 @@ $blue : #409EFF;
$red : #F56C6C;
$green : #85ce61;
// TEXT
$text-main : #2C3E50;
$color-link: $blue;
// 暗黑模式
$dark-border : lighten(black, 30%);
$dark-border-highlight : lighten(black, 55%);
$dark-bg : lighten(black, 8%);
$dark-text-main : lighten(black, 90%);
$dark-text-info : lighten(black, 60%);
$dark-btn-bg : lighten(black, 20%);
$dark-btn-bg-highlight : lighten(black, 30%);
$dark-bg-th : lighten(black, 20%);
$dark-bg-td : lighten(black, 15%);
$dark-color-link : $green;
$fz-main: 14px;
$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
// 字体大小
$fz-main: 14px;
// DARK MODE
$dark-border : lighten(black, 25%);
$dark-border-highlight : lighten(black, 55%);
$dark-bg : lighten(black, 10%);
$dark-text-main : lighten(black, 90%);
$dark-text-info : lighten(black, 60%);
$dark-uploader-bg : lighten(black, 13%);
$dark-uploader-bg-highlight : lighten(black, 18%);
$dark-btn-bg : lighten(black, 20%);
$dark-btn-bg-highlight : lighten(black, 30%);
$dark-bg-th : lighten(black, 18%);
$dark-bg-td : lighten(black, 13%);
$dark-color-link : $green;