From 186d3c7a0a6b4479d936151c38e839c8ead3796a Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:25:52 +0200
Subject: [PATCH] feat: add preferred font field to themes

---
 app.vue                              |  2 +-
 public/themes/ash.css                | 11 ++++++-----
 public/themes/dark.css               |  1 +
 public/themes/description.css        |  1 +
 public/themes/light.css              | 11 ++++++-----
 public/themes/rainbow-capitalism.css |  3 ++-
 utils/generateDefaultIcon.ts         |  3 ++-
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/app.vue b/app.vue
index 9c8fb1c..59d006d 100644
--- a/app.vue
+++ b/app.vue
@@ -65,7 +65,7 @@ useHead({
 <style>
 html,
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--preferred-font);
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);
diff --git a/public/themes/ash.css b/public/themes/ash.css
index d1f09c8..b9c349d 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -12,15 +12,16 @@
 
     --padding-color: #e0e0e0;
 
-	--sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 100%;
-    
 	--primary-color: #f07028;
 	--primary-highlighted-color: #f28f4b;
 	--secondary-color: #683820;
 	--secondary-highlighted-color: #885830;
 	--accent-color: #a04b24;
 	--accent-highlighted-color: #b86038;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 6160194..3927da7 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,4 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index f3738a5..11d5665 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,6 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index d11f5f5..6afe702 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -11,11 +11,6 @@
 	--chatbox-background-color: #dfdbd6;
 
     --padding-color: #484848;
-
-    --sidebar-width: 2.5em;
-	--standard-radius: .5em;
-	--button-radius: .6em;
-	--pfp-radius: 100%;
     
     --primary-color: #df5f0b;
     --primary-highlighted-color: #ef6812;
@@ -23,4 +18,10 @@
     --secondary-highlighted-color: #f8b68a;
     --accent-color: #e68b4e;
     --accent-highlighted-color: #f69254;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 1a5197b..d2a835b 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -19,10 +19,11 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-    --sidebar-width: 2.5em;
+	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
+	--preferred-font: "Arial, Helvetica, sans-serif";
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
index 0b05913..6313b75 100644
--- a/utils/generateDefaultIcon.ts
+++ b/utils/generateDefaultIcon.ts
@@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
 		ctx.fillStyle = 'white'
 		ctx.textAlign = 'center'
 		ctx.textBaseline = 'middle'
-		ctx.font = 'bold 96px Arial, Helvetica, sans-serif'
+		const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
+		ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
 		// 136 isn't actually centered, but it *looks* centered
 		ctx.fillText(previewName, 128, 136)