47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import {defineStore} from 'pinia';
|
|
import {computed, ref} from 'vue';
|
|
import {theme} from 'ant-design-vue';
|
|
import variables from '@/assets/styles/colors.module.scss';
|
|
|
|
/**
|
|
* theme 配置
|
|
*/
|
|
export const useThemeStore = defineStore(
|
|
'theme',
|
|
() => {
|
|
const themeName = ref<string>('blue'); // 主题名称
|
|
const darkMode = ref<string>('light'); // 颜色模式
|
|
const themeConfig = computed(() => {
|
|
document.documentElement.setAttribute('data-theme', themeName.value);
|
|
document.documentElement.setAttribute('data-dark', darkMode.value);
|
|
// 主题配置
|
|
return {
|
|
token: {
|
|
colorPrimary: variables[themeName.value] || 'rgba(96,165,250,.9)',
|
|
borderRadius: 10,
|
|
colorSuccess: '#1dc779',
|
|
colorWarning: '#ffb302',
|
|
colorError: '#cf4444',
|
|
colorInfo: variables[themeName.value] || 'rgba(96,165,250,.9)',
|
|
wireframe: true
|
|
},
|
|
algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
|
|
};
|
|
});
|
|
const setThemeName = (value: string) => {
|
|
themeName.value = value;
|
|
};
|
|
const toggleDarkMode = () => {
|
|
darkMode.value = darkMode.value === "dark" ? "light" : "dark";
|
|
};
|
|
return {themeName, themeConfig, darkMode, setThemeName, toggleDarkMode};
|
|
},
|
|
{
|
|
persist: {
|
|
key: 'theme',
|
|
storage: localStorage,
|
|
pick: ["themeName", "darkMode"],
|
|
}
|
|
}
|
|
);
|