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

4 years ago · 5e2f3d36c2
parent a040c88a07
commit 5e2f3d36c2
4 changed files with 26 additions and 21 deletions
--- a/public/index.html
+++ b/public/index.html
@ -13,7 +13,7 @@
    <meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
    <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
    <!--@formatter:off-->
-   <style> #loader {position: absolute;left: 50%;top: 50%;z-index: 1010;margin: -75px 0 0 -75px;border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;animation: spin 2s linear infinite}  @keyframes spin { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }  #loader-mask {text-align: center;position: absolute;width: 100%;height: 100%;bottom: 0;left: 0;right: 0;top: 0;z-index: 1009;background-color: rgba(242, 246, 252, 0.88)}  #loader-source{font-size: 1.5rem;}  #loader-tips-timeout{font-size: 1.2rem;}</style>
+    <style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #1db1ff;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loader-mask{text-align:center;position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,.88)}@media (prefers-color-scheme:dark){#loader-mask{color:#fff;background-color:rgba(0,0,0,.85)}#loader-mask a{color:#ddd}#loader-mask a:hover{color:#1db1ff}}#loader-source{font-size:1.5rem}#loader-tips-timeout{font-size:1.2rem}</style>
    <!--@formatter:on-->
 </head>
 <body>
--- a/src/scss/_dark-mode.scss
+++ b/src/scss/_dark-mode.scss
@ -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;
    }
  }
--- a/src/scss/_normal.scss
+++ b/src/scss/_normal.scss
@ -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{
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -3,22 +3,26 @@ $blue      : #409EFF;
 $red       : #F56C6C;
 $green     : #85ce61;

+// TEXT
 $text-main : #2C3E50;
-
 $color-link: $blue;

-// 暗黑模式
-$dark-border           : lighten(black, 30%);
+$fz-main: 14px;
+
+$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
+"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+
+// DARK MODE
+$dark-border                : lighten(black, 25%);
 $dark-border-highlight      : lighten(black, 55%);
-$dark-bg               : lighten(black, 8%);
+$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, 20%);
-$dark-bg-td            : lighten(black, 15%);
+$dark-bg-th                 : lighten(black, 18%);
+$dark-bg-td                 : lighten(black, 13%);
 $dark-color-link            : $green;
-
-
-// 字体大小
-$fz-main: 14px;