diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index feadcc66..a14fc6bc 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -4,36 +4,54 @@
 @import "anim";
 
 :root {
-  --color-main-bg: rgb(226, 226, 226);
-  --color-second-bg: rgb(238, 240, 244);
+  --color-main-bg: #E6E8EB;
+  --color-second-bg: rgb(240, 242, 244);
+
+  --color-item-bg: rgb(228, 230, 232);
+  --color-item-hover: white;
+  //--color-item-active: rgb(75, 110, 175);
+  --color-item-active: rgb(253, 246, 236);
+  --color-item-border: rgb(226, 226, 226);
+
   --color-header-bg: white;
   --color-tooltip-bg: white;
   --color-tooltip-shadow: #bbbbbb;
-  --color-font-1: rgb(75,85,99);
+  --color-font-1: rgb(75, 85, 99);
   --color-font-2: rgb(46, 46, 46);
+  --color-font-3: black;
   --color-font-active-1: white;
   --color-font-active-2: whitesmoke;
-  --color-item-bg: white;
-  --color-item-hover: white;
-  --color-item-active: rgb(75, 110, 175);
   --color-main-active: rgb(12, 140, 233);
   --toolbar-width: 700rem;
   //--toolbar-width: 50vw;
 
+  --color-gray: gray;
+
+  --color-scrollbar: rgb(147, 173, 227);
 }
 
 html[data-theme='dark'] {
   //--color-main-bg: rgba(0, 5, 24, 1);
-  --color-main-bg: rgba(14, 18, 23, 1);
   //--color-main-bg: rgba(17,24,39, 1);
+  --color-main-bg: rgba(14, 18, 23, 1);
   --color-second-bg: rgb(60, 63, 65);
-  --color-header-bg: rgb(60, 63, 65);
-  //--color-tooltip-bg: rgb(60, 63, 65);
+
+  --color-item-bg: rgb(51, 51, 51);
+  --color-item-hover: #5e5e5e;
+  //--color-item-active: rgb(75, 110, 175);
+  --color-item-active: rgb(103, 103, 103);
+  --color-item-border: rgb(73, 73, 73);
+
+  --color-header-bg: rgb(51, 51, 51);
   --color-tooltip-bg: #252525;
   --color-tooltip-shadow: #3b3b3b;
   --color-font-1: rgba(249, 250, 251, 0.8);
   --color-font-2: rgba(255, 255, 255, 0.8);
-  --color-item-bg: gray;
+  --color-font-3: white;
+
+  --color-gray: #bebebe;
+
+  --color-scrollbar:  rgb(59, 87, 138);
 }
 
 $anim-time: 0.3s;
@@ -41,8 +59,6 @@ $anim-time: 0.3s;
   transition: background $anim-time, color $anim-time;
 }
 
-
-$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
 html, body {
   padding: 0;
   margin: 0;
@@ -87,7 +103,6 @@ a {
   }
 }
 
-
 ::-webkit-scrollbar {
   width: 8rem;
   height: 10rem;
@@ -99,14 +114,14 @@ a {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: $second;
+  background: var(--color-scrollbar);
   border-radius: 10rem;
 }
 
 
 /* 火狐美化滚动条 */
 * {
-  scrollbar-color: $second #f3f4f9;
+  scrollbar-color: var(--color-scrollbar) #f3f4f9;
   /* 滑块颜色  滚动条背景颜色 */
   scrollbar-width: thin;
   /* 滚动条宽度有三种：thin、auto、none */
@@ -129,6 +144,10 @@ footer {
   display: flex;
 }
 
+.gap10 {
+  gap: 10rem;
+}
+
 .justify-content-between {
   justify-content: space-between;
 }
@@ -154,7 +173,7 @@ footer {
     justify-content: space-between;
     align-items: center;
     font-size: 16rem;
-    color: black;
+    color: var(--color-font-3);
 
     .left {
       flex: 1;
@@ -179,36 +198,53 @@ footer {
   }
 }
 
-.word-item {
+.common-list-item {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--color-item-bg);
+  color: var(--color-font-1);
+  font-size: 18rem;
+  border-radius: 8rem;
+  display: flex;
+  justify-content: space-between;
+  transition: all .3s;
+  padding: 10rem;
+  gap: 20rem;
+  border: 1px solid var(--color-item-border);
+
   .volume {
     opacity: 0;
   }
 
   &:hover {
+    background: var(--color-item-hover);
+
     .volume {
       opacity: 1;
     }
   }
 
   &.active {
-    .phonetic {
-      color: white !important;
-    }
+    background: var(--color-item-active);
 
     .volume {
       color: #E6A23C;
     }
+
+    .phonetic, .item-sub-title {
+      color: var(--color-gray) !important;
+    }
   }
 
-  .word-wrapper {
+  .item-title {
     display: flex;
     align-items: center;
     gap: 8rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    color: var(--color-font-1);
 
-    .title {
+    .word {
       font-size: 20rem;
-      color: var(--color-font-1);
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
       display: flex;
     }
 
@@ -219,7 +255,13 @@ footer {
   }
 }
 
-.sub-title {
+.item-sub-title {
   font-size: 16rem;
-  color: var(--color-font-2);
+  color: gray;
+}
+
+.text-shadow {
+  color: transparent !important;
+  text-shadow: #b0b0b0 0 0 8rem;
+  user-select: none;
 }
\ No newline at end of file
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index a6ccd704..79e44851 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -6,8 +6,12 @@ $font-color: rgb(187, 187, 187);
 
 $main: rgb(64,158,255);
 //$main: rgb(121,187,255);
-$second: rgb(75, 110, 175);
+//$second: rgb(75, 110, 175);
+$second: rgb(59, 87, 138);
 $item-hover: rgb(75, 75, 75);
 $space: 24rem;
 $footer-height: 40rem;
-$card-radius: 8rem;
\ No newline at end of file
+$card-radius: 8rem;
+
+$font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+$word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
\ No newline at end of file
diff --git a/src/components/Add/AddDict.vue b/src/components/Add/AddDict.vue
index 73901c3b..4cad28dc 100644
--- a/src/components/Add/AddDict.vue
+++ b/src/components/Add/AddDict.vue
@@ -161,8 +161,7 @@ function close() {
         <div class="page add-page">
           <header>
             <div class="left" @click.stop="step = 0">
-              <Icon icon="octicon:arrow-left-24"
-                    class="go" width="20" color="#000000"/>
+              <Icon icon="octicon:arrow-left-24" class="go" width="20"/>
               <div class="title">
                 词典详情
               </div>
@@ -268,7 +267,7 @@ $header-height: 60rem;
   width: 50%;
 
   header {
-    color: black;
+    color: var(--color-font-3);
     display: flex;
     justify-content: space-between;
     align-items: center;
diff --git a/src/components/ChapterList.vue b/src/components/ChapterList.vue
index 9a6ce723..b1db983d 100644
--- a/src/components/ChapterList.vue
+++ b/src/components/ChapterList.vue
@@ -27,8 +27,8 @@ function showWordListModal(index: number, item: Word[]) {
   if (runtimeStore.editDict.translateLanguage === 'common') {
     console.time()
     item.map((w: Word) => {
-      if (!w.trans.length){
-        let res =  runtimeStore.translateWordList.find(a => a.name === w.name)
+      if (!w.trans.length) {
+        let res = runtimeStore.translateWordList.find(a => a.name === w.name)
         if (res) w = Object.assign(w, res)
       }
     })
@@ -40,23 +40,25 @@ function showWordListModal(index: number, item: Word[]) {
 
 <template>
   <div class="list">
-    <div class="item"
+    <div class="common-list-item"
          :class="activeIndex === index && 'active'"
          v-for="(item,index) in list"
          @click="emit('update:activeIndex', index)">
-      <input type="radio" :checked="activeIndex === index">
-      <template v-if="isArticle">
-        <div class="title"
-             @click.stop="emitter.emit(EventKey.openArticleListModal,item)"
-        >{{ index + 1 }}.&nbsp;&nbsp;&nbsp;{{ item.title }}
-        </div>
-      </template>
-      <template v-else>
-        <div class="title"
-             @click.stop="showWordListModal(index,item)"
-        >第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
-        </div>
-      </template>
+      <div class="flex gap10">
+        <input type="radio" :checked="activeIndex === index">
+        <template v-if="isArticle">
+          <div class="title"
+               @click.stop="emitter.emit(EventKey.openArticleListModal,item)"
+          >{{ index + 1 }}.&nbsp;&nbsp;&nbsp;{{ item.title }}
+          </div>
+        </template>
+        <template v-else>
+          <div class="title"
+               @click.stop="showWordListModal(index,item)"
+          >第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -74,29 +76,11 @@ function showWordListModal(index: number, item: Word[]) {
   gap: 10rem;
   //padding-right: 10rem;
 
-  .item {
-    padding: 15rem;
-    background: var(--color-item-bg);
-    color: var(--color-font-1);
-    display: flex;
-    gap: 10rem;
-    border-radius: 8rem;
-    border-bottom: 1px solid #e1e1e1;
-
-    &.active {
-      background: var(--color-item-active);
-      color: var(--color-font-active-1);
-
-      &:hover {
-        .title {
-          border-bottom: 2px solid white !important;
-        }
-      }
-    }
+  .common-list-item {
 
     &:hover {
       .title {
-        border-bottom: 2px solid var(--color-item-active);
+        border-bottom: 2px solid gray !important;
       }
     }
 
diff --git a/src/components/ListItem.vue b/src/components/ListItem.vue
index ad5569ba..e0ab1876 100644
--- a/src/components/ListItem.vue
+++ b/src/components/ListItem.vue
@@ -7,8 +7,8 @@ defineProps<{
   showVolume?: boolean,
   showDel?: boolean,
   active?: boolean
-  isCollect: boolean
-  isSimple: boolean
+  isCollect?: boolean
+  isSimple?: boolean
 }>()
 
 defineEmits<{
@@ -65,18 +65,6 @@ defineEmits<{
 
 <style scoped lang="scss">
 .list-item {
-  width: 100%;
-  box-sizing: border-box;
-  background: var(--color-item-bg);
-  color: var(--color-font-1);
-  font-size: 18rem;
-  border-radius: 8rem;
-  display: flex;
-  justify-content: space-between;
-  transition: all .3s;
-  padding: 10rem;
-  gap: 20rem;
-
   .left {
     display: flex;
     gap: 10rem;
@@ -100,7 +88,6 @@ defineEmits<{
   }
 
   &:hover {
-    background: rgb(226, 226, 226);
 
     :deep(.collect) {
       opacity: 1;
@@ -112,13 +99,13 @@ defineEmits<{
   }
 
   &.active {
-    background: var(--color-item-active);
 
     :deep(.sub-title) {
-      color: white !important;
+      //color: black;
     }
+
     :deep(.title) {
-      color: white !important;
+      //color: black;
     }
 
     $c: #E6A23C;
diff --git a/src/components/MiniModal.vue b/src/components/MiniModal.vue
index 80075368..310b1167 100644
--- a/src/components/MiniModal.vue
+++ b/src/components/MiniModal.vue
@@ -38,7 +38,7 @@ withDefaults(defineProps<IProps>(), {
   width: 180rem;
   background: var(--color-second-bg);
   border-radius: 8rem;
-  box-shadow: 1px 1px 6px #bbbbbb;
+  box-shadow: 0 0 8px 2px var(--color-item-border);
   padding: 10rem $space;
   left: 50%;
   transform: translateX(-50%);
diff --git a/src/components/Practice/Footer.vue b/src/components/Practice/Footer.vue
index 255d7554..0bfade0c 100644
--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -41,8 +41,8 @@ onUnmounted(() => {
     <div class="bottom">
       <el-progress
           :percentage="progress"
-                   :stroke-width="8"
-                   :show-text="false"/>
+          :stroke-width="8"
+          :show-text="false"/>
       <div class="stat">
         <div class="row">
           <div class="num">{{ speedMinute }}分钟</div>
@@ -97,14 +97,16 @@ onUnmounted(() => {
       bottom: calc(100% + 20rem);
     }
   }
+
   .bottom {
     position: relative;
     width: 100%;
     box-sizing: border-box;
     border-radius: 10rem;
-    background: var(--color-header-bg);
+    background: var(--color-second-bg);
     padding: 3rem 10rem 10rem 10rem;
     z-index: 2;
+    border: 1px solid var(--color-item-border);
 
     .stat {
       margin-top: 10rem;
diff --git a/src/components/Practice/Panel.vue b/src/components/Practice/Panel.vue
index f1aa133a..7a92cff9 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/components/Practice/Panel.vue
@@ -214,6 +214,8 @@ $header-height: 50rem;
   flex-direction: column;
   transition: all .3s;
   z-index: 1;
+  border: 1px solid var(--color-item-border);
+
 
   & > header {
     min-height: 50rem;
diff --git a/src/components/Practice/PracticeWord/Typing.vue b/src/components/Practice/PracticeWord/Typing.vue
index d839dcf8..a3154c61 100644
--- a/src/components/Practice/PracticeWord/Typing.vue
+++ b/src/components/Practice/PracticeWord/Typing.vue
@@ -195,6 +195,10 @@ defineExpose({del, showWord, hideWord})
     transition: all .3s;
   }
 
+  .phonetic {
+    font-family: $word-font-family;
+  }
+
   .translate {
     position: absolute;
     transform: translateY(-50%);
@@ -211,7 +215,7 @@ defineExpose({del, showWord, hideWord})
     .word {
       font-size: 48rem;
       line-height: 1;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+      font-family: $word-font-family;
       letter-spacing: 5rem;
 
       .input {
diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue
index 7575303b..a3950408 100644
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -188,14 +188,14 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
         <Icon class="arrow" icon="bi:arrow-left" width="22"/>
         <div class="word">{{ prevWord.name }}</div>
       </div>
-      <Tooltip title="快捷键：Tab">
-        <div class="next"
-             @click="next(false)"
-             v-if="nextWord">
-          <div class="word" :class="settingStore.dictation && 'shadow'">{{ nextWord.name }}</div>
-          <Icon class="arrow" icon="bi:arrow-right" width="22"/>
-        </div>
-      </Tooltip>
+      <div class="next"
+           @click="next(false)"
+           v-if="nextWord">
+        <Tooltip title="快捷键：Tab">
+          <div class="word" :class="settingStore.dictation && 'text-shadow'">{{ nextWord.name }}</div>
+        </Tooltip>
+        <Icon class="arrow" icon="bi:arrow-right" width="22"/>
+      </div>
     </div>
     <Typing
         ref="typingRef"
@@ -282,9 +282,9 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
     .word {
       font-size: 24rem;
       margin-bottom: 4rem;
+      font-family: $word-font-family;
     }
 
-
     .prev {
       cursor: pointer;
       display: flex;
@@ -299,12 +299,6 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
       gap: 10rem;
       float: right;
     }
-
-    .shadow {
-      color: transparent !important;
-      text-shadow: #b0b0b0 0 0 6px;
-      user-select: none;
-    }
   }
 
   .options-wrapper {
diff --git a/src/components/Toolbar/DictGroup.vue b/src/components/Toolbar/DictGroup.vue
index 98f5c40f..8f4d01b6 100644
--- a/src/components/Toolbar/DictGroup.vue
+++ b/src/components/Toolbar/DictGroup.vue
@@ -54,7 +54,7 @@ watch(() => props.groupByTag, () => {
 
 <style scoped lang="scss">
 .dict-group {
-  color: black;
+  color: var(--color-font-1);
   margin-bottom: 40rem;
   //border-bottom: 1px dashed gray;
 
diff --git a/src/components/Toolbar/DictModal.vue b/src/components/Toolbar/DictModal.vue
index 09d5a171..2f4cdfcf 100644
--- a/src/components/Toolbar/DictModal.vue
+++ b/src/components/Toolbar/DictModal.vue
@@ -196,8 +196,7 @@ const dictIsArticle = $computed(() => {
         <div class="dict-detail-page">
           <header>
             <div class="left" @click.stop="step = 0">
-              <Icon icon="octicon:arrow-left-24"
-                    class="go" width="20" color="#000000"/>
+              <Icon icon="octicon:arrow-left-24" class="go" width="20"/>
               <div class="title">
                 词典详情
               </div>
@@ -418,7 +417,7 @@ $header-height: 60rem;
       .translate {
         display: flex;
         align-items: center;
-        color: black;
+        color: var(--color-font-1);
         margin-bottom: 30rem;
 
         & > span {
@@ -446,7 +445,7 @@ $header-height: 60rem;
     height: $header-height;
     align-items: center;
     justify-content: space-between;
-    color: #000;
+    color: var(--color-font-3);
 
     .left {
       display: flex;
@@ -464,7 +463,7 @@ $header-height: 60rem;
 
     .common-title {
       font-size: 20rem;
-      color: gray;
+      color: var(--color-font-1);
       text-align: center;
       margin-bottom: 10rem;
     }
diff --git a/src/components/Toolbar/SettingModal.vue b/src/components/Toolbar/SettingModal.vue
index 1772b920..af0e0b16 100644
--- a/src/components/Toolbar/SettingModal.vue
+++ b/src/components/Toolbar/SettingModal.vue
@@ -267,7 +267,7 @@ useWatchAllSound()
         gap: 10rem;
 
         &.active {
-          background: whitesmoke;
+          background: var(--color-item-bg);
         }
       }
     }
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 84a4150a..a14370b4 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -44,7 +44,7 @@ watch(() => settingStore.showToolbar, n => {
 <template>
   <header ref="headerRef">
     <div class="content">
-      <div class="info" @click="runtimeStore.showDictModal = true">
+      <div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
         {{ store.dictTitle }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
       </div>
       <div class="options">
@@ -124,17 +124,17 @@ watch(() => settingStore.showToolbar, n => {
 header {
   width: var(--toolbar-width);
   margin-top: 10rem;
-  background: var(--color-header-bg);
+  background: var(--color-second-bg);
   border-radius: 8rem;
   margin-bottom: 30rem;
-  //position: absolute;
   position: relative;
   z-index: 2;
   padding: 10rem $space;
   box-sizing: border-box;
   transition: all .3s;
   gap: 10rem;
-  //opacity: 0;
+  border: 1px solid var(--color-item-border);
+
 
   .content {
     min-height: 60rem;
@@ -143,7 +143,7 @@ header {
     justify-content: space-between;
 
     .info {
-      font-size: 16rem;
+      font-size: 17rem;
       padding: 6rem 10rem;
       border-radius: 6rem;
       color: var(--color-font-1);
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index a358c948..5de4f5a9 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -64,7 +64,7 @@ const {
   <div class="list" ref="listRef">
     <ListItem
         v-for="(word,i) in list" :key="i"
-        class="word-item"
+        class="common-list-item"
         :active="activeIndex === i"
         :class="{active:activeIndex === i}"
         :show-volume="true"
@@ -76,13 +76,13 @@ const {
         :show-del="showDel"
         @del="delWrongWord(word)"
     >
-      <div class="word-wrapper">
-        <span class="title">{{ word.name }}</span>
+      <div class="item-title">
+        <span class="word" :class="settingStore.dictation && 'text-shadow'">{{ word.name }}</span>
         <span class="phonetic">{{ word.usphone }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(word.name)"></VolumeIcon>
       </div>
-      <div class="sub-title" v-if="word.trans.length">
-        <div v-for="item in word.trans">{{item}}</div>
+      <div class="item-sub-title" v-if="word.trans.length && settingStore.translate">
+        <div v-for="item in word.trans">{{ item }}</div>
       </div>
     </ListItem>
   </div>
diff --git a/src/components/WordListModal.vue b/src/components/WordListModal.vue
index 455e09a9..d423dfb8 100644
--- a/src/components/WordListModal.vue
+++ b/src/components/WordListModal.vue
@@ -41,14 +41,14 @@ onUnmounted(() => {
       >
         <template #={source}>
           <ListItem
-              class="word-item"
+              class="common-list-item"
               :show-volume="true">
-            <div class="word-wrapper">
+            <div class="item-title">
               <span class="word">{{ source.name }}</span>
               <span class="phonetic">{{ source.usphone }}</span>
               <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
             </div>
-            <div class="item-translate" v-if="source.trans.length">{{ source.trans.join('；') }}</div>
+            <div class="item-sub-title" v-if="source.trans.length">{{ source.trans.join('；') }}</div>
           </ListItem>
         </template>
       </virtual-list>
@@ -76,13 +76,7 @@ onUnmounted(() => {
 }
 
 .dict-virtual-item {
-  background: var(--color-header-bg);
-  border-radius: 6rem;
-  display: flex;
-  justify-content: space-between;
-  transition: all .3s;
-  color: var(--color-font-1);
-  margin-bottom: 10rem;
+  margin-bottom: 15rem;
 }
 
 </style>