feat: font size preference

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<FontSize>(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])
+}

composables/setups.ts

@@ -66,3 +66,10 @@ export async function setupI18n() {
     })
   })
 }
+
+export async function setupFontSize() {
+  if (!process.server) {
+    setFontSizeCSSVar()
+    watch(fontSize, setFontSizeCSSVar)
+  }
+}