feat(app-store): 添加主题模式类型定义和初始值配置
更新 useColorMode 钩子的类型参数,明确指定为 BasicColorSchema 类型, 并设置 initialValue 为 'auto',确保主题模式的类型安全和默认行为。 同时添加 attribute 配置项以支持 class 属性切换。
This commit is contained in:
@@ -1,13 +1,16 @@
|
|||||||
|
import type { BasicColorSchema } from '@vueuse/core';
|
||||||
import { useLocalStorage, useMediaQuery } from '@vueuse/core';
|
import { useLocalStorage, useMediaQuery } from '@vueuse/core';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
// >>>>>
|
// >>>>>
|
||||||
// https://vueuse.org/core/useColorMode/#advanced-usage
|
// https://vueuse.org/core/useColorMode/#advanced-usage
|
||||||
const { system, store: themeMode } = useColorMode({
|
const { system, store: themeMode } = useColorMode<BasicColorSchema>({
|
||||||
selector: 'html',
|
selector: 'html',
|
||||||
|
attribute: 'class',
|
||||||
modes: { light: '', dark: 'app-dark', auto: '' },
|
modes: { light: '', dark: 'app-dark', auto: '' },
|
||||||
disableTransition: false,
|
disableTransition: false,
|
||||||
|
initialValue: 'auto',
|
||||||
});
|
});
|
||||||
const { state, next: cycleTheme } = useCycleList(['light', 'dark', 'auto'] as const, {
|
const { state, next: cycleTheme } = useCycleList(['light', 'dark', 'auto'] as const, {
|
||||||
initialValue: themeMode,
|
initialValue: themeMode,
|
||||||
|
|||||||
Reference in New Issue
Block a user