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,163 +1,133 @@
 <template>
-  <div class="d-flex flex-column justify-end" style="min-height: 100%">
+  <client-only>
-    <!-- <div
+    <div class="d-flex flex-column justify-end" style="min-height: 100%">
-      class="py-1 mt-4 background"
+      <!-- ----------------------------------------------Background Colors------------------------ -->
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
+      <v-radio-group v-model="$vuetify.theme.currentTheme.background">
-    /> -->
-
-    <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"
-      >
         <div
-          v-for="background in $vuetify.theme.dark
+          class="d-flex flex-row px-6 no-wrap"
-            ? backgroundsDark
+          style="max-width: 100%; overflow-x: auto"
-            : backgroundsLight"
+        >
-          :key="background.color"
+          <div
-          class="text-center"
+            v-for="background in $vuetify.theme.dark
+              ? backgroundsDark
+              : backgroundsLight"
+            :key="background.color"
+            class="text-center"
+          >
+            <v-radio
+              color="primary"
+              active-class="px-6 border-primary"
+              style="transition-duration: 0.3s"
+              :style="{
+                background: background.color,
+                border: '2px solid ' + background.color,
+              }"
+              class="py-4 px-4 ma-2 rounded-lg"
+              :value="background.color"
+            />
+            {{ background.name }}
+          </div>
+          <div class="text-center">
+            <v-radio
+              color="primary"
+              active-class="px-6 border-primary primary"
+              style="transition-duration: 0.3s"
+              :style="{
+                background: $vuetify.theme.dark
+                  ? 'var(--v-primary-darken4) !important'
+                  : 'var(--v-primary-lighten4) !important',
+                border: $vuetify.theme.dark
+                  ? '2px solid var(--v-primary-darken4)'
+                  : '2px solid var(--v-primary-lighten4)',
+              }"
+              class="py-4 px-4 ma-2 rounded-lg"
+              :value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
+            />
+            Adaptive
+          </div>
+        </div>
+      </v-radio-group>
+      <!-- ----------------------------------------------Primary Colors------------------------ -->
+      <v-radio-group v-model="$vuetify.theme.currentTheme.primary" class="mx-2">
+        <div
+          class="d-flex flex-row px-6 py-2 no-wrap align-center"
+          style="max-width: 100%; overflow-x: auto; margin-top: -1.5rem"
         >
           <v-radio
-            color="primary"
+            v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
-            active-class="px-6 border-primary"
+            :key="color"
+            color="background"
+            on-icon="mdi-check"
+            :light="$vuetify.theme.dark"
+            :dark="!$vuetify.theme.dark"
+            active-class="border-primary"
             style="transition-duration: 0.3s"
             :style="{
-              background: background.color,
+              background: color,
-              border: '2px solid ' + background.color,
+              border: '2px solid ' + color,
             }"
-            class="py-4 px-4 ma-2 rounded-lg"
+            class="mr-2 my-auto rounded-xl"
-            :value="background.color"
+            :value="color"
           />
-          {{ background.name }}
+          <v-dialog
+            v-model="dialog"
+            width="300"
+            content-class="background rounded-lg"
+          >
+            <template #activator="{ on, attrs }">
+              <v-btn
+                icon
+                class="background"
+                style="height: 1.75rem; width: 1.75rem"
+                :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-plus</v-icon>
+              </v-btn>
+            </template>
+            <v-color-picker
+              v-model="$vuetify.theme.currentTheme.primary"
+              style="min-width: 100%"
+              class="background"
+              hide-mode-switch
+              dot-size="50"
+              mode="hexa"
+              flat
+            />
+          </v-dialog>
         </div>
-        <div class="text-center">
+      </v-radio-group>
-          <v-radio
+      <!-- ----------------------------------------------Mode Switch------------------------ -->
-            color="primary"
+      <v-card
-            active-class="px-6 border-primary primary"
+        flat
-            style="transition-duration: 0.3s"
+        class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
-            :style="{
+        :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-              background: $vuetify.theme.dark
+      >
-                ? 'var(--v-primary-darken4) !important'
+        <div class="my-auto">
-                : 'var(--v-primary-lighten4) !important',
+          <div>Dark Mode</div>
-              border: $vuetify.theme.dark
-                ? '2px solid var(--v-primary-darken4)'
-                : '2px solid var(--v-primary-lighten4)',
-            }"
-            class="py-4 px-4 ma-2 rounded-lg"
-            :value="$vuetify.theme.dark ? experimentalDark : experimentalLight"
-          />
-          Adaptive <br />
           <div
             class="background--text"
             :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-            style="font-size: 0.5rem"
+            style="font-size: 0.75rem; margin-top: -0.25rem !important"
           >
-            (Experimental)
+            Bravo Six, Going Dark.
           </div>
         </div>
-      </div>
+        <v-spacer />
-    </v-radio-group>
+        <v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
-
+      </v-card>
-    <!-- <h4 class="mx-8 mt-6 my-2">Accent Colors</h4> -->
+    </div>
-
+  </client-only>
-    <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"
-        style="max-width: 100%; overflow-x: auto"
-      >
-        <v-radio
-          v-for="color in $vuetify.theme.dark ? primaryDark : primaryLight"
-          :key="color"
-          color="background"
-          on-icon="mdi-check"
-          :light="$vuetify.theme.dark"
-          :dark="!$vuetify.theme.dark"
-          active-class="border-primary"
-          style="transition-duration: 0.3s"
-          :style="{
-            background: color,
-            border: '2px solid ' + color,
-          }"
-          class="mr-2 my-auto rounded-xl"
-          :value="color"
-        />
-        <v-dialog
-          v-model="dialog"
-          width="300"
-          content-class="background rounded-lg"
-        >
-          <template #activator="{ on, attrs }">
-            <v-btn
-              icon
-              class="background"
-              style="height: 1.75rem; width: 1.75rem"
-              :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
-              v-bind="attrs"
-              v-on="on"
-            >
-              <v-icon>mdi-plus</v-icon>
-            </v-btn>
-          </template>
-          <v-color-picker
-            v-model="$vuetify.theme.currentTheme.primary"
-            style="min-width: 100%"
-            class="background"
-            hide-mode-switch
-            dot-size="50"
-            mode="hexa"
-            flat
-          >
-            <!-- @input="(value) => primarySwitch(value)" -->
-          </v-color-picker>
-        </v-dialog>
-      </div>
-    </v-radio-group>
-
-    <v-card
-      flat
-      class="d-flex flex-row justify-between mx-8 mb-4 px-4 background rounded-lg"
-      :class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
-    >
-      <div class="my-auto">
-        <div>Dark Mode</div>
-        <div
-          class="background--text"
-          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-          style="font-size: 0.75rem; margin-top: -0.25rem !important"
-        >
-          Bravo Six, Going Dark.
-        </div>
-      </div>
-      <v-spacer />
-      <v-switch v-model="$vuetify.theme.dark" persistent-hint inset />
-      <!-- @input="(value) => primarySwitch(value)" -->
-    </v-card>
-  </div>
 </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
 		}
 	}
 }