69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import type { GlobalThemeOverrides } from 'naive-ui';
|
|
import { defineStore } from 'pinia';
|
|
import { computed, shallowRef } from 'vue';
|
|
import { colord } from 'colord';
|
|
|
|
const LOCAL_FIXED_THEME_PRIMARY_COLOR = '#31A848FF';
|
|
|
|
export const useLocalConfigStore = defineStore(
|
|
'localConfig',
|
|
() => {
|
|
// 本地主题色配置
|
|
const { primaryColor, resetPrimaryColor, grayMode, toggleGrayMode, naiveThemeProps } = (function () {
|
|
const primaryColor = shallowRef<string>(LOCAL_FIXED_THEME_PRIMARY_COLOR);
|
|
|
|
// naive-ui 主题色变更
|
|
const naiveThemeProps = computed((): GlobalThemeOverrides => {
|
|
const hsColor = colord(primaryColor.value).lighten(0.035);
|
|
const pColor = colord(primaryColor.value).darken(0.1);
|
|
return {
|
|
common: {
|
|
primaryColor: primaryColor.value,
|
|
primaryColorHover: hsColor.toHex(),
|
|
primaryColorPressed: pColor.toHex(),
|
|
primaryColorSuppl: hsColor.toHex(),
|
|
},
|
|
LoadingBar: {
|
|
colorLoading: primaryColor.value,
|
|
},
|
|
};
|
|
});
|
|
|
|
function resetPrimaryColor() {
|
|
primaryColor.value = LOCAL_FIXED_THEME_PRIMARY_COLOR;
|
|
}
|
|
|
|
const grayMode = shallowRef<boolean>(false);
|
|
function toggleGrayMode() {
|
|
grayMode.value = !grayMode.value;
|
|
if (grayMode.value) {
|
|
document.documentElement.style.filter = 'grayscale(1)';
|
|
} else {
|
|
document.documentElement.style.filter = 'grayscale(0)';
|
|
}
|
|
}
|
|
|
|
return {
|
|
primaryColor,
|
|
resetPrimaryColor,
|
|
grayMode,
|
|
toggleGrayMode,
|
|
naiveThemeProps,
|
|
};
|
|
})();
|
|
|
|
// 布局配置
|
|
|
|
return {
|
|
primaryColor,
|
|
resetPrimaryColor,
|
|
grayMode,
|
|
toggleGrayMode,
|
|
naiveThemeProps,
|
|
};
|
|
},
|
|
{
|
|
persist: true,
|
|
}
|
|
);
|