|
|
@ -12,38 +12,22 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => { |
|
|
|
const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null) |
|
|
|
const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null) |
|
|
|
const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null) |
|
|
|
const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null) |
|
|
|
|
|
|
|
|
|
|
|
const { project, getProjectMeta, updateProject } = useProject() |
|
|
|
const { project, projectMeta, updateProject } = useProject() |
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// set theme based on active project
|
|
|
|
// set theme based on active project
|
|
|
|
watch(project, () => { |
|
|
|
watch(project, () => { |
|
|
|
setTheme({ |
|
|
|
setTheme({ |
|
|
|
primaryColor: themeV2Colors['royal-blue'].DEFAULT, |
|
|
|
primaryColor: themeV2Colors['royal-blue'].DEFAULT, |
|
|
|
accentColor: themeV2Colors.pink['500'], |
|
|
|
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 */ |
|
|
|
/** current theme config */ |
|
|
|
const currentTheme = ref({ |
|
|
|
const currentTheme = ref({ |
|
|
|
primaryColor: themeV2Colors['royal-blue'].DEFAULT, |
|
|
|
primaryColor: themeV2Colors['royal-blue'].DEFAULT, |
|
|
|
accentColor: themeV2Colors.pink['500'], |
|
|
|
accentColor: themeV2Colors.pink['500'], |
|
|
|
...getProjectMeta()?.theme, |
|
|
|
...projectMeta.value?.theme, |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
/** set initial config */ |
|
|
|
/** set initial config */ |
|
|
@ -66,18 +50,15 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
ConfigProvider.config({ |
|
|
|
ConfigProvider.config({ |
|
|
|
theme: { ...currentTheme.value }, |
|
|
|
theme: currentTheme.value, |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async function saveTheme(theme: Partial<ThemeConfig>) { |
|
|
|
async function saveTheme(theme: Partial<ThemeConfig>) { |
|
|
|
const meta = getProjectMeta() |
|
|
|
|
|
|
|
await updateProject({ |
|
|
|
await updateProject({ |
|
|
|
meta: JSON.stringify({ |
|
|
|
meta: JSON.stringify({ |
|
|
|
...meta, |
|
|
|
...projectMeta.value, |
|
|
|
theme: { |
|
|
|
theme, |
|
|
|
...theme, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}), |
|
|
|
}), |
|
|
|
}) |
|
|
|
}) |
|
|
|
setTheme(theme) |
|
|
|
setTheme(theme) |
|
|
|