Update themes

frontend/components/Navbar.vue

@@ -1,7 +1,6 @@
 <template>
-    <v-app-bar fixed app color="primary" dark>
+    <v-app-bar fixed app color="primary">
         <v-btn to="/" text rounded>Simple Notes</v-btn>
-        <v-btn to="/" text rounded>{{ $colorMode.value }}</v-btn>
         <v-spacer />
         <client-only>
             <v-btn aria-label="theme switcher" icon @click="toggleTheme">
@@ -10,7 +9,7 @@
                 </v-icon>
             </v-btn>
         </client-only>
-        <v-menu bottom left>
+        <v-menu transition="scroll-y-transition" offset-y bottom left>
             <template v-slot:activator="{ on }">
                 <v-btn aria-label="menu" icon v-on="on">
                     <v-icon>{{ mdiDotsVertical }}</v-icon>
@@ -54,10 +53,12 @@ export default {
         },
         toggleTheme() {
             this.$vuetify.theme.dark = !this.$vuetify.theme.dark
-            localStorage.setItem(
-                'theme',
-                this.$vuetify.theme.dark ? 'dark' : 'light'
-            )
+            const theme = this.$vuetify.theme.dark ? 'dark' : 'light'
+            localStorage.setItem('theme', theme)
+            this.$cookies.set('theme', theme, {
+                path: '/',
+                maxAge: 60 * 60 * 24 * 7,
+            })
         },
     },
 }