Add theme customization and component defaults

app/plugins/vuetify.js

@@ -1,11 +1,78 @@
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const lightTheme = {
+  dark: false,
+  colors: {
+    background: "#F8FAF7",
+    surface: "#FFFFFF",
+    primary: "#88D8B0",
+    "primary-darken-1": "#6BC49A",
+    secondary: "#C8E6C9",
+    "secondary-darken-1": "#A5D6A7",
+    accent: "#D4EDDA",
+    error: "#FF9A8B",
+    info: "#B3E0FF",
+    success: "#A5D6A7",
+    warning: "#FFE0B2",
+    "on-primary": "#2E3A32",
+    "on-surface": "#2E3A32",
+  },
+  variables: {
+    "border-color": "#E0E0E0",
+    "border-opacity": 0.12,
+  },
+};
+
+const darkTheme = {
+  dark: true,
+  colors: {
+    background: "#121F17",
+    surface: "#1E2922",
+    primary: "#4A7856",
+    "primary-darken-1": "#3A6A46",
+    secondary: "#3D5A45",
+    "secondary-darken-1": "#2D4A35",
+    accent: "#5D8C6C",
+    error: "#D32F2F",
+    info: "#2196F3",
+    success: "#4CAF50",
+    warning: "#FFA000",
+    "on-primary": "#E8F5E9",
+    "on-surface": "#E0E0E0",
+  },
+  variables: {
+    "border-color": "#37474F",
+    "border-opacity": 0.24,
+  },
+};
 
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
     components,
+    directives,
     theme: {
-      defaultTheme: "light", // 'light' | 'dark' | 'system'
+      defaultTheme: "light",
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      variations: {
+        colors: ["primary", "secondary"],
+        lighten: 2,
+        darken: 2,
+      },
+    },
+    defaults: {
+      VBtn: {
+        color: "primary",
+        variant: "flat",
+      },
+      VCard: {
+        elevation: 1,
+        rounded: "lg",
+      },
     },
   });