2ba453bbed
更新 useColorMode 钩子的类型参数，明确指定为 BasicColorSchema 类型， 并设置 initialValue 为 'auto'，确保主题模式的类型安全和默认行为。 同时添加 attribute 配置项以支持 class 属性切换。
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import type { BasicColorSchema } from '@vueuse/core';
|
|
import { useLocalStorage, useMediaQuery } from '@vueuse/core';
|
|
import { defineStore } from 'pinia';
|
|
import { computed } from 'vue';
|
|
|
|
// >>>>>
|
|
// https://vueuse.org/core/useColorMode/#advanced-usage
|
|
const { system, store: themeMode } = useColorMode<BasicColorSchema>({
|
|
selector: 'html',
|
|
attribute: 'class',
|
|
modes: { light: '', dark: 'app-dark', auto: '' },
|
|
disableTransition: false,
|
|
initialValue: 'auto',
|
|
});
|
|
const { state, next: cycleTheme } = useCycleList(['light', 'dark', 'auto'] as const, {
|
|
initialValue: themeMode,
|
|
});
|
|
watchEffect(() => (themeMode.value = state.value));
|
|
export type AppThemeMode = typeof themeMode.value;
|
|
// <<<<<
|
|
|
|
export const useAppStore = defineStore('app', () => {
|
|
// 侧边栏展开/收起状态
|
|
const sidebarCollapsed = useLocalStorage<boolean>('app-sidebar-collapsed', false);
|
|
const toggleSidebar = useToggle(sidebarCollapsed);
|
|
|
|
// 主题模式
|
|
const actualTheme = computed(() => (themeMode.value === 'auto' ? system.value : themeMode.value));
|
|
const isDark = computed(() => actualTheme.value === 'dark');
|
|
|
|
// 是否是移动端
|
|
const isMobile = useMediaQuery('(max-width: 768px)');
|
|
|
|
return {
|
|
themeMode,
|
|
isDark,
|
|
isMobile,
|
|
cycleTheme,
|
|
sidebarCollapsed,
|
|
toggleSidebar,
|
|
};
|
|
});
|
|
|
|
if (import.meta.hot) {
|
|
import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot));
|
|
}
|