Files
server/core/src/plugins/vuetify/theme.ts
2025-12-21 10:09:54 -05:00

145 lines
3.9 KiB
TypeScript

import type { ThemeDefinition } from 'vuetify'
export const staticPrimaryColor = '#6366F1'
export const staticPrimaryDarkenColor = '#4F46E5'
export const themes: Record<string, ThemeDefinition> = {
light: {
dark: false,
colors: {
// Primary brand colors - Modern indigo
'primary': staticPrimaryColor,
'on-primary': '#FFFFFF',
'primary-darken-1': staticPrimaryDarkenColor,
'primary-lighten-1': '#818CF8',
// Secondary - Purple accent
'secondary': '#8B5CF6',
'secondary-darken-1': '#7C3AED',
'secondary-lighten-1': '#A78BFA',
'on-secondary': '#FFFFFF',
// Semantic colors
'success': '#10B981',
'on-success': '#FFFFFF',
'info': '#3B82F6',
'on-info': '#FFFFFF',
'warning': '#F59E0B',
'on-warning': '#FFFFFF',
'error': '#EF4444',
'on-error': '#FFFFFF',
// Surface & backgrounds
'background': '#F8FAFC',
'on-background': '#0F172A',
'surface': '#FFFFFF',
'on-surface': '#0F172A',
'surface-bright': '#FFFFFF',
'surface-variant': '#F1F5F9',
'on-surface-variant': '#64748B',
// Grey scale
'grey': '#64748B',
'grey-darken-1': '#475569',
'grey-lighten-1': '#94A3B8',
'grey-lighten-2': '#CBD5E1',
'grey-lighten-3': '#E2E8F0',
'grey-lighten-4': '#F1F5F9',
'grey-lighten-5': '#F8FAFC',
// Component specific
'perfect-scrollbar-thumb': '#CBD5E1',
'track-bg': '#F1F5F9',
},
variables: {
'border-color': '#E2E8F0',
'border-opacity': 0.12,
'high-emphasis-opacity': 0.87,
'medium-emphasis-opacity': 0.60,
'disabled-opacity': 0.38,
'idle-opacity': 0.04,
'hover-opacity': 0.04,
'focus-opacity': 0.12,
'selected-opacity': 0.08,
'activated-opacity': 0.12,
'pressed-opacity': 0.12,
'dragged-opacity': 0.08,
'theme-kbd': '#212529',
'theme-on-kbd': '#FFFFFF',
'theme-code': '#F5F5F5',
'theme-on-code': '#000000',
},
},
dark: {
dark: true,
colors: {
// Primary brand colors - Lighter shades for dark mode
'primary': '#818CF8',
'on-primary': '#FFFFFF',
'primary-darken-1': '#6366F1',
'primary-lighten-1': '#A5B4FC',
// Secondary - Purple accent
'secondary': '#A78BFA',
'secondary-darken-1': '#8B5CF6',
'secondary-lighten-1': '#C4B5FD',
'on-secondary': '#FFFFFF',
// Semantic colors - Adjusted for dark mode
'success': '#34D399',
'on-success': '#FFFFFF',
'info': '#60A5FA',
'on-info': '#FFFFFF',
'warning': '#FBBF24',
'on-warning': '#FFFFFF',
'error': '#F87171',
'on-error': '#FFFFFF',
// Surface & backgrounds - Dark slate palette
'background': '#0F172A',
'on-background': '#F1F5F9',
'surface': '#1E293B',
'on-surface': '#F1F5F9',
'surface-bright': '#334155',
'surface-variant': '#1E293B',
'on-surface-variant': '#94A3B8',
// Grey scale
'grey': '#94A3B8',
'grey-darken-1': '#CBD5E1',
'grey-lighten-1': '#64748B',
'grey-lighten-2': '#475569',
'grey-lighten-3': '#334155',
'grey-lighten-4': '#1E293B',
'grey-lighten-5': '#0F172A',
// Component specific
'perfect-scrollbar-thumb': '#475569',
'track-bg': '#334155',
},
variables: {
'border-color': '#334155',
'border-opacity': 0.12,
'high-emphasis-opacity': 0.87,
'medium-emphasis-opacity': 0.60,
'disabled-opacity': 0.38,
'idle-opacity': 0.10,
'hover-opacity': 0.08,
'focus-opacity': 0.12,
'selected-opacity': 0.12,
'activated-opacity': 0.16,
'pressed-opacity': 0.14,
'dragged-opacity': 0.10,
'theme-kbd': '#212529',
'theme-on-kbd': '#FFFFFF',
'theme-code': '#343434',
'theme-on-code': '#CCCCCC',
},
},
}
export default themes