mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-01 03:46:52 +00:00
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import { ConfigProvider } from 'ant-design-vue'
|
|
import tinycolor from 'tinycolor2'
|
|
|
|
export const useAntDvTheme = 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: themeV3Colors.brand[500],
|
|
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(themeV3Colors.brand[500])
|
|
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(themeV3Colors.brand[500])
|
|
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 {
|
|
currentTheme,
|
|
setTheme,
|
|
}
|
|
})
|