多维表格

47 lines
1.7 KiB

import { ConfigProvider } from 'ant-design-vue'
import tinycolor from 'tinycolor2'
import { createGlobalState, hexToRGB, ref, themeV2Colors, useCssVar } from '#imports'
import type { ThemeConfig } from '~/lib'
export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
const defaultTheme = {
primaryColor: themeV2Colors['royal-blue'].DEFAULT,
accentColor: themeV2Colors.pink['500'],
}
/** current theme config */
const currentTheme = ref(defaultTheme)
/** set initial config */
setTheme(config ?? currentTheme.value)
/** set theme */
function setTheme(theme?: Partial<ThemeConfig>) {
const themePrimary = theme?.primaryColor ? tinycolor(theme.primaryColor) : tinycolor(themeV2Colors['royal-blue'].DEFAULT)
const themeAccent = theme?.accentColor ? tinycolor(theme.accentColor) : tinycolor(themeV2Colors.pink['500'])
// convert hex colors to rgb values
primaryColor.value = themePrimary.isValid()
? hexToRGB(themePrimary.toHex8String())
: hexToRGB(themeV2Colors['royal-blue'].DEFAULT)
accentColor.value = themeAccent.isValid() ? hexToRGB(themeAccent.toHex8String()) : hexToRGB(themeV2Colors.pink['500'])
currentTheme.value = {
primaryColor: themePrimary.toHex8String().toUpperCase().slice(0, -2),
accentColor: themeAccent.toHex8String().toUpperCase().slice(0, -2),
}
ConfigProvider.config({
theme: currentTheme.value,
})
}
return {
theme: currentTheme,
setTheme,
defaultTheme,
}
})