feat: 优化主题切换逻辑,添加浅色主题支持,更新相关样式
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
@@ -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 });
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user