add theme switch

frontend/src/layouts/MainLayout.vue

@@ -2,40 +2,22 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
 
-        <q-toolbar-title>
+        <q-toolbar-title> Quasar App </q-toolbar-title>
-          Quasar App
-        </q-toolbar-title>
 
+        <q-btn :color="theme ? 'accent' : 'dark'" @click="theme = !theme">
+          {{ theme ? 'DARK' : 'LIGHT' }}
+        </q-btn>
         <div>Quasar v{{ $q.version }}</div>
       </q-toolbar>
     </q-header>
 
-    <q-drawer
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-    >
       <q-list>
-        <q-item-label
+        <q-item-label header> Essential Links </q-item-label>
-          header
-        >
-          Essential Links
-        </q-item-label>
 
-        <EssentialLink
+        <EssentialLink v-for="link in linksList" :key="link.title" v-bind="link" />
-          v-for="link in linksList"
-          :key="link.title"
-          v-bind="link"
-        />
       </q-list>
     </q-drawer>
 
@@ -46,57 +28,63 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
+import { useQuasar } from 'quasar'
 
 const linksList = [
   {
     title: 'Docs',
     caption: 'quasar.dev',
     icon: 'school',
-    link: 'https://quasar.dev'
+    link: 'https://quasar.dev',
   },
   {
     title: 'Github',
     caption: 'github.com/quasarframework',
     icon: 'code',
-    link: 'https://github.com/quasarframework'
+    link: 'https://github.com/quasarframework',
   },
   {
     title: 'Discord Chat Channel',
     caption: 'chat.quasar.dev',
     icon: 'chat',
-    link: 'https://chat.quasar.dev'
+    link: 'https://chat.quasar.dev',
   },
   {
     title: 'Forum',
     caption: 'forum.quasar.dev',
     icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
+    link: 'https://forum.quasar.dev',
   },
   {
     title: 'Twitter',
     caption: '@quasarframework',
     icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
+    link: 'https://twitter.quasar.dev',
   },
   {
     title: 'Facebook',
     caption: '@QuasarFramework',
     icon: 'public',
-    link: 'https://facebook.quasar.dev'
+    link: 'https://facebook.quasar.dev',
   },
   {
     title: 'Quasar Awesome',
     caption: 'Community Quasar projects',
     icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
+    link: 'https://awesome.quasar.dev',
-  }
+  },
 ]
-
+const $q = useQuasar()
 const leftDrawerOpen = ref(false)
 
-function toggleLeftDrawer () {
+const theme = computed({
+  get: () => $q.dark.isActive,
+  set: (val) => $q.dark.set(val),
+})
+
+function toggleLeftDrawer() {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
 </script>