diff --git a/src/App.vue b/src/App.vue
index 8d1f41f..f177602 100644
--- a/src/App.vue
+++ b/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,
diff --git a/src/assets/css/slider.css b/src/assets/css/slider.css
index 87a51cd..58e197d 100644
--- a/src/assets/css/slider.css
+++ b/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;
 }
 
diff --git a/src/components/ButtonIcon.vue b/src/components/ButtonIcon.vue
index 3f93ecf..12d6af6 100644
--- a/src/components/ButtonIcon.vue
+++ b/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);
diff --git a/src/components/ButtonTwoTone.vue b/src/components/ButtonTwoTone.vue
index 576116c..48bec5b 100644
--- a/src/components/ButtonTwoTone.vue
+++ b/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);
-  color: #335eea;
+  background-color: var(--color-primary-bg);
+  color: var(--color-primary);
   margin-right: 12px;
   transition: 0.2s;
   .svg-icon {
@@ -70,8 +70,8 @@ button {
   }
 }
 button.grey {
-  background-color: #f5f5f7;
-  color: rgba(0, 0, 0, 0.5);
+  background-color: var(--color-secondary-bg);
+  color: var(--color-secondary);
 }
 button.transparent {
   background-color: transparent;
diff --git a/src/components/CoverRow.vue b/src/components/CoverRow.vue
index 66f7d1f..7579dc0 100644
--- a/src/components/CoverRow.vue
+++ b/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;
diff --git a/src/components/MvRow.vue b/src/components/MvRow.vue
index e80c9b5..5811f49 100644
--- a/src/components/MvRow.vue
+++ b/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;
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index fbdfeab..84d696e 100644
--- a/src/components/Navbar.vue
+++ b/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;
-      color: #335eea;
+      background: var(--color-primary-bg);
+      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>
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 53c84fe..5311eda 100644
--- a/src/components/Player.vue
+++ b/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;
diff --git a/src/components/TrackListItem.vue b/src/components/TrackListItem.vue
index ab44583..1513541 100644
--- a/src/components/TrackListItem.vue
+++ b/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;
-  color: #335eea;
+  background: var(--color-primary-bg);
+  color: var(--color-primary);
   .title,
-  .album {
-    color: #335eea;
+  .album,
+  .time {
+    color: var(--color-primary);
   }
   .title .featured,
-  .artist {
-    color: #335eea;
+  .artist,
+  .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>
diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
index 051e7b3..f43b6a1 100644
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -108,5 +108,11 @@ export default {
       high: "High",
       lossless: "Lossless",
     },
+    appearance: {
+      text: "Appearance",
+      auto: "Auto",
+      light: "Light",
+      dark: "Dark",
+    },
   },
 };
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index d14746d..2dd4dad 100644
--- a/src/locale/lang/zh-CN.js
+++ b/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: "深色",
+    },
   },
 };
diff --git a/src/store/index.js b/src/store/index.js
index f69ef0a..6b29733 100644
--- a/src/store/index.js
+++ b/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;
diff --git a/src/store/initState.js b/src/store/initState.js
index 1ed6568..9f0c01f 100644
--- a/src/store/initState.js
+++ b/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,
diff --git a/src/store/state.js b/src/store/state.js
index 925e46f..8a5d99e 100644
--- a/src/store/state.js
+++ b/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,
 };
diff --git a/src/views/album.vue b/src/views/album.vue
index 9cbb66b..5c3f409 100644
--- a/src/views/album.vue
+++ b/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;
-        color: rgba(0, 0, 0, 0.88);
+        transition: opacity 0.3s;
+        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;
   }
 }
diff --git a/src/views/artist.vue b/src/views/artist.vue
index 71e0cdc..481799b 100644
--- a/src/views/artist.vue
+++ b/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;
-        color: rgba(0, 0, 0, 0.96);
+        opacity: 1;
+        // background: var(--color-primary-bg);
       }
     }
   }
diff --git a/src/views/explore.vue b/src/views/explore.vue
index b73b5e5..8ed611c 100644
--- a/src/views/explore.vue
+++ b/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: #f5f5f7;
-  color: rgba(0, 0, 0, 0.68);
+  background-color: var(--color-secondary-bg);
+  color: var(--color-secondary);
   transition: 0.2s;
 
   &:hover {
-    background-color: rgba(51, 94, 234, 0.1);
-    color: #335eea;
+    background-color: var(--color-primary-bg);
+    color: var(--color-primary);
   }
 }
 .button.active {
-  background-color: rgba(51, 94, 234, 0.1);
-  color: #335eea;
+  background-color: var(--color-primary-bg);
+  color: var(--color-primary);
 }
 
 .playlists {
diff --git a/src/views/home.vue b/src/views/home.vue
index 688ac8b..d354d1e 100644
--- a/src/views/home.vue
+++ b/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);
-  }
-}
-
-.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;
-    }
+    opacity: 0.68;
   }
 }
 
diff --git a/src/views/library.vue b/src/views/library.vue
index c2115d8..e961559 100644
--- a/src/views/library.vue
+++ b/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: linear-gradient(-30deg, #60a6f7, #4364f7, #0052d4);
-  // color: white;
-  // background: linear-gradient(149.46deg, #450af5, #8e8ee5 99.16%);
+  background: var(--color-primary-bg);
 
   .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: #335eea;
+      background: var(--color-primary);
       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: #eaeffd;
+        color: var(--color-primary-bg);
         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;
diff --git a/src/views/loginAccount.vue b/src/views/loginAccount.vue
index 3c00d30..c4ede97 100644
--- a/src/views/loginAccount.vue
+++ b/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);
-  color: #335eea;
+  background-color: var(--color-primary-bg);
+  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;
diff --git a/src/views/loginUsername.vue b/src/views/loginUsername.vue
index 0f95205..5bd617b 100644
--- a/src/views/loginUsername.vue
+++ b/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;
-  .name {
-    color: #335eea;
+  background: var(--color-primary-bg);
+  .nickname {
+    color: var(--color-primary);
   }
 }
 </style>
diff --git a/src/views/mv.vue b/src/views/mv.vue
index 48bdd16..ffd3e55 100644
--- a/src/views/mv.vue
+++ b/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>
diff --git a/src/views/next.vue b/src/views/next.vue
index df5cb2b..bde1b10 100644
--- a/src/views/next.vue
+++ b/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>
diff --git a/src/views/playlist.vue b/src/views/playlist.vue
index f7a6e59..5f8c02a 100644
--- a/src/views/playlist.vue
+++ b/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;
-        color: rgba(0, 0, 0, 0.88);
+        transition: opacity 0.3s;
+        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;
diff --git a/src/views/search.vue b/src/views/search.vue
index b08f5cc..ece7683 100644
--- a/src/views/search.vue
+++ b/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;
     }
   }
 }
diff --git a/src/views/settings.vue b/src/views/settings.vue
index 26efefd..60df284 100644
--- a/src/views/settings.vue
+++ b/src/views/settings.vue
@@ -11,9 +11,10 @@
                 ><img
                   class="cvip"
                   src="data:image/png;base64,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"
-                />黑胶VIP
+                />
+                <span class="text">黑胶VIP</span>
               </span>
-              <span v-else>{{ settings.user.signature }}</span>
+              <span class="text" v-else>{{ settings.user.signature }}</span>
             </div>
           </div>
         </div>
@@ -36,6 +37,22 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> {{ $t("settings.appearance.text") }} </div>
+        </div>
+        <div class="right">
+          <select v-model="appearance">
+            <option value="auto">{{ $t("settings.appearance.auto") }}</option>
+            <option value="light"
+              >🌞 {{ $t("settings.appearance.light") }}</option
+            >
+            <option value="dark"
+              >🌚 {{ $t("settings.appearance.dark") }}</option
+            >
+          </select>
+        </div>
+      </div>
       <div class="item">
         <div class="left">
           <div class="title"> {{ $t("settings.musicQuality.text") }} </div>
@@ -109,8 +126,31 @@ export default {
         this.$store.commit("changeLang", lang);
       },
     },
+    appearance: {
+      get() {
+        if (this.settings.appearance === undefined) return "auto";
+        return this.settings.appearance;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "appearance",
+          value,
+        });
+        if (value === "auto") {
+          document.body.setAttribute(
+            "data-theme",
+            window.matchMedia("(prefers-color-scheme: dark)").matches
+              ? "dark"
+              : "light"
+          );
+        } else {
+          document.body.setAttribute("data-theme", value);
+        }
+      },
+    },
     musicQuality: {
       get() {
+        if (this.settings.appearance === undefined) return 320000;
         return this.settings.musicQuality;
       },
       set(value) {
@@ -163,13 +203,15 @@ export default {
 h2 {
   margin-top: 48px;
   font-size: 36px;
+  color: var(--color-text);
 }
 
 .user {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #f5f5f7;
+  background: var(--color-secondary-bg);
+  color: var(--color-text);
   padding: 16px 20px;
   border-radius: 16px;
   img.avatar {
@@ -190,12 +232,13 @@ h2 {
     .nickname {
       font-size: 20px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
       margin-bottom: 2px;
     }
     .extra-info {
       font-size: 13px;
-      color: rgba(0, 0, 0, 0.68);
+      .text {
+        opacity: 0.68;
+      }
       .vip {
         display: flex;
         align-items: center;
@@ -216,17 +259,20 @@ h2 {
       text-decoration: none;
       border-radius: 10px;
       padding: 8px 12px;
-      color: rgba(0, 0, 0, 0.68);
+      opacity: 0.68;
+      color: var(--color-text);
       transition: 0.2s;
       margin: {
         right: 12px;
         left: 12px;
       }
       &:hover {
+        opacity: 1;
         background: #eaeffd;
         color: #335eea;
       }
       &:active {
+        opacity: 1;
         transform: scale(0.92);
         transition: 0.2s;
       }
@@ -239,11 +285,12 @@ h2 {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--color-text);
 
   .title {
     font-size: 18px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.88);
+    opacity: 0.88;
   }
 
   select {
@@ -252,13 +299,13 @@ h2 {
     border: none;
     padding: 8px 12px 8px 12px;
     border-radius: 8px;
-    color: rgba(0, 0, 0, 0.88);
-    background: #f5f5f7;
+    color: var(--color-text);
+    background: var(--color-secondary-bg);
     appearance: none;
     &:focus {
       outline: none;
-      color: #335eea;
-      background: #eaeffd;
+      color: var(--color-primary);
+      background: var(--color-primary-bg);
     }
   }
 }
@@ -275,7 +322,6 @@ h2 {
 }
 .toggle {
   margin: auto;
-  background: white;
 }
 .toggle input {
   opacity: 0;
@@ -292,7 +338,7 @@ h2 {
   transition: 0.4s ease;
   height: 32px;
   width: 68px;
-  background: #f5f5f7;
+  background: var(--color-secondary-bg);
   border-radius: 8px;
 }
 .toggle input + label:before {
@@ -323,7 +369,7 @@ h2 {
   border-radius: 6px;
 }
 .toggle input:checked + label:before {
-  background: #335eea;
+  background: var(--color-primary);
   -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
   transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
 }