Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-14 09:38:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
BTMuli
2023-04-22 00:24:40 +08:00
parent 857cdec786
commit 277888dead
24 changed files with 277 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/t-sidebar.vue
View File

@@ -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;
}