diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts index 8fb44855c1..b6d62b6f07 100644 --- a/packages/nc-gui-v2/composables/useProject.ts +++ b/packages/nc-gui-v2/composables/useProject.ts @@ -90,7 +90,7 @@ export function useProject(projectId?: MaybeRef) { await $api.project.update(_projectId, data) } - function getProjectMeta() { + const projectMeta = computed(() => { try { return typeof project.value.meta === 'string' ? JSON.parse(project.value.meta) : project.value.meta } catch (e) { @@ -104,7 +104,7 @@ export function useProject(projectId?: MaybeRef) { tables.value = [] projectMetaInfo.value = undefined projectRoles.value = {} - } + } }) return { @@ -121,6 +121,6 @@ export function useProject(projectId?: MaybeRef) { isSharedBase, loadProjectMetaInfo, projectMetaInfo, - getProjectMeta, + projectMeta, } } diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts index ed339ce0c7..a8f0b1c1bc 100644 --- a/packages/nc-gui-v2/composables/useTheme/index.ts +++ b/packages/nc-gui-v2/composables/useTheme/index.ts @@ -12,38 +12,22 @@ const [setup, use] = useInjectionState((config?: Partial) => { const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null) const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null) - const { project, getProjectMeta, updateProject } = useProject() - - const route = useRoute() + const { project, projectMeta, updateProject } = useProject() // set theme based on active project watch(project, () => { setTheme({ primaryColor: themeV2Colors['royal-blue'].DEFAULT, accentColor: themeV2Colors.pink['500'], - ...getProjectMeta()?.theme, + ...projectMeta.value?.theme, }) }) - // set default theme for routes out of project - watch( - () => route, - (v) => { - if (!v.params?.projectId) { - setTheme({ - primaryColor: themeV2Colors['royal-blue'].DEFAULT, - accentColor: themeV2Colors.pink['500'], - }) - } - }, - { deep: true }, - ) - /** current theme config */ const currentTheme = ref({ primaryColor: themeV2Colors['royal-blue'].DEFAULT, accentColor: themeV2Colors.pink['500'], - ...getProjectMeta()?.theme, + ...projectMeta.value?.theme, }) /** set initial config */ @@ -66,18 +50,15 @@ const [setup, use] = useInjectionState((config?: Partial) => { } ConfigProvider.config({ - theme: { ...currentTheme.value }, + theme: currentTheme.value, }) } async function saveTheme(theme: Partial) { - const meta = getProjectMeta() await updateProject({ meta: JSON.stringify({ - ...meta, - theme: { - ...theme, - }, + ...projectMeta.value, + theme, }), }) setTheme(theme)