app.vue

@@ -1,18 +1,14 @@
 <template>
-	<div>
+  <div>
-		<Banner v-if="banner" />
+    <Banner v-if="banner" />
-		<NuxtPage :keepalive="true" />
+    <NuxtPage :keepalive="true" />
-	</div>
+  </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;
@@ -52,6 +48,15 @@ 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,8 +51,20 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
+    return;
+  }
+
   settingSave("selectedThemeId", id)
-  loadPreferredTheme()
+
+  // 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}`;
 }
 
 async function fetchThemes() {

utils/loadPreferredTheme.ts

@@ -1,28 +0,0 @@
-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}`
-}