From 6fc82b70ed1478f3ef8bfe444789031283283f56 Mon Sep 17 00:00:00 2001 From: mertmit Date: Fri, 26 Aug 2022 19:53:21 +0300 Subject: [PATCH] feat: fallback to default theme if wrong theme provided Signed-off-by: mertmit --- .../nc-gui-v2/composables/useTheme/index.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts index 1090cb8e20..ed339ce0c7 100644 --- a/packages/nc-gui-v2/composables/useTheme/index.ts +++ b/packages/nc-gui-v2/composables/useTheme/index.ts @@ -1,5 +1,6 @@ import { ConfigProvider } from 'ant-design-vue' import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider' +import tinycolor from 'tinycolor2' import { hexToRGB, themeV2Colors, useCssVar, useInjectionState, useProject } from '#imports' interface ThemeConfig extends AntTheme { @@ -50,14 +51,22 @@ const [setup, use] = useInjectionState((config?: Partial) => { /** set theme (persists in localstorage) */ function setTheme(theme: Partial) { + const themePrimary = tinycolor(theme.primaryColor) + const themeAccent = tinycolor(theme.accentColor) + // convert hex colors to rgb values - if (theme.primaryColor) primaryColor.value = hexToRGB(theme.primaryColor) - if (theme.accentColor) accentColor.value = hexToRGB(theme.accentColor) + 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 = theme as ThemeConfig + currentTheme.value = { + primaryColor: themePrimary.toHex8String().toUpperCase(), + accentColor: themeAccent.toHex8String().toUpperCase(), + } ConfigProvider.config({ - theme, + theme: { ...currentTheme.value }, }) }