feat: theming

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

core/src/App.vue

@@ -4,17 +4,68 @@
 
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
-import { onMounted } from 'vue';
+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`;
+  }
+}
 
-// Apply saved theme on mount
 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>