feat(settings): add font smoothing toggle#60
Conversation
New setting to enable/disable font antialiasing and geometric text rendering for the UI. Found in Settings > Behavior. When enabled (default): applies -webkit-font-smoothing: antialiased, -moz-osx-font-smoothing: grayscale, and text-rendering: geometricPrecision. When disabled: uses the browser/OS default text rendering, which can appear sharper on some displays. Does not affect terminal text (rendered by xterm.js WebGL addon).
There was a problem hiding this comment.
Pull request overview
Adds a user-facing “Font smoothing” setting (Settings → Behavior) that controls whether the app applies UI text antialiasing/text-rendering overrides via a body CSS class, and persists the preference across restarts.
Changes:
- Introduces a persisted
fontSmoothingboolean in the app store (defaulttrue) with a setter and load/save support. - Updates global CSS to apply font-smoothing rules only when
body.font-smoothingis present. - Adds a Settings checkbox and toggles the
font-smoothingclass on<body>based on store state.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles.css | Moves font smoothing/text rendering rules behind body.font-smoothing. |
| src/store/ui.ts | Adds setFontSmoothing() setter. |
| src/store/types.ts | Adds fontSmoothing to persisted state + app store typings. |
| src/store/store.ts | Re-exports setFontSmoothing from the barrel. |
| src/store/persistence.ts | Persists fontSmoothing in save/load and validates it on load. |
| src/store/core.ts | Initializes fontSmoothing: true in the default store. |
| src/components/SettingsDialog.tsx | Adds the “Font smoothing” checkbox UI. |
| src/App.tsx | Toggles font-smoothing class on <body> from store state. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Toggle font smoothing CSS class on body | ||
| createEffect(() => { | ||
| document.body.classList.toggle('font-smoothing', store.fontSmoothing); | ||
| }); |
There was a problem hiding this comment.
store.fontSmoothing is loaded asynchronously in onMount via loadState(), but the body class is toggled immediately from the default true value. If a user previously disabled font smoothing, the app will render with smoothing enabled until loadState() completes, then flip, causing a visible flash and making the persisted preference feel unreliable on startup. Consider applying the initial body class only after loadState() resolves (or delaying initial UI render/hydrating a settingsLoaded flag) so the first paint reflects the persisted value.
| <label | ||
| style={{ | ||
| display: 'flex', | ||
| 'align-items': 'flex-start', | ||
| gap: '10px', | ||
| cursor: 'pointer', | ||
| padding: '8px 12px', | ||
| 'border-radius': '8px', | ||
| background: theme.bgInput, |
There was a problem hiding this comment.
All other checkbox rows in this section use align-items: 'center', but this new one uses flex-start, which will misalign the checkbox relative to the text compared to the rest of the dialog. Align it consistently with the other settings rows unless there’s a specific layout reason to differ.
|
Thank you very much Generated by Claude Code |
Summary
New setting to toggle font smoothing for the UI (Settings > Behavior).
When enabled (default): applies
-webkit-font-smoothing: antialiasedandtext-rendering: geometricPrecision— the current hardcoded behavior.When disabled: uses browser/OS default text rendering, which can appear sharper on some displays.
Does not affect terminal text (rendered by xterm.js WebGL addon).
Motivation
The hardcoded antialiasing makes text appear softer on some Retina displays. This gives users the option to disable it and compare.
Test plan