diff --git a/app.vue b/app.vue
index 3f261dcb..e0ffddf9 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,6 @@
+
+
+
+
+
+
+
+ {{ size }}
+
+
+
+
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index cfd399d2..5d6320c9 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -81,7 +81,7 @@ const isDM = $computed(() => status.visibility === 'direct')
-
diff --git a/composables/fontSize.ts b/composables/fontSize.ts
new file mode 100644
index 00000000..dc9a0df3
--- /dev/null
+++ b/composables/fontSize.ts
@@ -0,0 +1,21 @@
+import { STORAGE_KEY_FONT_SIZE } from '~/constants'
+
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export const fontSize = useLocalStorage(STORAGE_KEY_FONT_SIZE, 'md')
+
+export function setFontSize(size: FontSize) {
+ fontSize.value = size
+}
+
+export const fontSizeMap = {
+ xs: '13px',
+ sm: '14px',
+ md: '15px',
+ lg: '16px',
+ xl: '17px',
+}
+
+export function setFontSizeCSSVar() {
+ document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value])
+}
diff --git a/composables/setups.ts b/composables/setups.ts
index 4c2a9304..b524eae7 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -66,3 +66,10 @@ export async function setupI18n() {
})
})
}
+
+export async function setupFontSize() {
+ if (!process.server) {
+ setFontSizeCSSVar()
+ watch(fontSize, setFontSizeCSSVar)
+ }
+}
diff --git a/constants/index.ts b/constants/index.ts
index 9b9e225c..51ca5239 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,6 +11,7 @@ export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
export const STORAGE_KEY_LANG = 'elk-lang'
+export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
diff --git a/styles/global.css b/styles/global.css
index fba73d15..6f9e34d2 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,3 +1,7 @@
+html {
+ font-size: var(--font-size);
+}
+
@font-face {
font-display: swap;
font-family: "DM Mono";
diff --git a/styles/vars.css b/styles/vars.css
index 2fbbd9ab..cf69b850 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -1,4 +1,6 @@
:root {
+ --font-size: 15px;
+
--c-primary: #EA9E44;
--c-primary-active: #C16929;
--c-primary-light: #EA9E4466;