Fix Theme Change breaking ads

components/EthicalAd.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="$colorMode.value"
+    class="ethical-ad"
     data-ea-publisher="modrinth-com"
     :data-ea-type="type"
     data-ea-manual="true"
@@ -20,6 +20,9 @@ export default {
     try {
       // eslint-disable-next-line no-undef
       ethicalads.load()
+
+      const element = document.getElementsByClassName('ethical-ad')
+      element[0].className = 'ethical-ad loaded ' + this.$colorMode.preference
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err)

layouts/default.vue

@@ -193,10 +193,7 @@
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-              @click="
+              @click="changeTheme"
-                $colorMode.preference =
-                  $colorMode.value === 'dark' ? 'light' : 'dark'
-              "
             >
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
@@ -208,10 +205,7 @@
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-              @click="
+              @click="changeTheme"
-                $colorMode.preference =
-                  $colorMode.value === 'dark' ? 'light' : 'dark'
-              "
             >
               <circle cx="12" cy="12" r="5"></circle>
               <line x1="12" y1="1" x2="12" y2="3"></line>
@@ -249,6 +243,9 @@ export default {
       showPopup: false,
     }
   },
+  mounted() {
+    this.themeAds()
+  },
   methods: {
     toggleNavMenu() {
       document.body.style.overflow =
@@ -258,6 +255,19 @@ export default {
       this.$auth.setToken('local', false)
       this.$router.go(null)
     },
+    changeTheme() {
+      this.$colorMode.preference =
+        this.$colorMode.value === 'dark' ? 'light' : 'dark'
+
+      this.themeAds()
+    },
+    themeAds() {
+      const elements = document.getElementsByClassName('ethical-ad')
+
+      for (const elem of elements) {
+        elem.className = 'ethical-ad loaded ' + this.$colorMode.preference
+      }
+    },
   },
 }
 </script>