diff --git a/src/assets/css/anno-parser.css b/src/assets/css/anno-parser.css
index 07cf2f6e..25b0c4df 100644
--- a/src/assets/css/anno-parser.css
+++ b/src/assets/css/anno-parser.css
@@ -13,13 +13,13 @@
 
 .anno-title {
   font-family: var(--font-title);
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-size: 24px;
 }
 
 .anno-subtitle {
   font-size: 16px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }
 
 .anno-img {
diff --git a/src/assets/css/post-parser.css b/src/assets/css/post-parser.css
index 74ad9c71..2e11f821 100644
--- a/src/assets/css/post-parser.css
+++ b/src/assets/css/post-parser.css
@@ -14,13 +14,13 @@
 
 .mys-post-title {
   font-family: var(--font-title);
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-size: 24px;
 }
 
 .mys-post-subtitle {
   font-size: 16px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }
 
 .mys-post-content {
diff --git a/src/assets/themes/dark.css b/src/assets/themes/dark.css
index 696383ba..51d0f25a 100644
--- a/src/assets/themes/dark.css
+++ b/src/assets/themes/dark.css
@@ -7,14 +7,20 @@
 
 /* 主题色 */
 html.dark {
-  --common-bg: rgb(255 255 255 / 10%);
-  --common-bg-2: rgb(255 255 255 / 20%);
-  --common-bg-4: rgb(255 255 255 / 40%);
-  --common-bg-8: rgb(255 255 255 / 80%);
+  /* box-shadow */
+  --common-shadow-1: rgb(255 255 255 / 10%);
+  --common-shadow-2: rgb(255 255 255 / 20%);
+  --common-shadow-4: rgb(255 255 255 / 40%);
+  --common-shadow-8: rgb(255 255 255 / 80%);
 
-  --common-text: var(--common-color-white); /* title */
-  --common-text-2: var(--common-color-white); /* text */
-  --common-text-3: var(--common-color-grey); /* quote */
+  /* box bg */
+  --common-bg-1: #3d424b; /* 一级背景色 */
+  --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
+
+  /* text */
+  --common-text-title: var(--common-color-white); /* title */
+  --common-text-content: var(--common-color-white); /* text */
+  --common-text-quote: var(--common-color-grey); /* quote */
 
   --calendar-btn-bg: #1e1e1e;
   --back-top-shadow: #000000;
diff --git a/src/assets/themes/default.css b/src/assets/themes/default.css
index 897e88c8..eb49ee9e 100644
--- a/src/assets/themes/default.css
+++ b/src/assets/themes/default.css
@@ -7,14 +7,19 @@
 
 /* 主题色 */
 html.default {
-  --common-bg: rgb(0 0 0 / 10%);
-  --common-bg-2: rgb(0 0 0 / 20%);
-  --common-bg-4: rgb(0 0 0 / 40%);
-  --common-bg-8: rgb(0 0 0 / 80%);
+  /* box-shadow */
+  --common-shadow-1: rgb(0 0 0 / 10%);
+  --common-shadow-2: rgb(0 0 0 / 20%);
+  --common-shadow-4: rgb(0 0 0 / 40%);
+  --common-shadow-8: rgb(0 0 0 / 80%);
 
-  --common-text: var(--common-color-blue); /* title */
-  --common-text-2: var(--common-color-blue-2); /* text */
-  --common-text-3: var(--common-color-blue-3); /* quote */
+  /* box bg */
+  --common-bg-1: #faf7e8; /* 一级背景色 */
+  --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
+
+  --common-text-title: #393b40; /* title */
+  --common-text-content: var(--common-color-blue-2); /* text */
+  --common-text-quote: var(--common-color-blue-3); /* quote */
 
   --calendar-btn-bg: #393b40;
   --back-top-shadow: #546d8b;
diff --git a/src/components/main/t-itembox.vue b/src/components/main/t-itembox.vue
index f04dadaa..5a3d22fe 100644
--- a/src/components/main/t-itembox.vue
+++ b/src/components/main/t-itembox.vue
@@ -188,7 +188,7 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
   width: 100%;
   height: v-bind(getOuterHeight);
   text-align: center;
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-size: v-bind(getOuterFont);
 }
 </style>
diff --git a/src/components/main/t-pool.vue b/src/components/main/t-pool.vue
index 4ce395fe..94682547 100644
--- a/src/components/main/t-pool.vue
+++ b/src/components/main/t-pool.vue
@@ -8,8 +8,9 @@
       <v-card v-for="pool in poolCards" :key="pool.post_id" class="pool-card">
         <v-list class="pool-list">
           <v-list-item :title="pool.title" :subtitle="pool.subtitle">
+            <!-- todo 点击播放语音 -->
             <template #prepend>
-              <img :src="pool.voice.icon" class="pool-sideIcon" alt="icon" />
+              <img :src="pool.voice.icon" class="pool-voice-icon" alt="icon" />
             </template>
             <template v-if="pool.voice.url" #append>
               <audio :src="pool.voice.url" controls />
@@ -156,7 +157,7 @@ onMounted(async () => {
   loading.value = false;
 });
 
-// 检测是否有新的限时祈愿
+// 检测新卡池
 function checkCover(data: GachaData[]) {
   // 如果没有缓存
   if (!homeStore.poolCover || Object.keys(homeStore.poolCover).length === 0) {
@@ -220,12 +221,12 @@ onUnmounted(() => {
 .pool-box {
   margin-bottom: 10px;
   padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
   border-radius: 5px;
 }
 
 .pool-title {
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
   display: flex;
@@ -237,7 +238,7 @@ onUnmounted(() => {
   transform: translate(0, 2px);
   margin-right: 10px;
   border-radius: 50%;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
 }
 
 .pool-grid {
@@ -248,27 +249,21 @@ onUnmounted(() => {
 }
 
 .pool-card {
-  background: #45b787; /* 蛙绿 */
-  color: #eef7f2; /* 丹白 */
+  background: var(--common-bg-1);
+  color: var(--common-bgt-1);
   border-radius: 5px;
 }
 
-.dark .pool-card {
-  background: #1f2623; /* 苷蓝绿 */
-}
-
 .pool-list {
   font-family: var(--font-title);
   background: inherit;
   color: inherit;
 }
 
-.pool-sideIcon {
-  margin-top: 10px;
+.pool-voice-icon {
   width: 40px;
   height: 40px;
-  border-radius: 50%;
-  background: var(--common-bg-2);
+  transform: translateY(-5px);
 }
 
 .pool-cover {
diff --git a/src/components/main/t-position.vue b/src/components/main/t-position.vue
index 74d1aef2..9e457e05 100644
--- a/src/components/main/t-position.vue
+++ b/src/components/main/t-position.vue
@@ -140,12 +140,12 @@ onUnmounted(() => {
 .position-box {
   margin-bottom: 10px;
   padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
   border-radius: 5px;
 }
 
 .position-title {
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
   display: flex;
@@ -167,15 +167,11 @@ onUnmounted(() => {
 }
 
 .position-card {
-  background: #45b787; /* 蛙绿 */
-  color: #eef7f2; /* 月白 */
+  background: var(--common-bg-1);
+  color: var(--common-bgt-1);
   border-radius: 5px;
 }
 
-.dark .position-card {
-  background: #1f2623; /* 苷蓝绿 */
-}
-
 .position-list {
   font-family: var(--font-title);
   background: inherit;
diff --git a/src/components/main/t-subline.vue b/src/components/main/t-subline.vue
index d8525a18..62d1a603 100644
--- a/src/components/main/t-subline.vue
+++ b/src/components/main/t-subline.vue
@@ -15,7 +15,7 @@ defineProps({
 </script>
 <style lang="css" scoped>
 .tsl-box {
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
   display: flex;
   align-items: center;
   height: 30px;
diff --git a/src/components/userAbyss/tua-detail-battle.vue b/src/components/userAbyss/tua-detail-battle.vue
index 0e1c277b..a4bf51a3 100644
--- a/src/components/userAbyss/tua-detail-battle.vue
+++ b/src/components/userAbyss/tua-detail-battle.vue
@@ -31,6 +31,6 @@ const props = defineProps<TuaDetailBattleProps>();
   width: 100%;
   text-align: left;
   font-size: 12px;
-  color: var(--common-text-3);
+  color: var(--common-text-quote);
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-level.vue b/src/components/userAbyss/tua-detail-level.vue
index 5bc7f87c..bab2c1cf 100644
--- a/src/components/userAbyss/tua-detail-level.vue
+++ b/src/components/userAbyss/tua-detail-level.vue
@@ -20,6 +20,6 @@ const props = defineProps<TuaDetailLevelProps>();
   border-radius: 5px;
   width: 100%;
   height: 1px;
-  background: var(--common-text-2);
+  background: var(--common-text-content);
 }
 </style>
diff --git a/src/components/userAbyss/tua-detail-title.vue b/src/components/userAbyss/tua-detail-title.vue
index 1ba4db5f..6b4b5c9a 100644
--- a/src/components/userAbyss/tua-detail-title.vue
+++ b/src/components/userAbyss/tua-detail-title.vue
@@ -46,7 +46,7 @@ const getFontSize: ComputedRef<string> = computed(() => {
 
 .tud-t-title {
   font-size: v-bind(getFontSize);
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }
 
 .tud-t-val {
diff --git a/src/components/userAbyss/tua-detail.vue b/src/components/userAbyss/tua-detail.vue
index 8145bc60..accf3aa8 100644
--- a/src/components/userAbyss/tua-detail.vue
+++ b/src/components/userAbyss/tua-detail.vue
@@ -29,7 +29,7 @@ const props = defineProps<TuaDetailProps>();
   width: 100%;
   margin-bottom: 10px;
   border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
   padding: 10px;
 }
 
diff --git a/src/components/userAbyss/tua-overview.vue b/src/components/userAbyss/tua-overview.vue
index d615d35a..4151367a 100644
--- a/src/components/userAbyss/tua-overview.vue
+++ b/src/components/userAbyss/tua-overview.vue
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
   height: auto;
   padding: 10px;
   border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
 .tuao-title {
   font-family: var(--font-title);
   font-size: 20px;
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }
 
 .tuao-val-text {
diff --git a/src/components/userCharacter/tuc-role-box.vue b/src/components/userCharacter/tuc-role-box.vue
index c57fcaf4..7648bcd1 100644
--- a/src/components/userCharacter/tuc-role-box.vue
+++ b/src/components/userCharacter/tuc-role-box.vue
@@ -92,7 +92,7 @@ function getAvatarName() {
 <style lang="css" scoped>
 .tuc-rb-box {
   padding: 5px;
-  border: 1px inset var(--common-bg-4);
+  border: 1px inset var(--common-shadow-4);
   border-radius: 5px;
   position: relative;
   cursor: pointer;
@@ -139,7 +139,7 @@ function getAvatarName() {
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--common-bg-4);
+  background: var(--common-shadow-4);
   backdrop-filter: blur(5px);
   display: flex;
   justify-content: center;
diff --git a/src/components/userRecord/tur-overview-sub.vue b/src/components/userRecord/tur-overview-sub.vue
index 04efa0ba..5336db46 100644
--- a/src/components/userRecord/tur-overview-sub.vue
+++ b/src/components/userRecord/tur-overview-sub.vue
@@ -26,7 +26,7 @@ defineProps<TAOProps>();
   height: auto;
   padding: 5px;
   border-radius: 5px;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -36,7 +36,7 @@ defineProps<TAOProps>();
 .tur-os-title {
   font-family: var(--font-title);
   font-size: 20px;
-  color: var(--common-text-2);
+  color: var(--common-text-content);
 }
 
 .tur-os-text {
diff --git a/src/components/userRecord/tur-world-sub.vue b/src/components/userRecord/tur-world-sub.vue
index 8028d3a2..3df48920 100644
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/src/components/userRecord/tur-world-sub.vue
@@ -87,7 +87,7 @@ async function listenOnTheme() {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--common-bg);
+  background: var(--common-shadow-1);
 }
 
 .tur-ws-icon {
@@ -102,7 +102,7 @@ async function listenOnTheme() {
 }
 
 .tur-ws-content {
-  color: var(--common-text-2);
+  color: var(--common-text-content);
   width: calc(100% - 60px);
   height: 100%;
 }
@@ -110,7 +110,7 @@ async function listenOnTheme() {
 .tur-ws-title {
   font-family: var(--font-title);
   font-size: 20px;
-  border-bottom: 1px inset var(--common-text-2);
+  border-bottom: 1px inset var(--common-text-content);
 }
 
 .tur-ws-sub {
diff --git a/src/pages/User/Abyss.vue b/src/pages/User/Abyss.vue
index fa399b60..ece7dd97 100644
--- a/src/pages/User/Abyss.vue
+++ b/src/pages/User/Abyss.vue
@@ -142,7 +142,7 @@ async function shareAbyss(): Promise<void> {
 </script>
 <style lang="css" scoped>
 .ua-box {
-  box-shadow: 0 0 10px 0 var(--common-bg-4);
+  box-shadow: 0 0 10px 0 var(--common-shadow-4);
   display: flex;
   justify-content: left;
   align-items: center;
@@ -152,7 +152,7 @@ async function shareAbyss(): Promise<void> {
 
 .ua-tab {
   font-family: var(--font-text);
-  color: var(--common-text);
+  color: var(--common-text-title);
   width: 100px;
   height: 100%;
 }
@@ -166,7 +166,7 @@ async function shareAbyss(): Promise<void> {
 
 .ua-btn {
   margin-top: 15px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
   color: var(--common-color-white);
 }
 
@@ -181,13 +181,13 @@ async function shareAbyss(): Promise<void> {
   padding: 10px;
   overflow-y: auto;
   border-radius: 5px;
-  box-shadow: 0 0 10px var(--common-bg-2);
+  box-shadow: 0 0 10px var(--common-shadow-2);
 }
 
 .uaw-title {
   display: flex;
   align-items: center;
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-size: 20px;
   font-family: var(--font-title);
 }
@@ -222,7 +222,7 @@ async function shareAbyss(): Promise<void> {
   position: absolute;
   top: calc(50vh - 200px);
   left: calc(50vw - 400px);
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
   border-radius: 5px;
   width: 800px;
   height: 400px;
@@ -230,7 +230,7 @@ async function shareAbyss(): Promise<void> {
   flex-direction: column;
   align-items: center;
   font-size: 1.5rem;
-  color: var(--common-text);
+  color: var(--common-text-title);
   font-family: var(--font-title);
 }
 </style>
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index f724d70e..da0c0c2b 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -124,7 +124,7 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
   width: 100%;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .uc-top {
@@ -140,13 +140,13 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
   font-family: var(--font-title);
   font-size: 20px;
   margin-right: 10px;
-  color: var(--common-text);
+  color: var(--common-text-title);
 }
 
 .uc-top-btn {
   font-family: var(--font-text);
   border-radius: 5px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
   color: var(--common-color-white);
   margin-left: 15px;
 }
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index 30b8b615..0c393a5e 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -117,7 +117,7 @@ function getTheme() {
   width: 100%;
   border-radius: 5px;
   padding: 10px;
-  box-shadow: 0 0 10px var(--common-bg-4);
+  box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .ur-top {
@@ -133,13 +133,13 @@ function getTheme() {
   font-family: var(--font-title);
   font-size: 20px;
   margin-right: 10px;
-  color: var(--common-text);
+  color: var(--common-text-title);
 }
 
 .ur-top-btn {
   font-family: var(--font-text);
   border-radius: 5px;
-  background: var(--common-bg-2);
+  background: var(--common-shadow-2);
   color: var(--common-color-white);
   margin-left: 15px;
 }