💄 feat(theme): 页面主题切换完成

src/components/t-backTop.vue

@@ -64,7 +64,7 @@ onMounted(() => {
   cursor: pointer;
   transform: scale(0.9);
   transition: all 0.3s ease-in-out;
-  box-shadow: 0 0 10px 5px #546d8b;
+  box-shadow: 0 0 10px 5px var(--back-top-shadow);
 }
 
 .back-top img {

src/components/t-calendar.vue

@@ -11,8 +11,9 @@
           :key="text.week"
           class="calendar-btn"
           :style="{
-            border: text.week === weekNow ? '2px solid #fec90b' : '0',
-            background: text.week === btnNow ? '#fec90b' : '#4A5366',
+            border: text.week === weekNow ? '2px solid var(--btn-bg-1)' : '0',
+            background: text.week === btnNow ? 'var(--btn-bg-1)' : 'var(--btn-bg-2)',
+            color: '#faf7e8'
           }"
           @click="getContents(text.week)"
         >
@@ -239,14 +240,14 @@ function getContents (day: number) {
 .calendar-card {
   margin-top: 10px;
   font-family: Genshin-Light, serif;
-  background: #546d8b;
+  background: var(--content-bg-1);
   border-radius: 10px;
 }
 
 .calendar-btn {
   margin-left: 10px;
   font-family: Genshin-Light, serif;
-  color: #faf7e8;
+  color: var(--btn-text-1);
   border-radius: 10px;
 }
 
@@ -262,8 +263,8 @@ function getContents (day: number) {
 
 .calendar-single {
   margin-bottom: 10px;
-  background: #faf7e8;
-  color: #546d8b;
+  background: var(--content-bg-2);
+  color: var(--content-bg-1);
   border-radius: 10px;
 }
 
@@ -276,8 +277,8 @@ function getContents (day: number) {
 }
 
 .calendar-content {
-  background: #546D8B;
-  color:#faf7e8;
+  background: var(--content-bg-1);
+  color:var(--content-bg-2);
   margin: 5px;
   border-radius: 10px;
   padding: 10px;
@@ -414,7 +415,7 @@ function getContents (day: number) {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba(20, 20, 20, 0.5);
+  background: rgb(20 20 20 / 50%);
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
   color: #fff;

src/components/t-confirm.vue

@@ -73,7 +73,7 @@ const onConfirm = () => {
   height: 20vh;
   top: 40vh;
   left: 30vw;
-  background: #fff;
+  background: var(--content-bg-2);
   border-radius: 10px;
   padding: 10px;
   display: flex;
@@ -92,7 +92,7 @@ const onConfirm = () => {
   text-align: center;
   height: 20%;
   width: 100%;
-  color: #393b40;
+  color: var(--content-text-2);
   margin: 20px;
   font-size: 30px;
 }
@@ -109,8 +109,8 @@ const onConfirm = () => {
   width: 30%;
   min-width: 150px;
   min-height: 30px;
-  background: #4a5366;
-  color: #faf7e8;
+  background: var(--btn-bg-2);
+  color: var(--btn-text-1);
   border-radius: 50px;
   display: flex;
   align-items: center;

src/components/t-pool.vue

@@ -9,9 +9,9 @@
         <v-card
           v-for="pool in poolCards"
           :key="pool.post_id"
-          style="background: #faf7e8; color: #546d8b; border-radius: 10px"
+          style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
         >
-          <v-list style="background: #faf7e8; color: #546d8b">
+          <v-list style="background: var(--content-bg-2); color: #546d8b">
             <v-list-item :title="pool.title" :subtitle="pool.subtitle">
               <template #prepend>
                 <v-img :src="pool.voice.icon" style="transform: translate(0, -10px); width: 60px; height: 60px" />
@@ -188,7 +188,7 @@ function toPost (pool: GachaCard) {
 .pool-card {
   font-family: Genshin, serif;
   width: 100%;
-  background: #546d8b;
+  background: var(--content-bg-1);
   border-radius: 10px;
   margin-top: 10px;
 }

src/components/t-position.vue

@@ -9,9 +9,9 @@
         <v-card
           v-for="card in positionCards"
           :key="card.post_id"
-          style="background: #faf7e8; color: #546d8b; border-radius: 10px"
+          style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
         >
-          <v-list style="background: #faf7e8; color: #546d8b">
+          <v-list style="background: var(--content-bg-2); color: #546d8b">
             <v-list-item :title="card.title" :subtitle="card.abstract">
               <template #prepend>
                 <v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
@@ -130,7 +130,7 @@ async function toPost (card: PositionCard) {
 .position-card {
   margin-top: 10px;
   font-family: Genshin, serif;
-  background: #546d8b;
+  background: var(--content-bg-1);
   border-radius: 10px;
 }
 

src/components/t-sidebar.vue

@@ -5,14 +5,14 @@
       <v-list-item @click="collapse">
         <template v-if="rail" #prepend>
           <v-list-item-action>
-            <v-icon color="rgb(205, 182, 145)">
+            <v-icon style="color:var(--sidebar-icon)">
               mdi-chevron-right
             </v-icon>
           </v-list-item-action>
         </template>
         <template v-else #append>
           <v-list-item-action>
-            <v-icon color="rgb(205, 182, 145)">
+            <v-icon style="color:var(--sidebar-icon)">
               mdi-chevron-left
             </v-icon>
           </v-list-item-action>
@@ -85,7 +85,7 @@
           <v-list-item title="图鉴" v-bind="props">
             <template #prepend>
               <!-- TODO: 后续更换图标-->
-              <v-icon color="rgb(205, 182, 145)">
+              <v-icon style="color:var(--sidebar-icon)">
                 mdi-book-open-variant
               </v-icon>
             </template>
@@ -99,7 +99,7 @@
         <v-list-item title="角色图鉴" value="wiki-character" link href="/wiki/character">
           <template #prepend>
             <!-- TODO: 后续更换图标-->
-            <v-icon style="color:#FDE7AC !important">
+            <v-icon style="color:var(--sidebar-icon)">
               mdi-account
             </v-icon>
           </template>
@@ -107,7 +107,7 @@
         <v-list-item title="武器图鉴" value="wiki-weapon" link href="/wiki/weapon">
           <template #prepend>
             <!-- TODO: 后续更换图标 -->
-            <v-icon style="color:#FDE7AC !important">
+            <v-icon style="color:var(--sidebar-icon)">
               mdi-sword
             </v-icon>
           </template>
@@ -122,8 +122,8 @@
         </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 style="color:var(--sidebar-icon)">
+              {{ themeGet === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
             </v-icon>
           </template>
         </v-list-item>
@@ -175,8 +175,7 @@ function collapse () {
 }
 
 function switchTheme () {
-  themeGet.value = themeGet.value === "default" ? "dark" : "default";
-  appStore.theme = themeGet.value;
+  appStore.changeTheme();
   document.documentElement.className = themeGet.value;
 }
 

src/components/t-switchTheme.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="switch-box">
+    <div class="switch-btn" @click="swithcTheme()">
+      <v-icon style="color:var(--theme-switch-icon)">
+        {{ themeGet === 'default' ? 'mdi-weather-night' : 'mdi-weather-sunny' }}
+      </v-icon>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+// vue
+import { computed } from "vue";
+// store
+import { useAppStore } from "../store/modules/app";
+
+// store
+const appStore = useAppStore();
+// theme
+const themeGet = computed({
+  get () {
+    return appStore.theme;
+  },
+  set (value: string) {
+    appStore.theme = value;
+  },
+});
+
+function swithcTheme () {
+  appStore.changeTheme();
+  document.documentElement.className = themeGet.value;
+}
+
+</script>
+<style lang="css" scoped>
+.switch-box {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  border: var(--theme-switch-icon) 2px solid;
+}
+
+.switch-box:hover {
+  opacity: 0.8;
+}
+
+.switch-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+}
+</style>