Add theme-based background color to main content

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>