fix theme login

layouts/empty.vue

 <template>
-  <v-app>
     <Nuxt />
-  </v-app>
 </template>
 
 <script>
-export default {}
+export default {
+  computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    }
+  }
+}
 </script>

pages/login.vue

 <template>
-  <div class="body">
-    <form class="login-form">
-      <NuxtLogo />
-      <v-text-field
-        v-model="email"
-        :error-messages="emailErrors"
-        label="E-mail"
-        required
-        @input="$v.email.$touch()"
-        @blur="$v.email.$touch()"
-      />
-      <v-text-field
-        v-model="password"
-        :error-messages="passwordErrors"
-        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-        :type="showPassword ? 'text' : 'password'"
-        label="Password"
-        hint="At least 6 characters"
-        required
-        @input="$v.password.$touch()"
-        @blur="$v.password.$touch()"
-        @click:append="showPassword = !showPassword"
-      />
-      <v-checkbox
-        v-model="checkbox"
-        :error-messages="checkboxErrors"
-        label="Remember me"
-        required
-        @change="$v.checkbox.$touch()"
-        @blur="$v.checkbox.$touch()"
-      />
-      <v-btn class="mr-4" @click="login">
-        Login
-      </v-btn>
-      <v-btn @click="clear">
-        clear
-      </v-btn>
-      <p class="pt-3">
-        Don't have an account?
-        <router-link to="/register">
-          Sign up
-        </router-link>
-      </p>
-    </form>
-  </div>
+  <v-app :style="{background: $vuetify.theme.themes.light.background}">
+    <div class="body">
+      <form class="login-form">
+        <NuxtLogo />
+        <v-text-field
+          v-model="email"
+          :error-messages="emailErrors"
+          label="E-mail"
+          required
+          @input="$v.email.$touch()"
+          @blur="$v.email.$touch()"
+        />
+        <v-text-field
+          v-model="password"
+          :error-messages="passwordErrors"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :type="showPassword ? 'text' : 'password'"
+          label="Password"
+          hint="At least 6 characters"
+          required
+          @input="$v.password.$touch()"
+          @blur="$v.password.$touch()"
+          @click:append="showPassword = !showPassword"
+        />
+        <v-checkbox
+          v-model="checkbox"
+          color="green"
+          label="Remember me"
+          required
+          @change="$v.checkbox.$touch()"
+          @blur="$v.checkbox.$touch()"
+        />
+        <v-btn class="mr-4" @click="login">
+          Login
+        </v-btn>
+        <v-btn @click="clear">
+          clear
+        </v-btn>
+        <p class="pt-3">
+          Don't have an account?
+          <router-link to="/register">
+            Sign up
+          </router-link>
+        </p>
+      </form>
+    </div>
+  </v-app>
 </template>
 <script>
 export default {
@@ -56,6 +58,7 @@ import { validationMixin } from 'vuelidate'
 import { required, minLength, email } from 'vuelidate/lib/validators'
 
 export default {
+  dark: false,
   mixins: [validationMixin],
   layout: 'empty',
   validations: {
@@ -143,21 +146,22 @@ export default {
   }
 }
 </script>
-<style>
+<style scoped>
 .body {
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: center;
-  background-color: #2c2c2c;
+  background-color: #8fc2ff;
   height: 100vh;
 }
 .login-form{
   width: 27%;
   border: #8fc2ff 1px solid;
-  background-color: #121212;
+  background-color: #111f70;
   border-radius: 1rem;
   padding: 2rem 1rem;
   border-radius: 1rem;
 }
+
 </style>

pages/register.vue

@@ -64,6 +64,7 @@ import { validationMixin } from 'vuelidate'
 import { required, minLength, maxLength, email, sameAs } from 'vuelidate/lib/validators'
 
 export default {
+  dark: false,
   mixins: [validationMixin],
   layout: 'empty',
   validations: {
@@ -164,13 +165,13 @@ export default {
   justify-content: center;
   text-align: center;
   align-items: center;
-  background-color: #2c2c2c;
+  background-color: #8fc2ff;
   height: 100vh;
 }
 .login-form{
   width: 27%;
   border: #8fc2ff 1px solid;
-  background-color: #121212;
+  background-color: #111f70;
   border-radius: 1rem;
   padding: 2rem 1rem;
   border-radius: 1rem;