feat: 优化主题切换逻辑,添加浅色主题支持,更新相关样式

This commit is contained in:
2025-12-21 04:41:44 +07:00
parent 101554ef5e
commit 7dfc125f66
3 changed files with 10 additions and 5 deletions

View File

@@ -1,5 +1,3 @@
import { usePreferredDark } from "@vueuse/core";
export type ThemeMode = "light" | "dark" | "auto"; export type ThemeMode = "light" | "dark" | "auto";
const STORAGE_KEY = "app-theme-mode"; const STORAGE_KEY = "app-theme-mode";
@@ -16,7 +14,14 @@ export function useTheme() {
}); });
watch(isDark, (dark) => { watch(isDark, (dark) => {
if (dark) {
document.documentElement.classList.toggle("ion-palette-dark", dark); document.documentElement.classList.toggle("ion-palette-dark", dark);
document.documentElement.classList.remove("ion-palette-light");
}
else {
document.documentElement.classList.remove("ion-palette-dark");
document.documentElement.classList.add("ion-palette-light");
}
}, { immediate: true }); }, { immediate: true });
return { return {

View File

@@ -14,7 +14,7 @@ export const useUserStore = defineStore("user", () => {
userProfile: null, userProfile: null,
}); });
const isAuthenticated = computed(() => token.value !== null); const isAuthenticated = computed(() => !!token.value);
async function updateProfile() { async function updateProfile() {
const { data } = await safeClient(client.api.user.profile.get(), { silent: true }); const { data } = await safeClient(client.api.user.profile.get(), { silent: true });

View File

@@ -1,6 +1,6 @@
/* For information on how to create your own theme, please refer to: /* For information on how to create your own theme, please refer to:
http://ionicframework.com/docs/theming/ */ http://ionicframework.com/docs/theming/ */
html:root { html.ion-palette-light {
--ion-color-primary: #0d0d0d; --ion-color-primary: #0d0d0d;
--ion-color-primary-rgb: 13, 13, 13; --ion-color-primary-rgb: 13, 13, 13;
--ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast: #ffffff;