Set Vuetify default theme to light mode

app/app.vue

@@ -1,18 +1,31 @@
 <template>
-<v-app>
-    <NavBar />
+    <v-app>
+        <NavBar />
 
-    <!-- Main content of the application -->
-    <v-main>
-        <NuxtPage />
+        <!-- Main content of the application -->
+        <v-main
+            :class="[
+                $vuetify.theme.current.dark
+                    ? 'bg-grey-darken-1'
+                    : 'bg-green-lighten-5',
+            ]"
+        >
+            <NuxtPage />
+        </v-main>
 
-    </v-main>
-
-    <AppFooter />
-
-</v-app>
+        <AppFooter />
+    </v-app>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from "vue";
+import { useTheme } from "vuetify";
 
+const theme = useTheme();
+
+onMounted(() => {
+    console.log(theme.name);
+});
 </script>
+
+<style></style>

app/components/NavBar.vue

@@ -19,6 +19,11 @@
 
         <!-- Menu icons on the right side of the toolbar -->
         <template v-slot:append>
+            <v-btn
+                class="text-orange"
+                @click="theme.toggle()"
+                text="Light / Dark"
+            ></v-btn>
             <small class="text-white"> Logout </small>
             <v-btn icon="mdi-account" class="text-white" @click="logout">
             </v-btn>
@@ -55,7 +60,9 @@
 <script setup>
 import { ref, capitalize } from "vue";
 import { useSystemStore } from "~/stores/system";
+import { useTheme } from "vuetify";
 
+const theme = useTheme();
 const drawer = ref(false);
 const { data, status, signOut } = useAuth();
 const systemStore = useSystemStore();

app/pages/index.vue

@@ -18,6 +18,7 @@ const { data } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
 import { useListasStore } from "~/stores/listas";
+
 const listasStore = useListasStore();
 const systemStore = useSystemStore();
 

app/pages/profile.vue

@@ -16,7 +16,7 @@
 
             <v-file-input
                 accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
-                label="File input"
+                label="Subir imagen"
                 @input="handleFileInput"
                 type="file"
                 v-model="imagen"

app/plugins/vuetify.js

@@ -2,6 +2,12 @@ import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const vuetify = createVuetify({ components });
+  const vuetify = createVuetify({
+    components,
+    theme: {
+      defaultTheme: "light", // 'light' | 'dark' | 'system'
+    },
+  });
+
   nuxtApp.vueApp.use(vuetify);
 });