From 94fee828936944ff9edd543c965ebf758a723990 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 15:51:09 +0200
Subject: [PATCH 1/9] refactor: minor refactor

---
 components/Settings/AppSettings/Appearance.vue | 2 --
 components/Settings/UserSettings/Account.vue   | 7 -------
 components/Settings/UserSettings/Profile.vue   | 7 -------
 pages/settings.vue                             | 7 +++++--
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 135c0a1..51b06ee 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
     <h1>hi</h1>
-    <h5>TEST</h5>
-    <h5>TEST</h5>
   </div>
 </template>
 
diff --git a/components/Settings/UserSettings/Account.vue b/components/Settings/UserSettings/Account.vue
index 85589e7..866471e 100644
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@@ -70,13 +70,6 @@ async function deleteAccount() {
 </script>
 
 <style scoped>
-.subtitle {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 4dvh 0 0.5dvh 0.25dvw;
-}
-
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/components/Settings/UserSettings/Profile.vue b/components/Settings/UserSettings/Profile.vue
index ed7da0a..db6188e 100644
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@@ -108,13 +108,6 @@ async function changeAvatar() {
   display: flex;
 }
 
-.subtitle {
-  display: block;
-  font-size: 0.8em;
-  font-weight: 800;
-  margin: 1.5dvh 0 0.5dvh 0.25dvw;
-}
-
 .user-data-fields {
   min-width: 35dvw;
   max-width: 35dvw;
diff --git a/pages/settings.vue b/pages/settings.vue
index bd1a484..0f297e3 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -180,7 +180,10 @@ function selectCategory(page: Page) {
 }
 
 /* applies to child pages too */
-:deep(h5) {
-  color: red;
+:deep(.subtitle) {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
 }
 </style>
\ No newline at end of file

From 768b011961d52159500be5c7b2f7328d9a2d11ef Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:02:22 +0200
Subject: [PATCH 2/9] feat: add theme previews

---
 .../Settings/AppSettings/Appearance.vue       | 58 ++++++++++++++++++-
 nuxt.config.ts                                |  3 +
 public/themes/ash.css                         | 19 ++++++
 public/themes/ash.json                        |  6 ++
 public/themes/dark.json                       |  6 ++
 public/themes/default-themes.json             |  4 --
 public/themes/light.json                      |  6 ++
 7 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 public/themes/ash.css
 create mode 100644 public/themes/ash.json
 create mode 100644 public/themes/dark.json
 delete mode 100644 public/themes/default-themes.json
 create mode 100644 public/themes/light.json

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 51b06ee..59e417c 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -1,12 +1,66 @@
 <template>
   <div>
-    <h1>hi</h1>
+    <h1>Appearance</h1>
+    
+    <p class="subtitle">THEMES</p>
+    <div class="themes">
+      <p v-for="theme of themes">
+        <span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
+          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
+            {{ theme.displayName }}
+          </span>
+        </span>
+      </p>
+    </div>
+
+    <p class="subtitle">ICONS</p>
+    <div class="themes">
+    </div>
+
+
   </div>
 </template>
 
 <script lang="ts" setup>
+const runtimeConfig = useRuntimeConfig()
+const defaultThemes = runtimeConfig.public.defaultThemes
+const baseURL = runtimeConfig.app.baseURL;
+
+const themes: Array<Theme> = []
+
+interface Theme {
+  displayName: string
+  previewGradient: string
+  complementaryColor: string
+  themeURL: string
+}
+
+
+const fetchThemes = async () => {
+  for (const theme of defaultThemes) {
+    const themeConfig = await fetch(`${baseURL}themes/${theme}.json`)
+    const themeConfigJson = await themeConfig.json() as Theme
+    themes.push(themeConfigJson)
+  }
+}
+
+await fetchThemes()
 </script>
 
 <style scoped>
+.theme-preview {
+  min-width: 6em;
+  min-height: 6em;
+  border-radius: 100%;
+  border: .1em solid var(--primary-color);
 
-</style>
\ No newline at end of file
+  display: inline-block;
+  text-align: center;
+  align-content: center;
+}
+
+.theme-title {
+  font-size: .8em;
+  line-height: 6em; /* same height as the parent to centre it vertically */
+}
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 05a40fa..489e1b8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -30,6 +30,9 @@ export default defineNuxtConfig({
       messageGroupingMaxDifference: 300000,
       buildTimeString: new Date().toISOString(),
       gitHash: process.env.GIT_SHORT_REV || "N/A",
+      defaultThemes: [
+        "light", "ash", "dark"
+      ]
     }
   },
   /* nitro: {
diff --git a/public/themes/ash.css b/public/themes/ash.css
new file mode 100644
index 0000000..b685551
--- /dev/null
+++ b/public/themes/ash.css
@@ -0,0 +1,19 @@
+:root {
+	--text-color: #f0e5e0;
+	--secondary-text-color: #e8e0db;
+
+	--chat-background-color: #2f2e2d;
+    --chat-highlighted-background-color: #3f3b38;
+	--sidebar-background-color: #3e3a37;
+	--sidebar-highlighted-background-color: #46423b;
+	--topbar-background-color: #3a3733;
+
+    --padding-color: #e0e0e0;
+    
+	--primary-color: #f07028;
+	--primary-highlighted-color: #f28f4b;
+	--secondary-color: #683820;
+	--secondary-highlighted-color: #885830;
+	--accent-color: #a04b24;
+	--accent-highlighted-color: #b86038;
+}
\ No newline at end of file
diff --git a/public/themes/ash.json b/public/themes/ash.json
new file mode 100644
index 0000000..fb9cc93
--- /dev/null
+++ b/public/themes/ash.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Ash",
+	"previewGradient": "45deg, #2f2e2d, #46423b",
+	"complementaryColor": "white",
+	"themeData": "ash.css"
+}
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
new file mode 100644
index 0000000..3cecba6
--- /dev/null
+++ b/public/themes/dark.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Dark",
+	"previewGradient": "45deg, #1f1e1d, #36322b",
+	"complementaryColor": "white",
+	"themeData": "dark.css"
+}
\ No newline at end of file
diff --git a/public/themes/default-themes.json b/public/themes/default-themes.json
deleted file mode 100644
index fb9478d..0000000
--- a/public/themes/default-themes.json
+++ /dev/null
@@ -1,4 +0,0 @@
-[
-	"dark.css",
-	"light.css"
-]
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
new file mode 100644
index 0000000..fe0b678
--- /dev/null
+++ b/public/themes/light.json
@@ -0,0 +1,6 @@
+{
+	"displayName": "Light",
+	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
+	"complementaryColor": "black",
+	"themeData": "light.css"
+}
\ No newline at end of file

From c03f72ceccf81f7501b4ae71d711959bdf66465d Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:05:40 +0200
Subject: [PATCH 3/9] feat: implement "hash navigation" for settings

---
 pages/settings.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 0f297e3..01b78d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,10 +40,10 @@
 
 
 <script lang="ts" setup>
+import { onMounted } from 'vue';
 import Button from '~/components/Button.vue';
 
 const { logout } = useAuth()
-
 const appConfig = useRuntimeConfig()
 
 interface Page {
@@ -99,6 +99,16 @@ function selectCategory(page: Page) {
   selectedPage.value = page.displayName;
 };
 
+// redirects to you privacy if you go to settings#privacy
+onMounted(() => {
+  const hash = window.location.hash.substring(1).toLowerCase();
+  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
+
+  if (foundPage) {
+    currentPage.value = foundPage;
+    selectedPage.value = foundPage.displayName;
+  }
+});
 </script>
 
 <style scoped>

From 1066822dd5f4c38c1bcf4e9290e0ac80f3204df3 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 17:13:17 +0200
Subject: [PATCH 4/9] feat: use flexboxes instead!

---
 .../Settings/AppSettings/Appearance.vue       | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 59e417c..68759d9 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -4,13 +4,13 @@
     
     <p class="subtitle">THEMES</p>
     <div class="themes">
-      <p v-for="theme of 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-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
           </span>
         </span>
-      </p>
+      </div>
     </div>
 
     <p class="subtitle">ICONS</p>
@@ -48,9 +48,19 @@ await fetchThemes()
 </script>
 
 <style scoped>
+.themes {
+  display: flex;
+}
+
+.theme-preview-container {
+  margin: .5em;
+  width: 5em;
+  height: 5em;
+}
+
 .theme-preview {
-  min-width: 6em;
-  min-height: 6em;
+  width: 5em;
+  height: 5em;
   border-radius: 100%;
   border: .1em solid var(--primary-color);
 
@@ -61,6 +71,6 @@ await fetchThemes()
 
 .theme-title {
   font-size: .8em;
-  line-height: 6em; /* same height as the parent to centre it vertically */
+  line-height: 5em; /* same height as the parent to centre it vertically */
 }
 </style>

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 5/9] 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

From 6abfd8e44bcf8f232e251e64269e7532612ec42f Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:02:57 +0200
Subject: [PATCH 6/9] chore: pascalCase

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

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 0f7b504..82e3845 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -8,7 +8,7 @@
         <span class="theme-preview"
           :title="theme.displayName"
           :style="{background:`linear-gradient(${theme.previewGradient})`}"
-          @click="changeTheme(theme.ID, theme.themeURL)"
+          @click="changeTheme(theme.id, theme.themeUrl)"
         >
           <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
             {{ theme.displayName }}
@@ -34,19 +34,19 @@ let themeLinkElement: HTMLLinkElement | null = null;
 const themes: Array<Theme> = []
 
 interface Theme {
-  ID: string
+  id: string
   displayName: string
   previewGradient: string
   complementaryColor: string
-  themeURL: string
+  themeUrl: string
 }
 
-function changeTheme(ID: string, URL: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${URL}`) {
+function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
     return;
   }
 
-  localStorage.setItem("selectedTheme", ID);
+  localStorage.setItem("selectedTheme", id);
 
   // if the theme didn't originally load for some reason, create it
   if (!themeLinkElement) {
@@ -55,14 +55,14 @@ function changeTheme(ID: string, URL: string) {
     document.head.appendChild(themeLinkElement);
   }
 
-  themeLinkElement.href = `${baseURL}themes/${URL}`;
+  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
+    themeConfigJson.id = theme
 
     themes.push(themeConfigJson)
   }
diff --git a/public/themes/ash.json b/public/themes/ash.json
index 1bd7670..d5d2a59 100644
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@@ -2,5 +2,5 @@
 	"displayName": "Ash",
 	"previewGradient": "45deg, #2f2e2d, #46423b",
 	"complementaryColor": "white",
-	"themeURL": "ash.css"
+	"themeUrl": "ash.css"
 }
\ No newline at end of file
diff --git a/public/themes/dark.json b/public/themes/dark.json
index 0ff69be..4731d43 100644
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@@ -2,5 +2,5 @@
 	"displayName": "Dark",
 	"previewGradient": "45deg, #1f1e1d, #36322b",
 	"complementaryColor": "white",
-	"themeURL": "dark.css"
+	"themeUrl": "dark.css"
 }
\ No newline at end of file
diff --git a/public/themes/light.json b/public/themes/light.json
index 3745abb..b95c78b 100644
--- a/public/themes/light.json
+++ b/public/themes/light.json
@@ -2,5 +2,5 @@
 	"displayName": "Light",
 	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
 	"complementaryColor": "black",
-	"themeURL": "light.css"
+	"themeUrl": "light.css"
 }
\ No newline at end of file

From 7098dda6b4f1a6d530978caa8120d2552ac303be Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:03:24 +0200
Subject: [PATCH 7/9] fix: remove un-necessary imports

---
 pages/settings.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/settings.vue b/pages/settings.vue
index 01b78d7..17558b1 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -40,9 +40,6 @@
 
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import Button from '~/components/Button.vue';
-
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 

From 2c4489917a0b86b832b2bd85c68c9c851ab119b4 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:05:35 +0200
Subject: [PATCH 8/9] fix: use $fetch over fetch

---
 components/Settings/AppSettings/Appearance.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 82e3845..696d8b9 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -60,14 +60,11 @@ function changeTheme(id: string, url: string) {
 
 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
+    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
+    themeConfig.id = theme
 
-    themes.push(themeConfigJson)
+    themes.push(themeConfig)
   }
-
-  console.log(themes)
 }
 
 await fetchThemes()

From 2d8475b20a434d5b0859f0338b0a02c9ab54c7b8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:22:06 +0200
Subject: [PATCH 9/9] fix: convert arrow function for consistency

---
 components/Settings/AppSettings/Appearance.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Settings/AppSettings/Appearance.vue b/components/Settings/AppSettings/Appearance.vue
index 696d8b9..3adfda6 100644
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@@ -58,7 +58,7 @@ function changeTheme(id: string, url: string) {
   themeLinkElement.href = `${baseURL}themes/${url}`;
 }
 
-const fetchThemes = async () => {
+async function fetchThemes() {
   for (const theme of defaultThemes) {
     const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
     themeConfig.id = theme