Template de base + toggle theme

src/App.vue

@@ -1,5 +1,35 @@
 <template>
   <v-app>
+    <v-system-bar>
+      <v-icon icon="mdi-wifi-strength-4"></v-icon>
+      <v-icon icon="mdi-signal" class="ms-2"></v-icon>
+      <v-icon icon="mdi-battery" class="ms-2"></v-icon>
+
+      <span class="ms-2">3:14AM</span>
+    </v-system-bar>
+    <v-app-bar :elevation="12">
+      <template v-slot:prepend>
+        <v-app-bar-nav-icon></v-app-bar-nav-icon>
+      </template>
+
+      <v-app-bar-title>Brain Blast</v-app-bar-title>
+
+      <template v-slot:append>
+        <v-btn @click="toggleTheme">Toggle Theme</v-btn>
+        <v-btn icon="mdi-heart"></v-btn>
+
+        <v-btn icon="mdi-magnify"></v-btn>
+
+        <v-btn icon="mdi-dots-vertical"></v-btn>
+      </template>
+    </v-app-bar>
+    <v-navigation-drawer>
+      <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
+      <v-divider></v-divider>
+      <v-list-item link title="List Item 1"></v-list-item>
+      <v-list-item link title="List Item 2"></v-list-item>
+      <v-list-item link title="List Item 3"></v-list-item>
+    </v-navigation-drawer>
     <v-main>
       <HelloWorld msg="PIGNOUF ! " />
       <RouterLink to="/">Home</RouterLink>
@@ -8,9 +38,16 @@
 
       <RouterView />
     </v-main>
+    <v-footer :elevation=12 border><v-row justify="center">ASCO - Fablab</v-row></v-footer>
   </v-app>
 </template>
 
 <script setup>
-  //
+  import { useTheme } from 'vuetify'
+
+  const theme = useTheme()
+
+  function toggleTheme () {
+    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+  }
 </script>

src/plugins/vuetify.js

@@ -13,5 +13,7 @@ import { createVuetify } from 'vuetify'
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
-  //
+  theme: {
+    defaultTheme: 'dark'
+  }
 })