fix: 🐛 Fix icon not showing in light mode

NUXT/layouts/default.vue

@@ -69,38 +69,6 @@
   </v-app>
 </template>
 
-<style>
-* {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-.scroll-y {
-  overflow-y: scroll !important; /* has to be scroll, not auto */
-  -webkit-overflow-scrolling: touch !important;
-}
-html,
-body {
-  background: black;
-  overflow: hidden;
-}
-
-p,
-span,
-div {
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* IE10+/Edge */
-  user-select: none; /* Standard */
-}
-</style>
-
-<style scoped>
-.searchButton {
-  width: 100%;
-  justify-content: left !important;
-}
-</style>
-
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";
@@ -111,10 +79,32 @@ export default {
     response: [],
     stateLoaded: false,
   }),
+
+  computed: {
+    ...mapState({
+      roundTweak: (state) => state.tweaks.roundTweak,
+    }),
+    page: function () {
+      const splitPath = this.$route.path.split("/");
+      let pageName = splitPath[splitPath.length - 1];
+      pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
+      return pageName || "Home";
+    },
+  },
+
+  watch: {
+    // Watch for any changes in the route string
+    // When change is detected, scroll main div back to the top
+    $route() {
+      this.$refs.pgscroll.scrollTop = 0; // scroll back to top when moving to new route
+    },
+  },
+
   beforeCreate() {
     // initializes UI tweaks to the saved state
     this.$store.commit("tweaks/initTweaks");
   },
+
   mounted() {
     this.stateLoaded = true;
     //---   Back Button Listener   ---//
@@ -131,17 +121,6 @@ export default {
       }
     });
   },
-  computed: {
-    ...mapState({
-      roundTweak: (state) => state.tweaks.roundTweak,
-    }),
-    page: function () {
-      const splitPath = this.$route.path.split("/");
-      let pageName = splitPath[splitPath.length - 1];
-      pageName = pageName.charAt(0).toUpperCase() + pageName.slice(1);
-      return pageName || "Home";
-    },
-  },
 
   methods: {
     textChanged(text) {
@@ -174,13 +153,41 @@ export default {
       }
     },
   },
-
-  watch: {
-    // Watch for any changes in the route string
-    // When change is detected, scroll main div back to the top
-    $route() {
-      this.$refs.pgscroll.scrollTop = 0; // scroll back to top when moving to new route
-    }
-  }
 };
 </script>
+
+<style>
+* {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+.scroll-y {
+  overflow-y: scroll !important; /* has to be scroll, not auto */
+  -webkit-overflow-scrolling: touch !important;
+}
+html,
+body {
+  background: black;
+  overflow: hidden;
+}
+
+p,
+span,
+div {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.invert {
+  filter: invert(100%);
+}
+</style>
+
+<style scoped>
+.searchButton {
+  width: 100%;
+  justify-content: left !important;
+}
+</style>

NUXT/pages/index.vue

@@ -4,7 +4,7 @@
       src="/icon.svg"
       width="10em"
       style="margin-bottom: 1em"
-      :class="this.$vuetify.theme.dark ? '' : 'invert'"
+      :class="$vuetify.theme.dark ? '' : 'invert'"
     />
     <v-progress-circular size="50" indeterminate color="primary" />
   </center>
@@ -67,7 +67,4 @@ export default {
   left: 50%;
   transform: translate(-50%, -80%);
 }
-.invert {
-  filter: invert(100%);
-}
 </style>

NUXT/pages/mods/about.vue

@@ -2,7 +2,11 @@
   <center style="padding: 1em">
     <div class="row pa-4" style="flex-direction: column">
       <div>
-        <v-img src="/icon.svg" width="100px" />
+        <v-img
+          src="/icon.svg"
+          width="100px"
+          :class="$vuetify.theme.dark ? '' : 'invert'"
+        />
       </div>
       <v-spacer />
       <div>
@@ -28,12 +32,6 @@
   </center>
 </template>
 
-<style scoped>
-.pageTitle {
-  margin-bottom: 1em;
-}
-</style>
-
 <script>
 import { Browser } from "@capacitor/browser";
 import { Device } from "@capacitor/device";
@@ -57,3 +55,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.pageTitle {
+  margin-bottom: 1em;
+}
+</style>