From 55a0e11366659ea25ff3ad9bbaf3b878bdcee2fd Mon Sep 17 00:00:00 2001
From: bunnybeam <mailbunnybeam@gmail.com>
Date: Fri, 8 Aug 2025 17:03:56 +0100
Subject: [PATCH] add custom font size option

---
 locales/index.d.ts                                  |  4 ++++
 packages/backend/src/server/web/boot.js             |  7 ++++++-
 packages/frontend/src/local-storage.ts              |  1 +
 .../frontend/src/pages/settings/preferences.vue     |  8 ++++++++
 packages/frontend/src/preferences/def.ts            | 13 ++++++++++++-
 sharkey-locales/en-US.yml                           |  2 ++
 6 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index bd7f29810d..344c4c51e6 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -13379,6 +13379,10 @@ export interface Locale extends ILocale {
          */
         "keepFilesInUseDescription": string;
     };
+    /**
+     * Custom font size
+     */
+    "customFontSize": string;
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 0488161513..c10f6a54ae 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -129,7 +129,12 @@
 
 	const fontSize = localStorage.getItem('fontSize');
 	if (fontSize) {
-		document.documentElement.classList.add('f-' + fontSize);
+		if (fontSize === "custom") {
+			const customFontSize = localStorage.getItem('customFontSize');
+			document.documentElement.style.setProperty('font-size', `${customFontSize}px`);
+		} else {
+			document.documentElement.classList.add('f-' + fontSize);
+		}
 	}
 
 	const cornerRadius = localStorage.getItem('cornerRadius');
diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts
index f1d660a45b..b5dd4ed038 100644
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@@ -20,6 +20,7 @@ export type Keys = (
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |
+	'customFontSize' |
 	'cornerRadius' |
 	'ui' |
 	'ui_temp' |
diff --git a/packages/frontend/src/pages/settings/preferences.vue b/packages/frontend/src/pages/settings/preferences.vue
index d21faf61e9..1c8e418182 100644
--- a/packages/frontend/src/pages/settings/preferences.vue
+++ b/packages/frontend/src/pages/settings/preferences.vue
@@ -700,9 +700,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<option value="1"><span style="font-size: 15px;">Aa</span></option>
 								<option value="2"><span style="font-size: 16px;">Aa</span></option>
 								<option value="3"><span style="font-size: 17px;">Aa</span></option>
+								<option value="custom"><span style="font-size: 14px;">Custom</span></option>
 							</MkRadios>
 						</SearchMarker>
 
+						<SearchMarker :keywords="['font', 'size']">
+							<MkInput v-model="customFontSize" :min="12" :max="48" type="number" :step="1" :manualSave="true" :disabled="fontSize !== 'custom'">
+								<template #label><SearchLabel>{{ i18n.ts.customFontSize }}</SearchLabel></template>
+							</MkInput>
+						</SearchMarker>
+
 						<SearchMarker :keywords="['font', 'system', 'native']">
 							<MkSwitch v-model="useSystemFont">
 								<template #label><SearchLabel>{{ i18n.ts.useSystemFont }}</SearchLabel></template>
@@ -1081,6 +1088,7 @@ const defaultCW = ref($i.defaultCW);
 const defaultCWPriority = ref($i.defaultCWPriority);
 const lang = prefer.model('lang');
 const fontSize = prefer.model('fontSize');
+const customFontSize = prefer.model('customFontSize');
 const useSystemFont = prefer.model('useSystemFont');
 const cornerRadius = prefer.model('cornerRadius');
 const trustedDomains = prefer.model(
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index c712e96fb9..b651bdd31b 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/packages/frontend/src/preferences/def.ts
@@ -497,7 +497,18 @@ export const PREF_DEF = {
 				miLocalStorage.removeItem('fontSize');
 			}
 		},
-	} as Pref<'0' | '1' | '2' | '3'>,
+	} as Pref<'0' | '1' | '2' | '3' | 'custom'>,
+	customFontSize: {
+		default: 14,
+		needsReload: true,
+		onSet: customFontSize => {
+			if (customFontSize) {
+				miLocalStorage.setItem('customFontSize', customFontSize.toString());
+			} else {
+				miLocalStorage.removeItem('customFontSize');
+			}
+		},
+	} as Pref<number>,
 	useSystemFont: {
 		default: false,
 		needsReload: true,
diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml
index d8602a1489..e5566da478 100644
--- a/sharkey-locales/en-US.yml
+++ b/sharkey-locales/en-US.yml
@@ -654,3 +654,5 @@ clearCachedFilesOptions:
   oneYear: "one year"
   keepFilesInUse: "Don't delete files used as avatars&c"
   keepFilesInUseDescription: "this option requires more complicated database queries, you may need to increase the value of db.extra.statement_timeout in the configuration file"
+
+customFontSize: "Custom font size"