From 441dc0c15cdb3391db283e89ec678970ca9e6b1c Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:36:08 +0200
Subject: [PATCH] feat: actually add theme switching :mind_blown:

---
 .../Settings/AppSettings/Appearance.vue       | 29 ++++++++++++++++++-
 public/themes/ash.json                        |  2 +-
 public/themes/dark.json                       |  2 +-
 public/themes/light.json                      |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 68759d9..0f7b504 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -5,7 +5,11 @@
     <p class="subtitle">THEMES</p>
     <div class="themes">
       <div v-for="theme of themes" class="theme-preview-container">
-        <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
+        <span class="theme-preview"
+          :title="theme.displayName"
+          :style="{background:`linear-gradient(${theme.previewGradient})`}"
+          @click="changeTheme(theme.ID, theme.themeURL)"
+        >
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
           </span>
@@ -25,23 +29,45 @@
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
+let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
 
 interface Theme {
+  ID: string
   displayName: string
   previewGradient: string
   complementaryColor: string
   themeURL: string
 }
 
+function changeTheme(ID: string, URL: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
+    return;
+  }
+
+  localStorage.setItem("selectedTheme", 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}`;
+}
 
 const fetchThemes = async () => {
   for (const theme of defaultThemes) {
     const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
     const themeConfigJson = await themeConfig.json() as Theme
+    themeConfigJson.ID = theme
+
     themes.push(themeConfigJson)
   }
+
+  console.log(themes)
 }
 
 await fetchThemes()
@@ -67,6 +93,7 @@ await fetchThemes()
   display: inline-block;
   text-align: center;
   align-content: center;
+  cursor: pointer;
 }
 
 .theme-title {
diff --git a/public/themes/ash.json b/public/themes/ash.json
index fb9cc93..1bd7670 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
 	"displayName": "Ash",
 	"previewGradient": "45deg, #2f2e2d, #46423b",
 	"complementaryColor": "white",
-	"themeData": "ash.css"
+	"themeURL": "ash.css"
 }
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 3cecba6..0ff69be 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
 	"displayName": "Dark",
 	"previewGradient": "45deg, #1f1e1d, #36322b",
 	"complementaryColor": "white",
-	"themeData": "dark.css"
+	"themeURL": "dark.css"
 }
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index fe0b678..3745abb 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
 	"displayName": "Light",
 	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
 	"complementaryColor": "black",
-	"themeData": "light.css"
+	"themeURL": "light.css"
 }
\ No newline at end of file