💄 美化侧边栏

src/assets/themes/dark.css

@@ -2,7 +2,7 @@
  * @file assets themes light.css
  * @description 主题样式文件
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.0
+ * @since Alpha v0.2.1
  */
 
 /* 主题色 */
@@ -16,8 +16,6 @@ html.dark {
   --common-text-2: var(--common-color-white); /* text */
   --common-text-3: var(--common-color-grey); /* quote */
 
-  --sidebar-bg: #1e1e1e;
-  --sidebar-icon: #e1e1e1;
   --page-bg:#2a2a2a;
   --scroll-bg: rgba(0, 0, 0, 0.5);
   --calendar-btn-bg: #1e1e1e;

src/assets/themes/default.css

@@ -2,7 +2,7 @@
  * @file assets themes dark.css
  * @description 主题样式文件
  * @author BTMuli <bt-muli@outlook.com>
- * @since Alpha v0.2.0
+ * @since Alpha v0.2.1
  */
 
 /* 主题色 */
@@ -16,8 +16,6 @@ html.default {
   --common-text-2: var(--common-color-blue-2); /* text */
   --common-text-3: var(--common-color-blue-3); /* quote */
 
-  --sidebar-bg: #485466;
-  --sidebar-icon: #ece5d8;
   --page-bg:#ece5d8;
   --scroll-bg: rgba(0, 0, 0, 0.2);
   --calendar-btn-bg: #393b40;

src/components/main/t-sidebar.vue

@@ -5,16 +5,12 @@
       <v-list-item @click="collapse()">
         <template v-if="rail" #prepend>
           <v-list-item-action>
-            <v-icon style="color:var(--sidebar-icon)">
-              mdi-chevron-right
-            </v-icon>
+            <v-icon>mdi-chevron-right</v-icon>
           </v-list-item-action>
         </template>
         <template v-else #append>
           <v-list-item-action>
-            <v-icon style="color:var(--sidebar-icon)">
-              mdi-chevron-left
-            </v-icon>
+            <v-icon>mdi-chevron-left</v-icon>
           </v-list-item-action>
         </template>
       </v-list-item>
@@ -108,10 +104,10 @@
             </v-list-item-title>
           </template>
         </v-list-item>
-        <v-list-item :title="themeTitle" value="theme" @click="switchTheme()">
+        <v-list-item :title="themeTitle" @click="switchTheme()">
           <template #prepend>
-            <v-icon style="color:var(--sidebar-icon)">
-              {{ themeGet === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
+            <v-icon>
+              {{ themeGet === "default" ? "mdi-weather-night" : "mdi-weather-sunny" }}
             </v-icon>
           </template>
         </v-list-item>
@@ -127,7 +123,7 @@
 
 <script lang="ts" setup>
 // vue
-import { computed, ref, onMounted } from "vue";
+import { computed, onMounted, ref } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
 // store
@@ -155,7 +151,7 @@ const themeGet = computed({
   },
 });
 const themeTitle = computed(() => {
-  return themeGet.value === "default" ? "切换为夜间模式" : "切换为日间模式";
+  return themeGet.value === "default" ? "夜间模式" : "日间模式";
 });
 
 const open = computed({
@@ -199,8 +195,8 @@ async function switchTheme () {
 }
 
 .side-list {
-  font-family: Genshin-Light, serif;
-  height: 100vh;
+  font-family: var(--font-title);
+  height: 100%;
 }
 
 .bottom-menu {