amoled theme

NUXT/layouts/default.vue

@@ -1,33 +1,27 @@
 <template>
-  <v-app>
-
-    <v-card class="topNav rounded-0" style="display: flex;" color="accent">
+  <v-app class="background">
+    <v-card class="topNav rounded-0" style="display: flex;" color="accent white--text">
       <h2 v-text="page" />
       <v-spacer />
-      <v-btn text class="toolbarAction"><v-icon>mdi-magnify</v-icon></v-btn>
+      <v-btn text class="toolbarAction" color="white"><v-icon>mdi-magnify</v-icon></v-btn>
       
-
-      
-      <v-menu offset-y>
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn text class="toolbarAction" v-bind="attrs" v-on="on"><v-icon>mdi-dots-vertical</v-icon></v-btn>
-      </template>
-      <v-list>
-        <v-list-item v-for="(item, index) in dropdownMenu" :key="index">
-          <nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-
-
+      <v-menu offset-y content-class="mt-4">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn text class="toolbarAction" v-bind="attrs" v-on="on" color="white" style="padding-right: 0 !important;"><v-icon>mdi-dots-vertical</v-icon></v-btn>
+        </template>
+        <v-list>
+          <v-list-item v-for="(item, index) in dropdownMenu" :key="index">
+            <nuxt-link :to="item.link" style="text-decoration: none;" class="info--text">{{ item.title }}</nuxt-link>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-card>
 
-
-    <div>
+    <div class="background" style="min-height: 100%">
       <nuxt />
     </div>
 
-    <v-bottom-navigation v-model="tabSelection" class="bottomNav rounded-0">
+    <v-bottom-navigation v-model="tabSelection" shift class="bottomNav background rounded-0">
       <v-btn v-for="(item, i) in tabs" :key="i" class="navButton" :to="item.link">
 
         <span v-text="item.name" />

NUXT/nuxt.config.js

@@ -44,11 +44,13 @@ export default {
       dark: false,
       themes: {
         light: {
+          background: colors.white,
           primary: colors.red.lighten1,
           accent: "#E62117",
           info: "#000"
         },
         dark: {
+          background: colors.grey.darken9,
           primary: colors.red.darken2, //colors.blue.darken2
           accent: colors.grey.darken3,
           secondary: colors.amber.darken3,

NUXT/pages/settings.vue

@@ -2,16 +2,27 @@
   <div class="mainContainer">
 
 
-    <v-card>
+    <v-card class="pb-5"> 
       <v-card-title>Theme</v-card-title>
-      <section>
-        <v-switch
-          v-model="$vuetify.theme.dark"
-          label="Dark Theme"
-          hint="Bravo Six, Going Dark."
-          persistent-hint
-        />
-      </section>
+      <v-row class="ml-3 mr-6">
+        <section class="row">
+          <v-switch
+            v-model="$vuetify.theme.dark"
+            label="Dark Theme"
+            hint="Bravo Six, Going Dark."
+            persistent-hint
+            inset
+          />
+        </section>
+        <v-btn v-if="$vuetify.theme.dark" text tile class="white--text black" @click="amoled" >
+          {{ 
+            this.$vuetify.theme.themes.dark.background === '#000000'
+            ? 'LCD' 
+            : 'OLED'
+          }}
+          <v-icon :size="this.$vuetify.theme.themes.dark.background === '#000000' ? '.5rem' : '.9rem'" class="ml-2">mdi-brightness-2</v-icon>
+        </v-btn>
+      </v-row>
     </v-card>
 
     <v-card>
@@ -26,6 +37,26 @@
   </div>
 </template>
 
+<script>
+export default {
+  methods: {
+    amoled () {
+      this.$vuetify.theme.themes.dark.background === '#000000' ? (
+        this.$vuetify.theme.themes.dark.accent = '#444444',
+        this.$vuetify.theme.themes.dark.background = '#111111'
+       ) : (
+        this.$vuetify.theme.themes.dark.accent = '#000000',
+        this.$vuetify.theme.themes.dark.background = '#000000'
+      )
+      // doesn't work 😭
+      // console.log(document.getElementsByClassName('v-application--wrap')[0])
+      // console.log(document.getElementsByClassName('v-application--wrap')[0].style)
+      // document.getElementsByClassName('v-application--wrap')[0].style.backgroundColor = "#000000 !important"
+    }
+  }
+}
+</script>
+
 <style scoped>
 .v-card {
   margin: 1em;