theme bugfixes & startup cleanup

NUXT/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <center v-show="themeFetched" class="container">
+  <center class="container">
     <v-img
       src="/icon.svg"
       width="10rem"
@@ -18,20 +18,12 @@ export default {
   layout: "empty",
 
   data: () => ({
-    progressMsg: "Theming",
+    progressMsg: "Fetching the API",
-    themeFetched: false,
   }),
-
-  beforeCreate() {
-    this.$store.commit("tweaks/initTweaks");
-    // This has to be imported here,otherwise NUXT won't import the package because its so early in the lifecycle -Front
-    // const { SplashScreen } = await require("@capacitor/splash-screen");
-    // await SplashScreen.hide();
-  },
-
   async mounted() {
-    // Set timeout is required for $vuetify.theme... dont ask me why -Front
+    this.$store.commit("tweaks/initTweaks");
     const theming = new Promise((resolve) =>
+      // Set timeout is required for $vuetify.theme... dont ask me why -Front
       setTimeout(() => {
         this.$vuetify.theme.dark = JSON.parse(localStorage.getItem("darkTheme")) === true;
         if (localStorage.getItem("primaryDark") != null)
@@ -42,7 +34,6 @@ export default {
           this.$vuetify.theme.themes.dark.background = localStorage.getItem("backgroundDark");
         if (localStorage.getItem("backgroundLight") != null)
           this.$vuetify.theme.themes.light.background = localStorage.getItem("backgroundLight");
-        this.themeFetched = true;
         this.$vuetube.navigationBar.setTheme(
           this.$vuetify.theme.currentTheme.background,
           !this.$vuetify.theme.dark
@@ -56,7 +47,6 @@ export default {
     );
 
     await theming;
-    this.progressMsg = "Fetching the API";
     await this.$youtube.getAPI();
     this.progressMsg = "Navigating Home";
     this.$router.push(`/${localStorage.getItem("startPage") || "home"}`);
@@ -66,13 +56,11 @@ export default {
 
 <style scoped>
 .container {
-  padding-top: 3em;
   display: block;
-
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -80%);
+  transform: translate(-50%, -50%);
 }
 .intro {
   opacity: 0;

NUXT/pages/library.vue

@@ -1,16 +1,16 @@
 <template>
-  <center>
+  <center class="px-4">
     <v-img
       contain
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1
+    <h2
-      class="background--text"
+      class="background--text mt-4"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
     >
       Page Under Construction
-    </h1>
+    </h2>
     <p
       class="background--text"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

NUXT/pages/mods/theme.vue

@@ -1,19 +1,8 @@
 <template>
+  <client-only>
     <div class="d-flex flex-column justify-end" style="min-height: 100%">
-    <!-- <div
+      <!-- ----------------------------------------------Background Colors------------------------ -->
-      class="py-1 mt-4 background"
+      <v-radio-group v-model="$vuetify.theme.currentTheme.background">
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-    /> -->
-
-    <h4 class="mx-8 mt-6 my-2">Colors</h4>
-
-    <!-- <h4 class="mx-8 mt-6 my-2">Background Colors</h4> -->
-
-    <v-radio-group
-      v-model="$vuetify.theme.currentTheme.background"
-      class="mt-0"
-    >
-      <!-- @change="theme(backgroundColor)" -->
         <div
           class="d-flex flex-row px-6 no-wrap"
           style="max-width: 100%; overflow-x: auto"
@@ -54,29 +43,15 @@
               class="py-4 px-4 ma-2 rounded-lg"
               :value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
             />
-          Adaptive <br />
+            Adaptive
-          <div
-            class="background--text"
-            :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            style="font-size: 0.5rem"
-          >
-            (Experimental)
-          </div>
           </div>
         </div>
       </v-radio-group>
-
+      <!-- ----------------------------------------------Primary Colors------------------------ -->
-    <!-- <h4 class="mx-8 mt-6 my-2">Accent Colors</h4> -->
+      <v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
-
-    <v-radio-group
-      v-model="$vuetify.theme.currentTheme.primary"
-      style="margin-top: -1.5rem"
-      class="mx-2"
-      @change="adapt"
-    >
         <div
-        class="d-flex flex-row px-6 no-wrap py-3 align-center"
+          class="d-flex flex-row px-6 py-2 no-wrap align-center"
-        style="max-width: 100%; overflow-x: auto"
+          style="max-width: 100%; overflow-x: auto; margin-top: -1.5rem"
         >
           <v-radio
             v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
@@ -119,13 +94,11 @@
               dot-size="50"
               mode="hexa"
               flat
-          >
+            />
-            <!-- @input="(value) => primarySwitch(value)" -->
-          </v-color-picker>
           </v-dialog>
         </div>
       </v-radio-group>
-
+      <!-- ----------------------------------------------Mode Switch------------------------ -->
       <v-card
         flat
         class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
@@ -143,21 +116,18 @@
         </div>
         <v-spacer />
         <v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
-      <!-- @input="(value) => primarySwitch(value)" -->
       </v-card>
     </div>
+  </client-only>
 </template>
 
 <script>
 export default {
   data() {
     return {
+      primaryLight: ["#E57373", "#8b5f37", "#016a49", "#34495E"],
       primaryDark: ["#B71C1C", "#FFBBFF", "#AAAFFF", "#AAFFFF", "#7CD6AF", "#FEC89B"],
-      primaryLight: ["#E57373", "#F88469", "#22AA22", "#4A9E90", "#777FFF"],
+      backgroundsDark: [{ name: "Dark", color: "#181818" }, { name: "Black", color: "#000000" }],
-      backgroundsDark: [
-        { name: "Dark", color: "#181818" },
-        { name: "Black", color: "#000000" },
-      ],
       backgroundsLight: [{ name: "Normal", color: "#ffffff" }],
       experimentalLight: "",
       experimentalDark: "",
@@ -165,24 +135,9 @@ export default {
     };
   },
   watch: {
-    "$vuetify.theme.currentTheme.primary": {
+    // also triggers background and primary watcher, unless primary colors match
-      handler: function (value) {
+    "$vuetify.theme.dark"(value) {
-        this.$vuetify.theme.dark
+      localStorage.setItem("darkTheme", value);
-          ? localStorage.setItem("primaryDark", value)
-          : localStorage.setItem("primaryLight", value);
-        let tempD = this.experimentalDark;
-        let tempL = this.experimentalLight;
-        this.$nextTick(() => {
-          this.adapt();
-          if (this.$vuetify.theme.currentTheme.background === tempD)
-            this.$vuetify.theme.currentTheme.background = this.experimentalDark;
-          if (this.$vuetify.theme.currentTheme.background === tempL)
-            this.$vuetify.theme.currentTheme.background =
-              this.experimentalLight;
-        });
-      },
-      immediate: false,
-      // deep: true,
     },
     "$vuetify.theme.currentTheme.background"(value) {
       this.$vuetify.theme.dark
@@ -191,22 +146,38 @@ export default {
       this.$vuetube.statusBar.setTheme(value, this.$vuetify.theme.dark);
       this.$vuetube.navigationBar.setTheme(value, !this.$vuetify.theme.dark);
     },
-    "$vuetify.theme.dark"(value) {
+    "$vuetify.theme.currentTheme.primary"(value) {
-      localStorage.setItem("darkTheme", value);
+      if (value != undefined) {
+        this.$vuetify.theme.dark
+          ? localStorage.setItem("primaryDark", value)
+          : localStorage.setItem("primaryLight", value);
+        let tempD = this.experimentalDark;
+        let tempL = this.experimentalLight;
+        this.adapt();
+        if (this.$vuetify.theme.currentTheme.background === tempD)
+          this.$vuetify.theme.currentTheme.background = this.experimentalDark;
+        if (this.$vuetify.theme.currentTheme.background === tempL)
+          this.$vuetify.theme.currentTheme.background = this.experimentalLight;
+      }
     },
   },
+  beforeMount() {
+    this.adapt();
+  },
   methods: {
     adapt() {
-      let hexR = window
+      let hexD = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-darken4");
-        .getComputedStyle(document.documentElement)
+      let hexL = getComputedStyle(document.documentElement).getPropertyValue("--v-primary-lighten4");
-        .getPropertyValue("--v-primary-darken4");
-      let hexL = window
-        .getComputedStyle(document.documentElement)
-        .getPropertyValue("--v-primary-lighten4");
       // the menace above returns a hex string with A SPACE " " in front of it, that's why substring(1)
       // the SPACE " " is stored as part of the CSS variable itself to be used for chaining
-      this.experimentalDark = hexR.substring(1);
+      this.experimentalDark = hexD.substring(1).toUpperCase();
-      this.experimentalLight = hexL.substring(1);
+      this.experimentalLight = hexL.substring(1).toUpperCase();
+      setTimeout(() => {
+        if (this.$vuetify.theme.currentTheme.background == hexD.substring(1).toUpperCase())
+          this.$vuetify.theme.currentTheme.background = this.experimentalDark;
+        if (this.$vuetify.theme.currentTheme.background == hexL.substring(1).toUpperCase())
+          this.$vuetify.theme.currentTheme.background = this.experimentalLight;
+      }, 0);
     },
     saveTheme() {
       navigator.vibrate([10, 100, 5]);

NUXT/pages/mods/tweaks.vue

@@ -2,13 +2,13 @@
   <div class="d-flex flex-column justify-end" style="min-height: 100%">
     <v-card
       flat
-      class="px-4 ma-4 mt-2 background"
+      class="px-6 ma-4 mt-2 background"
       :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
       :style="{
         borderRadius: `${roundTweak / 2}rem`,
       }"
     >
-      <h3 class="mt-4">Rounded Corners</h3>
+      <h3 class="mt-5">Rounded Corners</h3>
       <div
         class="background--text"
         :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

NUXT/pages/subscriptions.vue

@@ -1,16 +1,16 @@
 <template>
-  <center>
+  <center class="px-4">
     <v-img
       contain
       style="margin-top: 5em; max-width: 80%; max-height: 15em"
       src="/dev.svg"
     />
-    <h1
+    <h2
-      class="background--text"
+      class="background--text mt-4"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
     >
       Page Under Construction
-    </h1>
+    </h2>
     <p
       class="background--text"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"

android/.idea/deploymentTargetDropDown.xml

@@ -12,6 +12,6 @@
         </deviceKey>
       </Target>
     </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2022-03-30T18:40:14.226129Z" />
+    <timeTargetWasSelectedWithDropDown value="2022-03-31T17:44:52.270258Z" />
   </component>
 </project>

android/app/src/main/assets/capacitor.config.json

@@ -10,19 +10,17 @@
 	"android": {
 		"backgroundColor": "#000000"
 	},
+	"ios": {
+		"backgroundColor": "#000000"
+	},
 	"plugins": {
 		"SplashScreen": {
 			"launchShowDuration": 0,
-			"launchAutoHide": true,
 			"backgroundColor": "#000000",
-			"androidSplashResourceName": "splash",
-			"androidScaleType": "CENTER_CROP",
-			"androidSpinnerStyle": "large",
-			"iosSpinnerStyle": "small",
-			"spinnerColor": "#000000",
-			"showSpinner": false,
 			"splashFullScreen": false,
-			"splashImmersive": false
+			"splashImmersive": false,
+			"launchAutoHide": true,
+			"showSpinner": false
 		}
 	}
 }

capacitor.config.json

@@ -12,21 +12,18 @@
   "android": {
     "backgroundColor": "#000000"
   },
+  "ios": {
+    "backgroundColor": "#000000"
+  },
 
   "plugins": {
     "SplashScreen": {
       "launchShowDuration": 0,
-      "launchAutoHide": true,
       "backgroundColor": "#000000",
-      "androidSplashResourceName": "splash",
-      "androidScaleType": "CENTER_CROP",
-      "androidSpinnerStyle": "large",
-      "iosSpinnerStyle": "small",
-      "spinnerColor": "#000000",
-      "showSpinner": false,
       "splashFullScreen": false,
-      "splashImmersive": false
+      "splashImmersive": false,
+      "launchAutoHide": true,
+      "showSpinner": false
     }
   }
-
 }

ios/App/App/capacitor.config.json

@@ -10,19 +10,17 @@
 	"android": {
 		"backgroundColor": "#000000"
 	},
+	"ios": {
+		"backgroundColor": "#000000"
+	},
 	"plugins": {
 		"SplashScreen": {
 			"launchShowDuration": 0,
-			"launchAutoHide": true,
 			"backgroundColor": "#000000",
-			"androidSplashResourceName": "splash",
-			"androidScaleType": "CENTER_CROP",
-			"androidSpinnerStyle": "large",
-			"iosSpinnerStyle": "small",
-			"spinnerColor": "#000000",
-			"showSpinner": false,
 			"splashFullScreen": false,
-			"splashImmersive": false
+			"splashImmersive": false,
+			"launchAutoHide": true,
+			"showSpinner": false
 		}
 	}
 }