72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<template>
|
|
<RouterView></RouterView>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouterView } from 'vue-router';
|
|
import { onMounted, watch } from 'vue';
|
|
import { useTheme } from 'vuetify';
|
|
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
|
import { useUserStore } from '@KTXC/stores/userStore';
|
|
import { useTenantStore } from '@KTXC/stores/tenantStore';
|
|
|
|
const theme = useTheme();
|
|
const layoutStore = useLayoutStore();
|
|
const userStore = useUserStore();
|
|
const tenantStore = useTenantStore();
|
|
|
|
// Maps user/tenant setting keys → Vuetify color token names
|
|
const COLOR_SETTINGS: Array<{ token: string; key: string }> = [
|
|
{ token: 'primary', key: 'primary_color' },
|
|
{ token: 'secondary', key: 'secondary_color' },
|
|
];
|
|
|
|
/**
|
|
* Apply brand color overrides from stored preferences to all Vuetify theme
|
|
* variants (light & dark). Tenant colors take priority when lock is active.
|
|
*/
|
|
function applyThemeColors(): void {
|
|
const locked = tenantStore.getSetting('lock_user_colors') as boolean | null;
|
|
|
|
for (const { token, key } of COLOR_SETTINGS) {
|
|
const value = locked
|
|
? ((tenantStore.getSetting(key) as string | null) ?? (userStore.getSetting(key) as string | null))
|
|
: ((userStore.getSetting(key) as string | null) ?? (tenantStore.getSetting(key) as string | null));
|
|
|
|
if (value) {
|
|
for (const variant of Object.keys(theme.themes.value)) {
|
|
theme.themes.value[variant].colors[token] = value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Apply font preference via CSS custom property and body style. */
|
|
function applyFont(): void {
|
|
const font =
|
|
((userStore.getSetting('font') as string | null) ??
|
|
(tenantStore.getSetting('font') as string | null));
|
|
|
|
if (font && font !== 'Public Sans') {
|
|
document.documentElement.style.setProperty('--themer-font', font);
|
|
document.body.style.fontFamily = `"${font}", sans-serif`;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Apply saved theme mode
|
|
if (layoutStore.theme) {
|
|
theme.global.name.value = layoutStore.theme;
|
|
}
|
|
|
|
applyThemeColors();
|
|
applyFont();
|
|
});
|
|
|
|
// Re-apply whenever tenant settings change (e.g. admin saves new brand colors)
|
|
watch(() => tenantStore.settings, () => {
|
|
applyThemeColors();
|
|
applyFont();
|
|
}, { deep: true });
|
|
</script>
|