From 8a172db3f462182e5d381463833212fd36f9bc3d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:30:11 +0200
Subject: [PATCH 1/3] feat: refactor code to require refetching the theme
 whenever a new version releases

---
 app.vue                                       | 21 ++++++---------
 .../Settings/AppSettings/Appearance.vue       | 16 ++---------
 utils/loadPreferredTheme.ts                   | 27 +++++++++++++++++++
 3 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 utils/loadPreferredTheme.ts

diff --git a/app.vue b/app.vue
index 6f6eae0..d7ea4c4 100644
--- a/app.vue
+++ b/app.vue
@@ -1,14 +1,18 @@
 <template>
-  <div>
-    <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
-  </div>
+	<div>
+		<Banner v-if="banner" />
+		<NuxtPage :keepalive="true" />
+	</div>
 </template>
 
 <script lang="ts" setup>
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
+
 const banner = useState("banner", () => false);
 
 onMounted(() => {
+	loadPreferredTheme()
+
 	document.removeEventListener("contextmenu", contextMenuHandler);
 	document.addEventListener("contextmenu", (e) => {
 		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
@@ -48,15 +52,6 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingsLoad().selectedThemeId ?? "dark"
-const baseURL = useRuntimeConfig().app.baseURL;
-
-useHead({
-  link: [{
-		rel: "stylesheet",
-		href: `${baseURL}themes/${currentTheme}.css`
-	}]
-})
 </script>
 
 <style>
diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index b81929f..579ccdd 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -32,13 +32,13 @@
 <script lang="ts" setup>
 import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
 import type { TimeFormat } from '~/types/settings';
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
 const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
-let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
 
@@ -51,20 +51,8 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
   settingSave("selectedThemeId", id)
-
-  // if the theme didn't originally load for some reason, create it
-  if (!themeLinkElement) {
-    themeLinkElement = document.createElement('link');
-    themeLinkElement.rel = 'stylesheet';
-    document.head.appendChild(themeLinkElement);
-  }
-
-  themeLinkElement.href = `${baseURL}themes/${url}`;
+  loadPreferredTheme()
 }
 
 async function fetchThemes() {
diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
new file mode 100644
index 0000000..2b25714
--- /dev/null
+++ b/utils/loadPreferredTheme.ts
@@ -0,0 +1,27 @@
+let themeLinkElement: HTMLLinkElement | null;
+
+export default function loadPreferredTheme() {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${currentTheme}.css`) {
+    return;
+  }
+
+  if (themeLinkElement) {
+    themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
+  } else {
+    // create the theme link if one doesn't already exist
+    useHead({
+      link: [{
+        id: "main-theme",
+        rel: "stylesheet",
+        // this should preferrably use version hash, but that's not implemented yet
+        href: `${baseURL}themes/${currentTheme}.css?v=${runtimeConfig.public.buildTimeString}`
+      }]
+    })
+
+    themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
+  }
+}
\ No newline at end of file

From 73606b6bc3f8fdbbf8a96e10f978388e4a54da2d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:35:56 +0200
Subject: [PATCH 2/3] fix: remove bad "caching" behaviour

---
 utils/loadPreferredTheme.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
index 2b25714..145f410 100644
--- a/utils/loadPreferredTheme.ts
+++ b/utils/loadPreferredTheme.ts
@@ -5,10 +5,6 @@ export default function loadPreferredTheme() {
   const baseURL = runtimeConfig.app.baseURL;
   const currentTheme = settingsLoad().selectedThemeId ?? "dark"
 
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${currentTheme}.css`) {
-    return;
-  }
-
   if (themeLinkElement) {
     themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
   } else {

From 2ce09e7c7a3019d5526dccf61144cc0606832e33 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Wed, 16 Jul 2025 05:37:44 +0200
Subject: [PATCH 3/3] fix: ensure both href theme updates result in the same
 url

---
 utils/loadPreferredTheme.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/utils/loadPreferredTheme.ts b/utils/loadPreferredTheme.ts
index 145f410..6eb8099 100644
--- a/utils/loadPreferredTheme.ts
+++ b/utils/loadPreferredTheme.ts
@@ -1,23 +1,28 @@
 let themeLinkElement: HTMLLinkElement | null;
 
 export default function loadPreferredTheme() {
-  const runtimeConfig = useRuntimeConfig()
-  const baseURL = runtimeConfig.app.baseURL;
   const currentTheme = settingsLoad().selectedThemeId ?? "dark"
 
   if (themeLinkElement) {
-    themeLinkElement.href = `${baseURL}themes/${currentTheme}.css`;
+    themeLinkElement.href = getThemeUrl(currentTheme);
   } else {
     // create the theme link if one doesn't already exist
     useHead({
       link: [{
         id: "main-theme",
         rel: "stylesheet",
-        // this should preferrably use version hash, but that's not implemented yet
-        href: `${baseURL}themes/${currentTheme}.css?v=${runtimeConfig.public.buildTimeString}`
+        href: getThemeUrl(currentTheme)
       }]
     })
 
     themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
   }
+}
+
+function getThemeUrl(id: string): string {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+
+  // this should preferrably use version hash, but that's not implemented yet
+  return `${baseURL}themes/${id}.css?v=${runtimeConfig.public.buildTimeString}`
 }
\ No newline at end of file