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] 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