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) => { const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null) const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null) /** current theme config */ const currentTheme = ref({ primaryColor: themeV2Colors['royal-blue'].DEFAULT, accentColor: themeV2Colors.pink['500'], }) /** set initial config */ setTheme(config ?? currentTheme.value) /** set theme (persists in localstorage) */ function setTheme(theme?: Partial) { 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(), accentColor: themeAccent.toHex8String().toUpperCase(), } ConfigProvider.config({ theme: currentTheme.value, }) } return { theme: currentTheme, setTheme, } })