mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.7 KiB
46 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, |
|
} |
|
})
|
|
|