feat: add font style setting (#3092)

apps/web/src/atoms/settings.ts

@@ -15,6 +15,7 @@ export type AppSetting = {
   clientBorder: boolean;
   fullWidthLayout: boolean;
   windowFrameStyle: 'frameless' | 'NativeTitleBar';
+  fontStyle: 'Sans' | 'Serif' | 'Mono';
   dateFormat: DateFormats;
   startWeekOnMonday: boolean;
   enableBlurBackground: boolean;
@@ -37,10 +38,20 @@ export const dateFormatOptions: DateFormats[] = [
   'dd MMMM YYYY',
 ];
 
+export const fontStyleOptions: {
+  key: AppSetting['fontStyle'];
+  value: string;
+}[] = [
+  { key: 'Sans', value: 'var(--affine-font-sans-family)' },
+  { key: 'Serif', value: 'var(--affine-font-serif-family)' },
+  { key: 'Mono', value: 'var(--affine-font-mono-family)' },
+];
+
 export const AppSettingAtom = atomWithStorage<AppSetting>('AFFiNE settings', {
   clientBorder: false,
   fullWidthLayout: false,
   windowFrameStyle: 'frameless',
+  fontStyle: 'Sans',
   dateFormat: dateFormatOptions[0],
   startWeekOnMonday: false,
   enableBlurBackground: true,

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -8,6 +8,7 @@ import { useCallback } from 'react';
 
 import {
   type AppSetting,
+  fontStyleOptions,
   useAppSetting,
   windowFrameStyleOptions,
 } from '../../../../../atoms/settings';
@@ -48,6 +49,46 @@ export const ThemeSettings = () => {
   );
 };
 
+const FontFamilySettings = () => {
+  const [appSettings, setAppSettings] = useAppSetting();
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      defaultValue={appSettings.fontStyle}
+      onValueChange={useCallback(
+        (key: AppSetting['fontStyle']) => {
+          const value = fontStyleOptions.find(option => option.key === key)
+            ?.value;
+
+          setAppSettings({ fontStyle: key });
+
+          document
+            .querySelector('html')
+            ?.style.setProperty('--affine-font-family', value || null);
+        },
+        [setAppSettings]
+      )}
+    >
+      {fontStyleOptions.map(({ key, value }) => {
+        return (
+          <RadioButton
+            key={key}
+            bold={true}
+            value={key}
+            data-testid="system-font-style-trigger"
+            style={{
+              fontFamily: value,
+            }}
+          >
+            {key}
+          </RadioButton>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+};
+
 export const AppearanceSettings = () => {
   const t = useAFFiNEI18N();
 
@@ -72,6 +113,12 @@ export const AppearanceSettings = () => {
         >
           <ThemeSettings />
         </SettingRow>
+        <SettingRow
+          name={t['Font Style']()}
+          desc={t['Choose your font style']()}
+        >
+          <FontFamilySettings />
+        </SettingRow>
         <SettingRow
           name={t['Display Language']()}
           desc={t['Select the language for the interface.']()}