feat: dark mode support (#53)

src/App.vue

@@ -50,11 +50,36 @@ export default {
 <style lang="scss">
 @import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
 
+:root {
+  --color-body-bg: #ffffff;
+  --color-text: #000;
+  --color-primary: #335eea;
+  --color-primary-bg: #eaeffd;
+  --color-secondary: #7a7a7b;
+  --color-secondary-bg: #f5f5f7;
+  --color-navbar-bg: rgba(255, 255, 255, 0.86);
+}
+
+[data-theme="dark"] {
+  --color-body-bg: #222222;
+  --color-text: #ffffff;
+  --color-primary: #335eea;
+  --color-primary-bg: #bbcdff;
+  --color-secondary: #7a7a7b;
+  --color-secondary-bg: #323232;
+  --color-navbar-bg: #335eea;
+  --color-navbar-bg: rgba(34, 34, 34, 0.86);
+}
+
 #app {
   font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
     PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
     WenQuanYi Micro Hei, sans-serif;
   width: 100%;
+  transition: all 0.4s;
+}
+body {
+  background-color: var(--color-body-bg);
 }
 
 html {
@@ -102,12 +127,13 @@ a {
 
 ::-webkit-scrollbar-track {
   background: transparent;
+  border-left: 1px solid rgba(128, 128, 128, 0.18);
 }
 
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
   border-radius: 10px;
-  background: rgb(216, 216, 216);
+  background: var(--color-secondary-bg);
 }
 
 .slide-up-enter-active,

src/assets/css/slider.css

@@ -1,6 +1,6 @@
 /* rail style */
 .vue-slider-rail {
-  background-color: #eee;
+  background-color: rgba(128, 128, 128, 0.18);
   border-radius: 15px;
 }
 
@@ -54,7 +54,8 @@
 
 /* volume style */
 .volume-control .vue-slider-process {
-  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0.8;
+  background-color: var(--color-text);
   border-radius: 15px;
 }
 

src/components/ButtonIcon.vue

@@ -19,7 +19,7 @@ button {
   border-radius: 25%;
   transition: 0.2s;
   .svg-icon {
-    color: rgba(0, 0, 0, 0.88);
+    color: var(--color-text);
     height: 16px;
     width: 16px;
   }
@@ -27,7 +27,7 @@ button {
     margin-left: 0;
   }
   &:hover {
-    background: #f5f5f7;
+    background: var(--color-secondary-bg);
   }
   &:active {
     transform: scale(0.92);

src/components/ButtonTwoTone.vue

@@ -54,8 +54,8 @@ button {
   justify-content: center;
   font-size: 18px;
   font-weight: 600;
-  background-color: rgba(51, 94, 234, 0.1);
+  background-color: var(--color-primary-bg);
-  color: #335eea;
+  color: var(--color-primary);
   margin-right: 12px;
   transition: 0.2s;
   .svg-icon {
@@ -70,8 +70,8 @@ button {
   }
 }
 button.grey {
-  background-color: #f5f5f7;
+  background-color: var(--color-secondary-bg);
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--color-secondary);
 }
 button.transparent {
   background-color: transparent;

src/components/CoverRow.vue

@@ -129,13 +129,13 @@ export default {
 
 .item {
   margin: 12px 12px 24px 12px;
+  color: var(--color-text);
   .text {
     width: 208px;
     margin-top: 8px;
     .name {
       font-size: 16px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
       line-height: 20px;
 
       display: -webkit-box;
@@ -145,7 +145,7 @@ export default {
     }
     .info {
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
       line-height: 18px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -170,7 +170,8 @@ export default {
 }
 
 .explicit-symbol {
-  color: rgba(0, 0, 0, 0.28);
+  opacity: 0.28;
+  color: var(--color-text);
   float: right;
   .svg-icon {
     margin-bottom: -3px;
@@ -178,7 +179,8 @@ export default {
 }
 
 .lock-icon {
-  color: rgba(0, 0, 0, 0.28);
+  opacity: 0.28;
+  color: var(--color-text);
   margin-right: 4px;
   // float: right;
   .svg-icon {
@@ -189,7 +191,8 @@ export default {
 
 .play-count {
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.58);
+  opacity: 0.58;
+  color: var(--color-text);
   font-size: 12px;
   .svg-icon {
     margin-right: 3px;

src/components/MvRow.vue

@@ -76,11 +76,12 @@ export default {
 .mv {
   margin: 12px 12px 24px 12px;
   width: 204px;
+  color: var(--color-text);
 
   .title {
     font-size: 16px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -88,7 +89,7 @@ export default {
   }
   .artist {
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;

src/components/Navbar.vue

@@ -103,7 +103,10 @@ nav {
     left: 10vw;
   }
   backdrop-filter: saturate(180%) blur(30px);
-  background-color: rgba(255, 255, 255, 0.86);
+
+  // background: var(--color-body-bg);
+  // background-color: rgba(255, 255, 255, 0.86);
+  background-color: var(--color-navbar-bg);
   z-index: 100;
 }
 
@@ -127,15 +130,15 @@ nav {
     text-decoration: none;
     border-radius: 6px;
     padding: 6px 10px;
-    color: black;
+    color: var(--color-text);
     transition: 0.2s;
     margin: {
       right: 12px;
       left: 12px;
     }
     &:hover {
-      background: #eaeffd;
+      background: var(--color-primary-bg);
-      color: #335eea;
+      color: var(--color-primary);
     }
     &:active {
       transform: scale(0.92);
@@ -143,7 +146,7 @@ nav {
     }
   }
   a.active {
-    color: #335eea;
+    color: var(--color-primary);
   }
 }
 
@@ -163,7 +166,7 @@ nav {
     display: flex;
     align-items: center;
     height: 32px;
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--color-secondary-bg);
     border-radius: 8px;
     width: 200px;
   }
@@ -171,7 +174,8 @@ nav {
   .svg-icon {
     height: 15px;
     width: 15px;
-    color: #aaaaaa;
+    color: var(--color-text);
+    opacity: 0.28;
     margin: {
       left: 8px;
       right: 4px;
@@ -185,13 +189,15 @@ nav {
     width: 96%;
     font-weight: 600;
     margin-top: -1px;
+    color: var(--color-text);
   }
 
   .active {
-    background: #eaeffd;
+    background: var(--color-primary-bg);
     input,
     .svg-icon {
-      color: #335eea;
+      opacity: 1;
+      color: var(--color-primary);
     }
   }
 }
@@ -205,6 +211,7 @@ nav {
     margin-right: 16px;
     height: 24px;
     width: 24px;
+    color: var(--color-text);
   }
 }
 </style>

src/components/Player.vue

@@ -294,7 +294,8 @@ export default {
   justify-content: space-around;
   height: 64px;
   backdrop-filter: saturate(180%) blur(30px);
-  background-color: rgba(255, 255, 255, 0.86);
+  // background-color: rgba(255, 255, 255, 0.86);
+  background-color: var(--color-navbar-bg);
   z-index: 100;
 }
 
@@ -334,7 +335,8 @@ export default {
     .name {
       font-weight: 600;
       font-size: 16px;
-      color: rgba(0, 0, 0, 0.88);
+      opacity: 0.88;
+      color: var(--color-text);
       margin-bottom: 4px;
       cursor: pointer;
       display: -webkit-box;
@@ -348,7 +350,8 @@ export default {
     }
     .artist {
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.58);
+      opacity: 0.58;
+      color: var(--color-text);
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
@@ -394,7 +397,7 @@ export default {
     }
   }
   .active .svg-icon {
-    color: #335eea;
+    color: var(--color-primary);
   }
   .volume-control {
     margin-left: 4px;

src/components/TrackListItem.vue

@@ -159,7 +159,7 @@ button {
   .svg-icon {
     height: 16px;
     width: 16px;
-    color: #335eea;
+    color: var(--color-primary);
   }
   &:active {
     transform: scale(0.92);
@@ -180,12 +180,16 @@ button {
     border-radius: 8px;
     margin: 0 20px 0 10px;
     width: 12px;
-    color: rgba(0, 0, 0, 0.58);
+    color: var(--color-text);
     cursor: default;
+    span {
+      opacity: 0.58;
+    }
   }
 
   .explicit-symbol {
-    color: rgba(0, 0, 0, 0.28);
+    opacity: 0.28;
+    color: var(--color-text);
     .svg-icon {
       margin-bottom: -3px;
     }
@@ -221,7 +225,7 @@ button {
     .title {
       font-size: 18px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
+      color: var(--color-text);
       cursor: default;
       padding-right: 16px;
       display: -webkit-box;
@@ -233,13 +237,14 @@ button {
         margin-right: 2px;
         font-weight: 500;
         font-size: 14px;
-        color: rgba(0, 0, 0, 0.72);
+        opacity: 0.72;
       }
     }
     .artist {
       margin-top: 2px;
       font-size: 13px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
+      color: var(--color-text);
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
@@ -247,7 +252,7 @@ button {
       a {
         span {
           margin-right: 3px;
-          color: rgba(0, 0, 0, 0.8);
+          opacity: 0.8;
         }
         &:hover {
           text-decoration: underline;
@@ -260,7 +265,8 @@ button {
     flex: 1;
     display: flex;
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
+    color: var(--color-text);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -274,10 +280,12 @@ button {
     justify-content: flex-end;
     margin-right: 10px;
     font-variant-numeric: tabular-nums;
+    opacity: 0.88;
+    color: var(--color-text);
   }
   &:hover {
     transition: all 0.3s;
-    background: #f5f5f7;
+    background: var(--color-secondary-bg);
   }
 }
 .track.disable {
@@ -290,7 +298,7 @@ button {
   .time,
   .no,
   .featured {
-    color: rgba(0, 0, 0, 0.28) !important;
+    opacity: 0.28 !important;
   }
   &:hover {
     background: none;
@@ -325,24 +333,22 @@ button {
 }
 
 .track.playing {
-  background: #eaeffd;
+  background: var(--color-primary-bg);
-  color: #335eea;
+  color: var(--color-primary);
   .title,
-  .album {
+  .album,
-    color: #335eea;
+  .time {
+    color: var(--color-primary);
   }
   .title .featured,
-  .artist {
+  .artist,
-    color: #335eea;
+  .explicit-symbol {
+    color: var(--color-primary);
     opacity: 0.88;
   }
   .no span {
-    color: #335eea;
+    color: var(--color-primary);
     opacity: 0.78;
   }
-  .explicit-symbol {
-    color: #335eea;
-    opacity: 0.88;
-  }
 }
 </style>

src/locale/lang/en.js

@@ -108,5 +108,11 @@ export default {
       high: "High",
       lossless: "Lossless",
     },
+    appearance: {
+      text: "Appearance",
+      auto: "Auto",
+      light: "Light",
+      dark: "Dark",
+    },
   },
 };

src/locale/lang/zh-CN.js

@@ -6,9 +6,6 @@ export default {
     library: "资料库",
     search: "搜索",
   },
-  footer: {
-    settings: "设置",
-  },
   home: {
     recommendPlaylist: "推荐歌单",
     recommendArtist: "推荐歌手",
@@ -34,7 +31,7 @@ export default {
     albums: "专辑",
     withAlbums: "张专辑",
     artist: "歌手",
-    videos: "个视频",
+    videos: "个MV",
   },
   album: {
     released: "发行于",
@@ -103,7 +100,7 @@ export default {
     songs: "首歌",
   },
   settings: {
-    settings: "选项",
+    settings: "设置",
     logout: "登出",
     language: "语言",
     musicQuality: {
@@ -113,5 +110,11 @@ export default {
       high: "极高",
       lossless: "无损",
     },
+    appearance: {
+      text: "外观",
+      auto: "自动",
+      light: "浅色",
+      dark: "深色",
+    },
   },
 };

src/store/index.js

@@ -45,4 +45,24 @@ if ([undefined, null].includes(store.state.settings.lang)) {
   localStorage.setItem("settings", JSON.stringify(store.state.settings));
 }
 
+if (
+  store.state.settings.appearance !== "auto" &&
+  store.state.settings.appearance !== undefined
+) {
+  document.body.setAttribute("data-theme", store.state.settings.appearance);
+} else {
+  document.body.setAttribute(
+    "data-theme",
+    window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+  );
+}
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (e) => {
+    if (store.state.settings.appearance === "auto") {
+      store.commit("updateTmpAppearance", e.matches ? "dark" : "light");
+      document.body.setAttribute("data-theme", e.matches ? "dark" : "light");
+    }
+  });
+
 export default store;

src/store/initState.js

@@ -1,5 +1,7 @@
 const initState = {
   howler: null,
+  accountLogin: false,
+  usernameLogin: false,
   liked: {
     songs: [],
   },
@@ -85,6 +87,7 @@ const initState = {
       id: 0,
     },
     lang: null,
+    appearance: "auto",
     musicQuality: 320000,
     showGithubIcon: true,
     showPlaylistsByAppleMusic: true,

src/store/state.js

@@ -1,5 +1,7 @@
 export default {
   howler: null,
+  accountLogin: false,
+  usernameLogin: false,
   liked: {
     songs: [],
   },
@@ -9,6 +11,4 @@ export default {
   },
   player: JSON.parse(localStorage.getItem("player")),
   settings: JSON.parse(localStorage.getItem("settings")),
-  accountLogin: false,
-  usernameLogin: false,
 };

src/views/album.vue

@@ -200,6 +200,7 @@ export default {
     justify-content: center;
     flex: 1;
     margin-left: 56px;
+    color: var(--color-text);
     .title {
       font-size: 56px;
       font-weight: 700;
@@ -208,7 +209,7 @@ export default {
     }
     .artist {
       font-size: 18px;
-      color: rgba(0, 0, 0, 0.88);
+      opacity: 0.88;
       margin-top: 24px;
       a {
         font-weight: 600;
@@ -216,13 +217,13 @@ export default {
     }
     .date-and-count {
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
       margin-top: 2px;
     }
     .description {
       user-select: none;
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
       margin-top: 24px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -230,8 +231,8 @@ export default {
       overflow: hidden;
       cursor: pointer;
       &:hover {
-        transition: color 0.3s;
+        transition: opacity 0.3s;
-        color: rgba(0, 0, 0, 0.88);
+        opacity: 0.88;
       }
     }
   }
@@ -281,7 +282,8 @@ export default {
 }
 
 .explicit-symbol {
-  color: rgba(0, 0, 0, 0.28);
+  opacity: 0.28;
+  color: var(--color-text);
   margin-right: 4px;
   .svg-icon {
     margin-bottom: -3px;
@@ -292,22 +294,25 @@ export default {
   margin-top: 36px;
   margin-bottom: 36px;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.48);
+  opacity: 0.48;
+  color: var(--color-text);
   div {
-    margin-bottom: 8px;
+    margin-bottom: 4px;
   }
   .album-time {
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
   }
 }
 
 .more-by {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid rgba(128, 128, 128, 0.18);
+
   padding-top: 22px;
   .section-title {
     font-size: 22px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
+    color: var(--color-text);
     margin-bottom: 8px;
   }
 }

src/views/artist.vue

@@ -195,6 +195,7 @@ export default {
   display: flex;
   align-items: center;
   margin-bottom: 72px;
+  color: var(--color-text);
   img {
     height: 192px;
     width: 192px;
@@ -209,13 +210,13 @@ export default {
 
   .artist {
     font-size: 18px;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
     margin-top: 24px;
   }
 
   .statistics {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
     margin-top: 2px;
   }
 
@@ -234,12 +235,14 @@ export default {
 .section-title {
   font-weight: 600;
   font-size: 22px;
-  color: rgba(0, 0, 0, 0.88);
+  opacity: 0.88;
+  color: var(--color-text);
   margin-bottom: 16px;
   margin-top: 46px;
 }
 
 .latest-release {
+  color: var(--color-text);
   .release {
     display: flex;
   }
@@ -258,17 +261,16 @@ export default {
   .name {
     font-size: 18px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
     margin-bottom: 8px;
   }
   .date {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.78);
+    opacity: 0.78;
   }
   .type {
     margin-top: 2px;
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
   }
 }
 
@@ -281,11 +283,12 @@ export default {
       margin-top: 8px;
       border-radius: 6px;
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.78);
+      opacity: 0.78;
+      color: var(--color-secondary);
       font-weight: 600;
       &:hover {
-        background: #f5f5f7;
+        opacity: 1;
-        color: rgba(0, 0, 0, 0.96);
+        // background: var(--color-primary-bg);
       }
     }
   }

src/views/explore.vue

@@ -161,6 +161,7 @@ export default {
 
 <style lang="scss" scoped>
 h1 {
+  color: var(--color-text);
   font-size: 56px;
 }
 .buttons {
@@ -178,19 +179,18 @@ h1 {
   font-weight: 600;
   font-size: 18px;
   border-radius: 10px;
-  color: rgb(0, 0, 0);
+  background-color: var(--color-secondary-bg);
-  background-color: #f5f5f7;
+  color: var(--color-secondary);
-  color: rgba(0, 0, 0, 0.68);
   transition: 0.2s;
 
   &:hover {
-    background-color: rgba(51, 94, 234, 0.1);
+    background-color: var(--color-primary-bg);
-    color: #335eea;
+    color: var(--color-primary);
   }
 }
 .button.active {
-  background-color: rgba(51, 94, 234, 0.1);
+  background-color: var(--color-primary-bg);
-  color: #335eea;
+  color: var(--color-primary);
 }
 
 .playlists {

src/views/home.vue

@@ -54,7 +54,7 @@
         :color="'grey'"
         @click.native="goTo('/settings')"
       >
-        {{ $t("footer.settings") }}
+        {{ $t("settings.settings") }}
       </ButtonTwoTone>
     </footer>
   </div>
@@ -161,40 +161,11 @@ export default {
   margin-bottom: 20px;
   font-size: 28px;
   font-weight: 700;
-
+  color: var(--color-text);
   a {
     font-size: 13px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
-  }
-}
-
-.item {
-  margin: 12px 12px 24px 12px;
-  .text {
-    width: 208px;
-    margin-top: 8px;
-    .name {
-      font-size: 16px;
-      font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
-      line-height: 20px;
-
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-    }
-    .info {
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.68);
-      line-height: 18px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-      // margin-top: 4px;
-    }
   }
 }
 

src/views/library.vue

@@ -186,6 +186,7 @@ export default {
 <style lang="scss" scoped>
 h1 {
   font-size: 42px;
+  color: var(--color-text);
   .head {
     height: 44px;
     margin-right: 12px;
@@ -220,25 +221,21 @@ h1 {
   transition: all 0.4s;
   box-sizing: border-box;
 
-  background: #eaeffd;
+  background: var(--color-primary-bg);
-  // background: linear-gradient(-30deg, #60a6f7, #4364f7, #0052d4);
-  // color: white;
-  // background: linear-gradient(149.46deg, #450af5, #8e8ee5 99.16%);
 
   .bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    color: var(--color-primary);
 
     .title {
       font-size: 24px;
       font-weight: 700;
-      color: #335eea;
     }
     .sub-title {
       font-size: 15px;
       margin-top: 2px;
-      color: #335eea;
     }
 
     button {
@@ -248,16 +245,14 @@ h1 {
       align-items: center;
       height: 44px;
       width: 44px;
-      // background: rgba(255, 255, 255, 1);
+      background: var(--color-primary);
-      background: #335eea;
       border-radius: 50%;
       transition: 0.2s;
       box-shadow: 0 6px 12px -4px rgba(0, 0, 0, 0.2);
       cursor: default;
 
       .svg-icon {
-        // color: #3f63f5;
+        color: var(--color-primary-bg);
-        color: #eaeffd;
         margin-left: 4px;
         height: 16px;
         width: 16px;
@@ -277,7 +272,8 @@ h1 {
     display: flex;
     flex-wrap: wrap;
     font-size: 14px;
-    color: rgba(51, 94, 234, 0.88);
+    opacity: 0.88;
+    color: var(--color-primary);
     p {
       margin-top: 2px;
     }
@@ -287,7 +283,8 @@ h1 {
 .playlists {
   margin-top: 54px;
   .title {
-    color: rgba(0, 0, 0, 0.88);
+    color: var(--color-text);
+    opacity: 0.88;
     margin-bottom: 8px;
     font-size: 24px;
     font-weight: 600;

src/views/loginAccount.vue

@@ -206,6 +206,7 @@ export default {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 48px;
+  color: var(--color-text);
 }
 
 .section-1 {
@@ -216,11 +217,6 @@ export default {
     height: 64px;
     margin: 20px;
   }
-  .svg-icon {
-    height: 24px;
-    width: 24px;
-    color: rgba(82, 82, 82, 0.28);
-  }
 }
 
 .section-2 {
@@ -233,12 +229,13 @@ export default {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 16px;
+  color: var(--color-text);
 
   .container {
     display: flex;
     align-items: center;
     height: 46px;
-    background: rgba(0, 0, 0, 0.06);
+    background: var(--color-secondary-bg);
     border-radius: 8px;
     width: 300px;
   }
@@ -265,7 +262,12 @@ export default {
     width: 100%;
     font-weight: 600;
     margin-top: -1px;
-    color: rgba(0, 0, 0, 0.88);
+    color: var(--color-text);
+  }
+
+  input::placeholder {
+    color: var(--color-text);
+    opacity: 0.38;
   }
 
   input#countryCode {
@@ -276,10 +278,10 @@ export default {
   }
 
   .active {
-    background: #eaeffd;
+    background: var(--color-primary-bg);
     input,
     .svg-icon {
-      color: #335eea;
+      color: var(--color-primary);
     }
   }
 }
@@ -290,8 +292,8 @@ export default {
   justify-content: center;
   font-size: 20px;
   font-weight: 600;
-  background-color: rgba(51, 94, 234, 0.1);
+  background-color: var(--color-primary-bg);
-  color: #335eea;
+  color: var(--color-primary);
   border-radius: 8px;
   margin-top: 24px;
   transition: 0.2s;
@@ -311,17 +313,19 @@ export default {
   a {
     cursor: pointer;
     font-size: 13px;
-    color: rgba(0, 0, 0, 0.68);
+    color: var(--color-text);
+    opacity: 0.68;
   }
 }
 
 .notice {
   width: 300px;
-  border-top: 1px solid rgba(0, 0, 0, 0.18);
+  border-top: 1px solid rgba(128, 128, 128);
   margin-top: 48px;
   padding-top: 12px;
   font-size: 12px;
-  color: rgba(0, 0, 0, 0.48);
+  color: var(--color-text);
+  opacity: 0.48;
 }
 
 @keyframes loading {
@@ -346,7 +350,7 @@ button.loading {
 .loading span {
   width: 6px;
   height: 6px;
-  background-color: #335eea;
+  background-color: var(--color-primary);
   border-radius: 50%;
   margin: 0 2px;
   animation: loading 1.4s infinite both;

src/views/loginUsername.vue

@@ -97,7 +97,7 @@ export default {
         this.$router.push({ path: "/library" });
       });
     },
-    throttleSearch: throttle(function () {
+    throttleSearch: throttle(function() {
       this.search();
     }, 500),
   },
@@ -107,6 +107,7 @@ export default {
 <style lang="scss" scoped>
 .login {
   display: flex;
+  color: var(--color-text);
 }
 
 .title {
@@ -121,7 +122,7 @@ export default {
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 8px;
-    color: rgba(0, 0, 0, 0.78);
+    opacity: 0.78;
   }
 }
 
@@ -132,13 +133,13 @@ export default {
     height: 48px;
     border-radius: 11px;
     width: 326px;
-    background: #eaeffd;
+    background: var(--color-primary-bg);
   }
 
   .svg-icon {
     height: 22px;
     width: 22px;
-    color: #335eea;
+    color: var(--color-primary);
     margin: {
       left: 12px;
       right: 8px;
@@ -153,9 +154,10 @@ export default {
     width: 115%;
     font-weight: 600;
     margin-top: -1px;
-    color: #335eea;
+    color: var(--color-primary);
     &::placeholder {
-      color: #335eeac4;
+      color: var(--color-primary);
+      opacity: 0.78;
     }
   }
 }
@@ -187,15 +189,15 @@ export default {
     margin-left: 12px;
   }
   &:hover {
-    background: #f5f5f7;
+    background: var(--color-secondary-bg);
   }
 }
 
 .user.active {
   transition: 0.2s;
-  background: #eaeffd;
+  background: var(--color-primary-bg);
-  .name {
+  .nickname {
-    color: #335eea;
+    color: var(--color-primary);
   }
 }
 </style>

src/views/mv.vue

@@ -127,19 +127,20 @@ export default {
 
 .video-info {
   margin-top: 12px;
+  color: var(--color-text);
   .title {
     font-size: 24px;
     font-weight: 600;
   }
   .artist {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
     margin-top: 2px;
     font-weight: 600;
   }
   .info {
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.68);
+    opacity: 0.68;
     margin-top: 12px;
   }
 }
@@ -149,7 +150,8 @@ export default {
   .section-title {
     font-size: 18px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
+    color: var(--color-text);
+    opacity: 0.88;
   }
 }
 </style>

src/views/next.vue

@@ -41,7 +41,7 @@ export default {
     },
     sortedTracks() {
       function compare(property) {
-        return function (obj1, obj2) {
+        return function(obj1, obj2) {
           var value1 = obj1[property];
           var value2 = obj2[property];
           return value1 - value2;
@@ -106,5 +106,6 @@ h1 {
   margin-top: 36px;
   margin-bottom: 18px;
   cursor: default;
+  color: var(--color-text);
 }
 </style>

src/views/playlist.vue

@@ -27,7 +27,9 @@
           >
           <a
             v-else
-            :href="`https://music.163.com/#/user/home?id=${playlist.creator.userId}`"
+            :href="
+              `https://music.163.com/#/user/home?id=${playlist.creator.userId}`
+            "
             target="blank"
             >{{ playlist.creator.nickname }}</a
           >
@@ -226,20 +228,24 @@ export default {
     .title {
       font-size: 36px;
       font-weight: 700;
+      color: var(--color-text);
     }
     .artist {
       font-size: 18px;
-      color: rgba(0, 0, 0, 0.88);
+      opacity: 0.88;
+      color: var(--color-text);
       margin-top: 24px;
     }
     .date-and-count {
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
+      color: var(--color-text);
       margin-top: 2px;
     }
     .description {
       font-size: 14px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
+      color: var(--color-text);
       margin-top: 24px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
@@ -247,8 +253,8 @@ export default {
       overflow: hidden;
       cursor: pointer;
       &:hover {
-        transition: color 0.3s;
+        transition: opacity 0.3s;
-        color: rgba(0, 0, 0, 0.88);
+        opacity: 0.88;
       }
     }
     .buttons {
@@ -299,6 +305,7 @@ export default {
 .user-info {
   h1 {
     font-size: 42px;
+    color: var(--color-text);
     .avatar {
       height: 44px;
       margin-right: 12px;

src/views/search.vue

@@ -192,15 +192,17 @@ export default {
 h1 {
   margin-top: -10px;
   margin-bottom: 0;
+  color: var(--color-text);
   span {
-    color: rgba(0, 0, 0, 0.58);
+    opacity: 0.58;
   }
 }
 
 .section-title {
   font-weight: 600;
   font-size: 22px;
-  color: rgba(0, 0, 0, 0.88);
+  opacity: 0.88;
+  color: var(--color-text);
   margin-bottom: 16px;
   margin-top: 46px;
 }
@@ -219,6 +221,7 @@ h1 {
   padding-right: 48px;
   font-size: 16px;
   font-weight: 600;
+  color: var(--color-text);
   .artist {
     display: flex;
     align-items: center;
@@ -236,6 +239,7 @@ h1 {
 
 .albums-list {
   display: flex;
+  color: var(--color-text);
   .album {
     img {
       height: 128px;
@@ -249,7 +253,6 @@ h1 {
     .name {
       margin-top: 6px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
       font-size: 14px;
       width: 128px;
       display: -webkit-box;
@@ -259,7 +262,7 @@ h1 {
     }
     .artist {
       font-size: 12px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
     }
   }
 }