diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts index b980b5d0e0..c618bf37e8 100644 --- a/packages/nc-gui/composables/useTheme/index.ts +++ b/packages/nc-gui/composables/useTheme/index.ts @@ -6,12 +6,13 @@ 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({ + 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) @@ -40,5 +41,6 @@ export const useTheme = createGlobalState((config?: Partial) => { return { theme: currentTheme, setTheme, + defaultTheme, } }) diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue index e37fac58bd..288cab8d96 100644 --- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue +++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue @@ -29,7 +29,7 @@ definePageMeta({ hideHeader: true, }) -const { theme } = useTheme() +const { theme, defaultTheme } = useTheme() const { t } = useI18n() @@ -71,9 +71,13 @@ function toggleDialog(value?: boolean, key?: string) { openDialogKey.value = key } -const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => { +const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color?: string) => { switch (mode) { case 'swatch': { + if (color === defaultTheme.primaryColor) { + return await saveTheme(defaultTheme) + } + const tcolor = tinycolor(color) if (tcolor.isValid()) { const complement = tcolor.complement() @@ -338,6 +342,7 @@ onBeforeUnmount(reset) :colors="projectThemeColors" :row-size="9" :advanced="false" + class="rounded-t" @input="handleThemeColor('swatch', $event)" /> diff --git a/packages/nc-gui/utils/colorsUtils.ts b/packages/nc-gui/utils/colorsUtils.ts index fd51959a37..24e9b2d102 100644 --- a/packages/nc-gui/utils/colorsUtils.ts +++ b/packages/nc-gui/utils/colorsUtils.ts @@ -85,6 +85,7 @@ export const hexToRGB = (hex: string) => { } export const projectThemeColors = [ + themeV2Colors['royal-blue'].DEFAULT, '#2D7FF9', '#18BFFF', '#60DAD5', @@ -93,7 +94,6 @@ export const projectThemeColors = [ '#F57134', '#1BAF2C', '#8B46FF', - '#666666', '#1B51A2', '#146C8E', '#24716E',