theme picker beta1

NUXT/layouts/default.vue

@@ -106,7 +106,7 @@ export default {
   mounted() {
 
     //---   Load Saved Theme   ---//
-    setTimeout(() => {
+    setTimeout(() => { //Set timeout is required to make it load properly... dont ask me why -Front
       const darkTheme = localStorage.getItem('darkTheme');
       if (darkTheme == "true") {
         this.$vuetify.theme.dark = darkTheme;
@@ -114,7 +114,7 @@ export default {
         this.$vuetify.theme.themes.dark.accent2 = '#222',
         this.$vuetify.theme.themes.dark.background = '#333'
       }
-    }, 200);
+    }, 0);
 
     //---   Back Button Listener   ---//
     CapacitorApp.addListener('backButton', ({canGoBack}) => {

NUXT/nuxt.config.js

@@ -16,7 +16,8 @@ export default {
   target: 'static',
   plugins: [
     { src: "~/plugins/youtube", mode: "client" },
-    { src: "~/plugins/vuetube", mode: "client" }
+    { src: "~/plugins/vuetube", mode: "client" },
+    { src: "~/plugins/libs", mode: "client" }
   ],
   generate: {
     dir: '../dist'
@@ -66,7 +67,7 @@ export default {
         },
         dark: {
           primary: colors.red.darken2, //colors.blue.darken2
-          primaryAlt: "533",
+          primaryAlt: "#533",
           accent: "#333",
           accent2: "#333",
           background: "#222",

NUXT/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <center>
-    <v-img width="80%" style="margin-top: 5em;" src="/dev.svg" />
+    <img style="margin-top: 5em; max-width: 80%; max-height: 15em;" src="/dev.svg" />
     <h1 class="grey--text">Page Under Construction</h1>
     <p class="grey--text">Please read the VueTube FAQ for more information.</p>
   </center>

NUXT/pages/library.vue

@@ -1,6 +1,6 @@
 <template>
   <center>
-    <v-img width="80%" style="margin-top: 5em;" src="/dev.svg" />
+    <img style="margin-top: 5em; max-width: 80%; max-height: 15em;" src="/dev.svg" />
     <h1 class="grey--text">Page Under Construction</h1>
     <p class="grey--text">Please read the VueTube FAQ for more information.</p>
   </center>

NUXT/pages/mods/theme.vue

@@ -25,12 +25,33 @@
       </v-row>
     </v-card>
 
+    <v-card class="pb-5">
+      <v-card-title>Accent Color</v-card-title>
+      <v-card-text>
+
+        <v-alert color="primary" dense outlined type="warning">NOTE: This doesn't save after closing the app (yet)</v-alert>
+        <v-color-picker dot-size="5" hide-mode-switch mode="hexa" v-model="accentColor" />
+        
+      </v-card-text>
+    </v-card>
+
 
   </div>
 </template>
 
 <script>
 export default {
+
+  data() {
+    return {
+      accentColor: '#ffffff',
+    }
+  },
+
+  mounted() {
+    //this.accentColor = this.$vuetify.theme.themes.dark.primary;
+  },
+
   methods: {
     amoled() {
       this.$vuetify.theme.themes.dark.background === '#000' ? (
@@ -50,8 +71,30 @@ export default {
 
     saveTheme(isDark) {
       localStorage.setItem("darkTheme", isDark);
+    },
+
+  },
+
+  watch: {
+    accentColor: function (val, oldVal) {
+      this.$vuetify.theme.currentTheme.primary = val;
+
+
+      let primaryAlt = this.$libs.hexToRgb(val);
+
+      for (const i in primaryAlt) {
+        primaryAlt[i] = primaryAlt[i] + 100; //Amount To Lighten By
+        if (primaryAlt[i] > 255) primaryAlt[i] = 255;
+      }
+
+      primaryAlt = this.$libs.rgbToHex(primaryAlt.r, primaryAlt.g, primaryAlt.b);
+      
+
+
+      this.$vuetify.theme.currentTheme.primaryAlt = primaryAlt;
     }
   }
+
 }
 </script>
 

NUXT/pages/search.vue

@@ -14,7 +14,7 @@
         <v-card-text>
           <div style="position: relative;">
             <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
-            <p v-text="video.runtime" class="videoRuntimeFloat background--text" />
+            <p v-text="video.runtime" class="videoRuntimeFloat" style="color: #fff;" />
           </div>
           <div v-text="video.title" style="margin-top: 0.5em;" />
           <div v-text="`${video.views} • ${video.uploaded}`" />

NUXT/pages/subscriptions.vue

@@ -1,6 +1,6 @@
 <template>
   <center>
-    <v-img width="80%" style="margin-top: 5em;" src="/dev.svg" />
+    <img style="margin-top: 5em; max-width: 80%; max-height: 15em;" src="/dev.svg" />
     <h1 class="grey--text">Page Under Construction</h1>
     <p class="grey--text">Please read the VueTube FAQ for more information.</p>
   </center>

NUXT/plugins/libs.js

@@ -0,0 +1,22 @@
+const module = {
+
+    hexToRgb: function (hex, callback) {
+        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16)
+        } : null;
+    },
+
+    rgbToHex: function(r, g, b) {
+        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+      
+
+}
+
+//---   Start   ---//
+export default ({ app }, inject) => {
+  inject('libs', module)
+}