Merge pull request 'Require refetching the theme whenever a new version releases' (#43) from force-css-regrab into main

Reviewed-on: #43
Reviewed-by: SauceyRed <saucey@saucey.red>

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>

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() {

utils/loadPreferredTheme.ts

@@ -0,0 +1,28 @@
+let themeLinkElement: HTMLLinkElement | null;
+
+export default function loadPreferredTheme() {
+  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+
+  if (themeLinkElement) {
+    themeLinkElement.href = getThemeUrl(currentTheme);
+  } else {
+    // create the theme link if one doesn't already exist
+    useHead({
+      link: [{
+        id: "main-theme",
+        rel: "stylesheet",
+        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}`
+}