Add kit themes.

services/frontend/src/plugins/vuetify.js

@@ -8,12 +8,121 @@
 import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
-// Composables
+
 import { createVuetify } from 'vuetify'
+const kit_DarkTheme = {
+  dark: true,
+  colors: {
+    background: '#181818',
+    surface: '#0a0a0a',
+    'surface-dim': '#0a0a0a',
+    'surface-bright': '#2b2b2b',
+    'surface-container-lowest': '#060606',
+    'surface-container-low': '#151515',
+    'surface-container': '#181818',
+    'surface-container-high': '#1e1e1e',
+    'surface-container-highest': '#262626',
+    'on-surface': '#e7e7e7',
+    outline: '#5f6d69',
+    'outline-variant': '#373f3d',
+    primary: '#49f3d2',
+    'on-primary': '#0c5b51',
+    'primary-container': '#096d61',
+    'on-primary-container': '#80fddf',
+    secondary: '#a3c2e2',
+    'on-secondary': '#3a4d7c',
+    'secondary-container': '#415996',
+    'on-secondary-container': '#c3d7ed',
+    tertiary: '#92a7a0',
+    'on-tertiary': '#2e3836',
+    'tertiary-container': '#35413e',
+    'on-tertiary-container': '#b5c4bf',
+    error: '#ffb4ab',
+    'on-error': '#690005',
+    'error-container': '#93000a',
+    'on-error-container': '#ffdad6',
+    'surface-light': '#2b2b2b',
+  },
+  variables: {
+    'border-color': '#000000',
+    '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',
+    'overlay-background': '#181b1b',
+  }
+}
+const kit_LightTheme = {
+  dark: false,
+  colors: {
+    background: '#ededed',
+    surface: '#f2f2f2',
+    'surface-dim': '#e2e2e2',
+    'surface-bright': '#f2f2f2',
+    'surface-container-lowest': '#f5f5f5',
+    'surface-container-low': '#efefef',
+    'surface-container': '#ededed',
+    'surface-container-high': '#eaeaea',
+    'surface-container-highest': '#e7e7e7',
+    'on-surface': '#151515',
+    outline: '#4d5855',
+    'outline-variant': '#94a09c',
+    primary: '#048474',
+    'on-primary': '#b4ffeb',
+    'primary-container': '#80fddf',
+    'on-primary-container': '#096d61',
+    secondary: '#4868ae',
+    'on-secondary': '#dae6f3',
+    'secondary-container': '#c3d7ed',
+    'on-secondary-container': '#415996',
+    tertiary: '#3d4d49',
+    'on-tertiary': '#d4ddd9',
+    'tertiary-container': '#b5c4bf',
+    'on-tertiary-container': '#35413e',
+    error: '#ba1a1a',
+    'on-error': '#ffffff',
+    'error-container': '#ffdad6',
+    'on-error-container': '#93000a',
+    'surface-light': '#eaeaea',
+  },
+  variables: {
+    'border-color': '#000000',
+    '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',
+    'overlay-background': '#181b1b',
+  }
+}
 
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'light',
+    defaultTheme: 'kit_LightTheme',
+    themes: {
+      kit_LightTheme,
+      kit_DarkTheme,
+    },
   },
 })