Nodarx/server
1
0
Fork 0
Code Issues 1 Pull Requests 5 Actions Projects Releases Activity

fix: theming

Browse Source 
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
Sebastian Krupinski
2026-07-07 22:49:51 -04:00
parent 5a729d851e
commit 93d32d2a9f
9 changed files with 242 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/src/App.vue
-64
View File
@@ -5,69 +5,5 @@
<script setup lang="ts">
import { RouterView } from 'vue-router';
import { onMounted, watch } from 'vue';
import { useTheme } from 'vuetify';
import SharedSnackbar from '@KTXC/components/shared/SharedSnackbar.vue';
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>