diff --git a/src/renderer/index.js b/src/renderer/index.js
index f4a97d46..aaf75dfe 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -1170,7 +1170,7 @@ const app = new Vue({
             let max = this.mk.currentPlaybackDuration
             let value = (val - min) / (max - min) * 100
             return {
-                'background': ('linear-gradient(to right, var(--keyColor) 0%, var(--keyColor) ' + value + '%, #333 ' + value + '%, #333 100%)')
+                'background': ('linear-gradient(to right, var(--songProgressColor) 0%, var(--songProgressColor) ' + value + '%, var(--songProgressBackground) ' + value + '%, var(--songProgressBackground) 100%)')
             }
         },
         async getRecursive(response) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 85949811..9df52a9b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -35,6 +35,8 @@
   --keyColor-disabled: rgba(250, 88, 106, 0.35);
   --navigationBarHeight: 38px;
   --modalBackground: #262626;
+  --songProgressColor: var(--keyColor);
+  --songProgressBackground: #333;
   --textColor: #eee;
 }