diff --git a/package.json b/package.json
index 01537e1..d71c545 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,9 @@
     "metaflac-js": "^1.0.5",
     "music-metadata-browser": "^2.1.6",
     "register-service-worker": "^1.7.1",
-    "vue": "^2.6.12"
+    "vue": "^2.6.12",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^10.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.8",
diff --git a/src/App.vue b/src/App.vue
index 0530566..60c8fc9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -176,35 +176,9 @@
                 }, 300);
             }
         },
-
     }
-
 </script>
 
-<style>
-    #app {
-        font-family: "Helvetica Neue", Helvetica, "PingFang SC",
-        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        padding-top: 30px;
-    }
-
-    #app-footer a {
-        padding-left: 0.2em;
-        padding-right: 0.2em;
-    }
-
-    #app-footer {
-        text-align: center;
-        font-size: small;
-    }
-
-    #app-control {
-        padding-top: 1em;
-        padding-bottom: 1em;
-    }
-
+<style lang="scss">
+   @import "scss/unlock-music";
 </style>
diff --git a/src/main.js b/src/main.js
index 8619a29..466d4b8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -21,7 +21,6 @@ import {
     Upload
 } from 'element-ui';
 import 'element-ui/lib/theme-chalk/base.css';
-import '@/scss/unlock-music.css' // dark mode file and global css
 
 Vue.use(Link);
 Vue.use(Image);
diff --git a/src/scss/_dark-mode.scss b/src/scss/_dark-mode.scss
index 44bbb6a..8377f28 100644
--- a/src/scss/_dark-mode.scss
+++ b/src/scss/_dark-mode.scss
@@ -1,12 +1,12 @@
 /*
-* 样式 - 夜间模式
-* @KyleBing
-* 2020-11-24
-*/
+ * name:    样式 - 夜间模式
+ * author:  @KyleBing
+ * date:    2020-11-24
+ */
 
 @media (prefers-color-scheme: dark) {
   #app{
-    color: $dark-color-text-info;
+    color: $dark-text-info;
   }
   body{
     background-color: $dark-bg;
@@ -15,12 +15,12 @@
   // FORM
   .el-radio{
     &__label{
-      color: $dark-color-text;
+      color: $dark-text-main;
     }
     &__input{
-      color: $dark-color-text-info;
+      color: $dark-text-info;
       .el-radio__inner{
-        border-color: $dark-color-border;
+        border-color: $dark-border;
         background-color: $dark-btn-bg;
       }
     }
@@ -36,19 +36,19 @@
   }
 
   .el-checkbox.is-bordered{
-    border-color: $dark-color-border;
+    border-color: $dark-border;
     .el-checkbox__inner{
       background-color: $dark-btn-bg;
-      border-color: $dark-color-border;
+      border-color: $dark-border;
     }
     &:hover{
-      border-color: $dark-color-border-highlight;
+      border-color: $dark-border-highlight;
       .el-checkbox__inner{
         background-color: $dark-btn-bg-highlight;
-        border-color: $dark-color-border-highlight;
+        border-color: $dark-border-highlight;
       }
       .el-checkbox__label{
-        color: $dark-color-text-info;
+        color: $dark-text-info;
       }
     }
     &.is-checked{
@@ -68,8 +68,8 @@
   // BUTTON
   .el-button{
     background-color: $dark-btn-bg;
-    border-color: $dark-color-border;
-    color: $dark-color-text;
+    border-color: $dark-border;
+    color: $dark-text-main;
 
     &:active{
       transform: translateY(2px);
@@ -87,7 +87,7 @@
     }
     &--danger{
       &.is-plain{
-        border-color: $dark-color-border;
+        border-color: $dark-border;
         background-color: $dark-btn-bg;
         &:hover{
           background-color: $red;
@@ -99,17 +99,17 @@
 
   // 文件拖放区
   .el-upload__tip{
-    color: $dark-color-text-info;
+    color: $dark-text-info;
   }
   .el-upload-dragger{
     background-color: $dark-btn-bg;
-    border-color: $dark-color-border;
+    border-color: $dark-border;
     .el-upload__text{
-      color: $dark-color-text-info;
+      color: $dark-text-info;
     }
     &:hover{
       background: $dark-btn-bg;
-      border-color: $dark-color-border-highlight;
+      border-color: $dark-border-highlight;
     }
   }
 
@@ -121,19 +121,19 @@
     }
     &__header{
       th{
-        border-bottom-color: $dark-color-border !important;
+        border-bottom-color: $dark-border !important;
       }
     }
     th{
       background-color: $dark-bg-th;
-      color: $dark-color-text-info;
+      color: $dark-text-info;
     }
     td{
-      border-bottom-color: $dark-color-border !important;
+      border-bottom-color: $dark-border !important;
     }
     tr{
       background-color: $dark-bg-td;
-      color: $dark-color-text;
+      color: $dark-text-main;
       &:hover{
         td{
           background-color: $dark-bg-th !important;
@@ -144,24 +144,23 @@
 
 
   // LINKS
-  $dark-link: $green;
   a{
     text-decoration: none;
-    color: darken($dark-link, 15%);
+    color: darken($dark-color-link, 15%);
     &:hover{
-      color: $dark-link;
+      color: $dark-color-link;
     }
   }
 
   // ALERT
   .el-notification{
     background-color: $dark-btn-bg-highlight;
-    border-color: $dark-color-border;
+    border-color: $dark-border;
     &__title{
       color: white;
     }
     &__content{
-      color: $dark-color-text-info;
+      color: $dark-text-info;
     }
   }
 }
diff --git a/src/scss/_gaps.scss b/src/scss/_gaps.scss
index 7d75ca1..478756e 100644
--- a/src/scss/_gaps.scss
+++ b/src/scss/_gaps.scss
@@ -1,19 +1,18 @@
 /*
-* 间隔工具集
-*/
+ * 间隔工具集
+ */
 
-$timer: 5px;
-// common
+$gap: 5px;
 @for $item from 1 through 7 {
-  .mt-#{$item} { margin-top     : $timer * $item !important;}
-  .mb-#{$item} { margin-bottom  : $timer * $item !important;}
-  .ml-#{$item} { margin-left    : $timer * $item !important;}
-  .mr-#{$item} { margin-right   : $timer * $item !important;}
-   .m-#{$item} { margin         : $timer * $item !important;}
+  .mt-#{$item} { margin-top     : $gap * $item !important;}
+  .mb-#{$item} { margin-bottom  : $gap * $item !important;}
+  .ml-#{$item} { margin-left    : $gap * $item !important;}
+  .mr-#{$item} { margin-right   : $gap * $item !important;}
+   .m-#{$item} { margin         : $gap * $item !important;}
 
-  .pt-#{$item} { padding-top    : $timer * $item !important;}
-  .pb-#{$item} { padding-bottom : $timer * $item !important;}
-  .pl-#{$item} { padding-left   : $timer * $item !important;}
-  .pr-#{$item} { padding-right  : $timer * $item !important;}
-   .p-#{$item} { padding        : $timer * $item !important;}
+  .pt-#{$item} { padding-top    : $gap * $item !important;}
+  .pb-#{$item} { padding-bottom : $gap * $item !important;}
+  .pl-#{$item} { padding-left   : $gap * $item !important;}
+  .pr-#{$item} { padding-right  : $gap * $item !important;}
+   .p-#{$item} { padding        : $gap * $item !important;}
 }
\ No newline at end of file
diff --git a/src/scss/_normal.scss b/src/scss/_normal.scss
new file mode 100644
index 0000000..c393e9f
--- /dev/null
+++ b/src/scss/_normal.scss
@@ -0,0 +1,37 @@
+#app {
+  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;
+  text-align: center;
+  color: $text-main;
+  padding-top: 30px;
+}
+
+#app-footer a {
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+}
+
+#app-footer {
+  text-align: center;
+  font-size: small;
+}
+
+#app-control {
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+audio{
+  margin-bottom: 15px; // 播放控件与表格间隔
+}
+
+
+a{
+  color: darken($color-link, 15%);
+  &:hover{
+    color: $color-link;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 5d73fa2..c4b1319 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,13 +1,24 @@
-$dark-color-border                  : lighten(black, 30%);
-$dark-color-border-highlight        : lighten(black, 55%);
-$dark-bg                            : lighten(black, 8%);
-$dark-color-text                    : lighten(black, 90%);
-$dark-color-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%);
+// COLORS
+$blue      : #409EFF;
+$red       : #F56C6C;
+$green     : #85ce61;
 
-$blue:  #409EFF;
-$red:   #F56C6C;
-$green: #85ce61;
\ No newline at end of file
+$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;
\ No newline at end of file
diff --git a/src/scss/unlock-music.css b/src/scss/unlock-music.css
deleted file mode 100644
index 101dd2e..0000000
--- a/src/scss/unlock-music.css
+++ /dev/null
@@ -1 +0,0 @@
-@media(prefers-color-scheme: dark){#app{color:#999}body{background-color:#141414}.el-radio__label{color:#e6e6e6}.el-radio__input{color:#999}.el-radio__input .el-radio__inner{border-color:#4d4d4d;background-color:#333}.el-radio.is-checked .el-radio__inner{background-color:#409eff}.el-radio.is-checked .el-radio__label{font-weight:bold}.el-checkbox.is-bordered{border-color:#4d4d4d}.el-checkbox.is-bordered .el-checkbox__inner{background-color:#333;border-color:#4d4d4d}.el-checkbox.is-bordered:hover{border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__inner{background-color:#4d4d4d;border-color:#8c8c8c}.el-checkbox.is-bordered:hover .el-checkbox__label{color:#999}.el-checkbox.is-bordered.is-checked{background-color:#409eff}.el-checkbox.is-bordered.is-checked .el-checkbox__inner{border-color:#4d4d4d}.el-checkbox.is-bordered.is-checked .el-checkbox__label{color:#fff;font-weight:bold}.el-button{background-color:#333;border-color:#4d4d4d;color:#e6e6e6}.el-button:active{transform:translateY(2px)}.el-button--default.is-plain{background-color:#333}.el-button--default.is-plain:hover{background-color:#409eff;border-color:#409eff;color:#fff}.el-button--danger.is-plain{border-color:#4d4d4d;background-color:#333}.el-button--danger.is-plain:hover{background-color:#f56c6c;border-color:#f56c6c}.el-upload__tip{color:#999}.el-upload-dragger{background-color:#333;border-color:#4d4d4d}.el-upload-dragger .el-upload__text{color:#999}.el-upload-dragger:hover{background:#333;border-color:#8c8c8c}.el-table{background-color:#262626}.el-table:before{content:none}.el-table__header th{border-bottom-color:#4d4d4d !important}.el-table th{background-color:#333;color:#999}.el-table td{border-bottom-color:#4d4d4d !important}.el-table tr{background-color:#262626;color:#e6e6e6}.el-table tr:hover td{background-color:#333 !important}a{text-decoration:none;color:#5dad36}a:hover{color:#85ce61}.el-notification{background-color:#4d4d4d;border-color:#4d4d4d}.el-notification__title{color:#fff}.el-notification__content{color:#999}}.mt-1{margin-top:5px !important}.mb-1{margin-bottom:5px !important}.ml-1{margin-left:5px !important}.mr-1{margin-right:5px !important}.m-1{margin:5px !important}.pt-1{padding-top:5px !important}.pb-1{padding-bottom:5px !important}.pl-1{padding-left:5px !important}.pr-1{padding-right:5px !important}.p-1{padding:5px !important}.mt-2{margin-top:10px !important}.mb-2{margin-bottom:10px !important}.ml-2{margin-left:10px !important}.mr-2{margin-right:10px !important}.m-2{margin:10px !important}.pt-2{padding-top:10px !important}.pb-2{padding-bottom:10px !important}.pl-2{padding-left:10px !important}.pr-2{padding-right:10px !important}.p-2{padding:10px !important}.mt-3{margin-top:15px !important}.mb-3{margin-bottom:15px !important}.ml-3{margin-left:15px !important}.mr-3{margin-right:15px !important}.m-3{margin:15px !important}.pt-3{padding-top:15px !important}.pb-3{padding-bottom:15px !important}.pl-3{padding-left:15px !important}.pr-3{padding-right:15px !important}.p-3{padding:15px !important}.mt-4{margin-top:20px !important}.mb-4{margin-bottom:20px !important}.ml-4{margin-left:20px !important}.mr-4{margin-right:20px !important}.m-4{margin:20px !important}.pt-4{padding-top:20px !important}.pb-4{padding-bottom:20px !important}.pl-4{padding-left:20px !important}.pr-4{padding-right:20px !important}.p-4{padding:20px !important}.mt-5{margin-top:25px !important}.mb-5{margin-bottom:25px !important}.ml-5{margin-left:25px !important}.mr-5{margin-right:25px !important}.m-5{margin:25px !important}.pt-5{padding-top:25px !important}.pb-5{padding-bottom:25px !important}.pl-5{padding-left:25px !important}.pr-5{padding-right:25px !important}.p-5{padding:25px !important}.mt-6{margin-top:30px !important}.mb-6{margin-bottom:30px !important}.ml-6{margin-left:30px !important}.mr-6{margin-right:30px !important}.m-6{margin:30px !important}.pt-6{padding-top:30px !important}.pb-6{padding-bottom:30px !important}.pl-6{padding-left:30px !important}.pr-6{padding-right:30px !important}.p-6{padding:30px !important}.mt-7{margin-top:35px !important}.mb-7{margin-bottom:35px !important}.ml-7{margin-left:35px !important}.mr-7{margin-right:35px !important}.m-7{margin:35px !important}.pt-7{padding-top:35px !important}.pb-7{padding-bottom:35px !important}.pl-7{padding-left:35px !important}.pr-7{padding-right:35px !important}.p-7{padding:35px !important}body{font-size:14px}audio{margin-bottom:15px}a{color:#0077f3}a:hover{color:#409eff}
diff --git a/src/scss/unlock-music.scss b/src/scss/unlock-music.scss
index 5fb5de6..ae52fe6 100644
--- a/src/scss/unlock-music.scss
+++ b/src/scss/unlock-music.scss
@@ -1,21 +1,5 @@
 @import "variables";
-@import "dark-mode";
 @import "gaps";
 
-body{
-  font-size: 14px;
-}
-
-// 播放控件与正文表格间隔
-audio{
-  margin-bottom: 15px;
-}
-
-$link: $blue;
-a{
-  //text-decoration: none;
-  color: darken($link, 15%);
-  &:hover{
-    color: $link;
-  }
-}
\ No newline at end of file
+@import "normal";
+@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
\ No newline at end of file