chat colors, IBM Plex Sans

web/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Aura from '@primevue/themes/aura'
+import { definePreset } from '@primevue/themes'
 import ToastService from 'primevue/toastservice'
 import 'primeicons/primeicons.css'
 import './assets/theme.css'
@@ -9,15 +10,83 @@ import './assets/theme.css'
 import App from './App.vue'
 import router from './router'
 
+// Custom TradingView-matched dark theme
+const TradingViewPreset = definePreset(Aura, {
+  primitive: {
+    // TV green palette built around #089981
+    tvgreen: {
+      50:  '#e6f7f5',
+      100: '#b3e8e2',
+      200: '#80d9cf',
+      300: '#4dcabc',
+      400: '#26bfaf',
+      500: '#089981',
+      600: '#077d69',
+      700: '#056153',
+      800: '#03453d',
+      900: '#022926',
+      950: '#011614'
+    }
+  },
+  semantic: {
+    primary: {
+      50:  '{tvgreen.50}',
+      100: '{tvgreen.100}',
+      200: '{tvgreen.200}',
+      300: '{tvgreen.300}',
+      400: '{tvgreen.400}',
+      500: '{tvgreen.500}',
+      600: '{tvgreen.600}',
+      700: '{tvgreen.700}',
+      800: '{tvgreen.800}',
+      900: '{tvgreen.900}',
+      950: '{tvgreen.950}'
+    },
+    colorScheme: {
+      dark: {
+        // Remap surface scale to TV neutrals.
+        // Aura uses surface.950 for deepest bg, surface.700 for borders,
+        // surface.900 for content bg, surface.0 for text.
+        surface: {
+          0:   '#ffffff',
+          50:  '#dbdbdb',
+          100: '#b8b8b8',
+          200: '#8a8a8a',
+          300: '#6d6d6d',
+          400: '#4d4d4d',
+          500: '#3d3d3d',
+          600: '#3d3d3d',
+          700: '#2e2e2e',  // → content.border.color, splitter gutter
+          800: '#1c1c1c',  // → hover backgrounds, splitter handle
+          900: '#141414',  // → content.background, overlays
+          950: '#0f0f0f'   // → form field backgrounds, deepest bg
+        },
+        primary: {
+          color:         '#089981',
+          contrastColor: '#0f0f0f',
+          hoverColor:    '#0aad95',
+          activeColor:   '#0cc4a8'
+        },
+        text: {
+          color:          '#dbdbdb',
+          hoverColor:     '#dbdbdb',
+          mutedColor:     '#8a8a8a',
+          hoverMutedColor:'#b8b8b8'
+        }
+      }
+    }
+  }
+})
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 app.use(PrimeVue, {
   theme: {
-    preset: Aura,
+    preset: TradingViewPreset,
     options: {
-      darkModeSelector: '.dark',   // you control when dark applies
+      darkModeSelector: '.dark',
       cssLayer: false
     }
   }