✨ feat(switch): 实现主题切换，后面就是更改配色了

src/App.vue

@@ -42,6 +42,9 @@ const appStore = useAppStore();
 const isMain = ref(true as boolean);
 
 onMounted(async () => {
+  // 获取当前主题
+  const theme = appStore.theme;
+  document.documentElement.className = theme;
   // 获取当前窗口
   const win = window.getCurrent();
   isMain.value = win.label === "tauri-genshin";
@@ -93,7 +96,7 @@ async function writeIndex () {
 <style lang="css">
 .app-main {
   min-height: 100vh;
-  background: #ece5d8;
+  background: var(--page-bg);
   backdrop-filter: blur(20px);
 }
 </style>

src/assets/index.css

@@ -1,4 +1,6 @@
 @import "fonts/index.css";
+@import url("themes/default.css");
+@import url("themes/dark.css");
 
 /*
  * @description 侧边滚动条样式

src/components/t-sidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer permanent :rail="rail" style="background: #485466; color: #faf7e8">
+  <v-navigation-drawer permanent :rail="rail" style="background: var(--sidebar-bg); color: #faf7e8">
     <v-list v-model:opened="open" class="side-list" density="compact" nav>
       <!-- 负责收缩侧边栏 -->
       <v-list-item @click="collapse">
@@ -120,6 +120,13 @@
             <img :src="userInfo.avatar" alt="userIcon" class="side-icon">
           </template>
         </v-list-item> -->
+        <v-list-item :title="themeTitle" value="theme" @click="switchTheme">
+          <template #prepend>
+            <v-icon color="rgb(205, 182, 145)">
+              {{ themeGet === 'default' ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+            </v-icon>
+          </template>
+        </v-list-item>
         <v-list-item title="设置" value="config" link href="/config">
           <template #prepend>
             <img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
@@ -139,6 +146,18 @@ import { useAppStore } from "../store/modules/app";
 const appStore = useAppStore();
 
 const rail = ref(appStore.sidebar.collapse);
+// theme
+const themeGet = computed({
+  get () {
+    return appStore.theme;
+  },
+  set (value: string) {
+    appStore.theme = value;
+  },
+});
+const themeTitle = computed(() => {
+  return themeGet.value === "default" ? "切换为夜间模式" : "切换为日间模式";
+});
 
 const open = computed({
   get () {
@@ -154,6 +173,13 @@ function collapse () {
   rail.value = !rail.value;
   appStore.sidebar.collapse = rail.value;
 }
+
+function switchTheme () {
+  themeGet.value = themeGet.value === "default" ? "dark" : "default";
+  appStore.theme = themeGet.value;
+  document.documentElement.className = themeGet.value;
+}
+
 </script>
 
 <style lang="css" scoped>

src/themes/common/index.css

@@ -1,6 +0,0 @@
-/**
- * @file themes common index.css
- * @description 主题配置-公共样式
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.3
- */

src/themes/dark/index.css

@@ -1,9 +0,0 @@
-/**
- * @file themes dark index.css
- * @description 主题配置-暗色主题
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.3
- */
-
-/* 通用样式 */
-@import "./common/index.css";

src/themes/light/index.css

@@ -1,9 +0,0 @@
-/**
- * @file themes light index.css
- * @description 主题配置-亮色主题
- * @author BTMuli<bt-muli@outlook.com>
- * @since Alpha v0.1.3
- */
-
-/* 通用样式 */
-@import "./common/index.css";