Update list item color and background styles

app/app.vue

@@ -3,13 +3,7 @@
         <NavBar />
 
         <!-- Main content of the application -->
-        <v-main
-            :class="[
-                $vuetify.theme.current.dark
-                    ? 'bg-grey-darken-1'
-                    : 'bg-green-lighten-5',
-            ]"
-        >
+        <v-main :theme="$vuetify.theme.current.dark ? 'dark' : 'light'">
             <NuxtPage />
         </v-main>
 

app/pages/index.vue

@@ -9,7 +9,7 @@
             min-width="50vw"
         >
             <v-list-item
-                class="text-pink-lighten-1 bg-teal-lighten-4"
+                class="text-black bg-primary"
                 v-for="lista in listasStore.listas"
                 :key="lista.id"
                 :subtitle="lista.descripcion"

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",
+      },
     },
   });