Update layout

layouts/default.vue

@@ -1,13 +1,15 @@
 <template>
-  <v-app dark>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <NavigationDrawer ref="navDrawer" />
-    <v-app-bar app clipped-left>
+    <v-app-bar app dark clipped-left>
       <v-app-bar-nav-icon @click="toggleNavDrawer" />
       <v-toolbar-title v-text="title" />
       <v-spacer />
+      <!-- TODO: Enable theme switching some time maybe
       <v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
         <v-icon>mdi-theme-light-dark</v-icon>
       </v-btn>
+      -->
       <v-btn v-if="loggedIn" icon @click="logout">
         <v-icon>mdi-logout-variant</v-icon>
       </v-btn>
@@ -32,6 +34,9 @@ export default {
     }
   },
   computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    },
     loggedIn () {
       return this.$store.state.user
     }

layouts/empty.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <v-main>
       <Nuxt />
     </v-main>
@@ -11,6 +11,11 @@
 <script>
 export default {
   name: 'EmptyLayout',
-  layout: 'empty'
+  layout: 'empty',
+  computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    }
+  }
 }
 </script>

layouts/error.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app dark>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <h1 v-if="error.statusCode === 404">
       {{ pageNotFound }}
     </h1>
@@ -27,6 +27,7 @@ export default {
       otherError: 'An error occurred',
     }
   },
+  
   head() {
     const title =
       this.error.statusCode === 404 ? this.pageNotFound : this.otherError
@@ -34,6 +35,11 @@ export default {
       title,
     }
   },
+  computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    }
+  }
 }
 </script>
 

layouts/unverified.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <v-main>
       <v-container fill-height>
         <v-card max-width="500px" class="mx-auto">
@@ -35,6 +35,9 @@ export default {
     }
   },
   computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    },
     userEmail () {
       return this.$auth.currentUser.email
     }