feat: make default theme graphite with system mode detection

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

core/src/plugins/vuetify/index.ts

@@ -24,7 +24,9 @@ export default createVuetify({
     adapter: createVueI18nAdapter({ i18n, useI18n }),
   },
   theme: {
-    defaultTheme: 'light',
+    // Follow the browser/OS color scheme by default; matters especially for
+    // the public (unauthenticated) app, where no theme store ever runs.
+    defaultTheme: 'system',
     themes,
   },
 })

core/src/plugins/vuetify/theme.ts

@@ -1,22 +1,22 @@
 import type { ThemeDefinition } from 'vuetify'
 
-export const staticPrimaryColor = '#6366F1'
-export const staticPrimaryDarkenColor = '#4F46E5'
+export const staticPrimaryColor = '#334155'
+export const staticPrimaryDarkenColor = '#1E293B'
 
 export const themes: Record<string, ThemeDefinition> = {
   light: {
     dark: false,
     colors: {
-      // Primary brand colors - Modern indigo
+      // Primary brand colors - Graphite slate
       'primary': staticPrimaryColor,
       'on-primary': '#FFFFFF',
       'primary-darken-1': staticPrimaryDarkenColor,
-      'primary-lighten-1': '#818CF8',
+      'primary-lighten-1': '#64748B',
 
-      // Secondary - Purple accent
-      'secondary': '#8B5CF6',
-      'secondary-darken-1': '#7C3AED',
-      'secondary-lighten-1': '#A78BFA',
+      // Secondary - Lighter slate accent
+      'secondary': '#64748B',
+      'secondary-darken-1': '#475569',
+      'secondary-lighten-1': '#94A3B8',
       'on-secondary': '#FFFFFF',
 
       // Semantic colors
@@ -30,7 +30,7 @@ export const themes: Record<string, ThemeDefinition> = {
       'on-error': '#FFFFFF',
 
       // Surface & backgrounds
-      'background': '#F8FAFC',
+      'background': '#F6F7F9',
       'on-background': '#0F172A',
       'surface': '#FFFFFF',
       'on-surface': '#0F172A',
@@ -76,16 +76,16 @@ export const themes: Record<string, ThemeDefinition> = {
     dark: true,
     colors: {
       // Primary brand colors - Lighter shades for dark mode
-      'primary': '#818CF8',
-      'on-primary': '#FFFFFF',
-      'primary-darken-1': '#6366F1',
-      'primary-lighten-1': '#A5B4FC',
+      'primary': '#94A3B8',
+      'on-primary': '#0F172A',
+      'primary-darken-1': '#64748B',
+      'primary-lighten-1': '#CBD5E1',
 
-      // Secondary - Purple accent
-      'secondary': '#A78BFA',
-      'secondary-darken-1': '#8B5CF6',
-      'secondary-lighten-1': '#C4B5FD',
-      'on-secondary': '#FFFFFF',
+      // Secondary - Lighter slate accent
+      'secondary': '#CBD5E1',
+      'secondary-darken-1': '#94A3B8',
+      'secondary-lighten-1': '#E2E8F0',
+      'on-secondary': '#0F172A',
 
       // Semantic colors - Adjusted for dark mode
       'success': '#34D399',
@@ -97,13 +97,13 @@ export const themes: Record<string, ThemeDefinition> = {
       'error': '#F87171',
       'on-error': '#FFFFFF',
 
-      // Surface & backgrounds - Dark slate palette
-      'background': '#0F172A',
+      // Surface & backgrounds - Dark graphite palette
+      'background': '#0B0F17',
       'on-background': '#F1F5F9',
-      'surface': '#1E293B',
+      'surface': '#151A23',
       'on-surface': '#F1F5F9',
-      'surface-bright': '#334155',
-      'surface-variant': '#1E293B',
+      'surface-bright': '#232A36',
+      'surface-variant': '#151A23',
       'on-surface-variant': '#94A3B8',
 
       // Grey scale
@@ -111,17 +111,17 @@ export const themes: Record<string, ThemeDefinition> = {
       'grey-darken-1': '#CBD5E1',
       'grey-lighten-1': '#64748B',
       'grey-lighten-2': '#475569',
-      'grey-lighten-3': '#334155',
-      'grey-lighten-4': '#1E293B',
-      'grey-lighten-5': '#0F172A',
+      'grey-lighten-3': '#2A3240',
+      'grey-lighten-4': '#151A23',
+      'grey-lighten-5': '#0B0F17',
 
       // Component specific
-      'perfect-scrollbar-thumb': '#475569',
-      'track-bg': '#334155',
+      'perfect-scrollbar-thumb': '#3A4353',
+      'track-bg': '#232A36',
     },
 
     variables: {
-      'border-color': '#334155',
+      'border-color': '#2A3240',
       'border-opacity': 0.12,
       'high-emphasis-opacity': 0.87,
       'medium-emphasis-opacity': 0.60,

core/src/stores/layoutStore.ts

@@ -27,7 +27,7 @@ export const useLayoutStore = defineStore('layout', () => {
     return (
       themeSetting(userStore.getSetting('theme')) ??
       themeSetting(tenantStore.getSetting('theme_default_mode')) ??
-      'light'
+      'system'
     );
   }