add dark mode

This commit is contained in:
landaiqing
2024-08-08 16:39:27 +08:00
parent a4b502717c
commit 562071cdc5
26 changed files with 479 additions and 112 deletions

View File

@@ -0,0 +1,54 @@
import {defineStore} from 'pinia';
import {computed, ref} from 'vue';
import {theme} from 'ant-design-vue';
import variables from '@/assets/styles/colors.module.scss';
import {handleLocalforage} from "@/utils/localforage";
import {parse, stringify} from "zipson/lib";
/**
* theme 配置 开启持久化
*/
export const useThemeStore = defineStore(
'theme',
() => {
const themeName = ref('green'); // 主题名称
const darkMode = ref('light'); // 颜色模式
const darkModeComp = computed(() => {
document.documentElement.setAttribute('data-dark', darkMode.value);
return darkMode.value;
});
const themeConfig = computed(() => {
document.documentElement.setAttribute('data-theme', themeName.value);
// 主题配置
return {
token: {
colorPrimary: variables[themeName.value] || '#27ba9b',
colorSuccess: '#1dc779',
colorWarning: '#ffb302',
colorError: '#cf4444',
colorInfo: variables[themeName.value] || '#27ba9b',
wireframe: true
},
algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
};
});
const setThemeName = (value: string) => {
themeName.value = value;
};
const toggleDarkMode = () => {
darkMode.value = darkMode.value === 'light' ? 'dark' : 'light';
};
return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode};
},
{
persist: {
key: 'theme',
paths: ['themeName','darkMode',"darkModeComp","themeConfig"],
storage: handleLocalforage,
serializer: {
deserialize: parse,
serialize: stringify,
},
}
}
);

View File

@@ -1,32 +0,0 @@
import {defineStore} from 'pinia'
import {ref} from 'vue'
export const useAuthStore = defineStore(
'user',
() => {
const user = ref<any>()
function setUser(data: any) {
user.value = data
}
function getUser() {
return user.value
}
function clearUser() {
user.value = void 0
}
return {
user,
setUser,
getUser,
clearUser
}
},
{
// 开启数据持久化
persist: true
}
)

View File

@@ -0,0 +1,44 @@
import {defineStore} from 'pinia';
import {ref} from 'vue';
import {User} from "@/types/user";
import {parse, stringify} from "zipson/lib";
import {handleLocalforage} from "@/utils/localforage";
export const useAuthStore = defineStore(
'user',
() => {
const user = ref<User>();
function setUser(data: User) {
user.value = data;
}
function getUser() {
return user.value;
}
function clearUser() {
user.value = void 0;
}
return {
user,
setUser,
getUser,
clearUser
};
},
{
// 开启数据持久化
persist: {
key: 'user',
paths: ['user'],
storage: handleLocalforage,
serializer: {
deserialize: parse,
serialize: stringify,
},
}
}
);