workbench: add configurable font size and font family settings (#519) - #319151
Open
DisturbedSage (DisturbedSage5840C) wants to merge 4 commits into
Open
workbench: add configurable font size and font family settings (#519)#319151DisturbedSage (DisturbedSage5840C) wants to merge 4 commits into
DisturbedSage (DisturbedSage5840C) wants to merge 4 commits into
Conversation
…soft#519) Adds two new workbench-level font settings that have been the most requested VS Code feature for nearly 10 years (issue microsoft#519, 4700+ votes). **workbench.fontSize** (number, 11–16, default 13) Controls the font size in pixels of all workbench UI surfaces: sidebar, file explorer, tabs, breadcrumbs, status bar, panel headers, settings UI, notifications, and menus. The editor font size is unaffected (use `editor.fontSize` for that). The range 11–16 px is chosen to fit safely within the existing 22 px virtual-list row height used by tree views. **workbench.fontFamily** (string, default '') Overrides the platform-default font family (Segoe UI on Windows, -apple-system on macOS, system-ui on Linux) with a custom font. Leave empty to restore the platform default. Accepts any valid CSS font-family value (e.g. `"JetBrains Mono"`, `"Fira Code", sans-serif`). Implementation: - `style.css`: `.monaco-workbench` now reads font-size from a CSS custom property `--vscode-workbench-font-size` with a fallback of 13px, so the default behaviour is identical to before. A new utility class `.monaco-workbench-custom-font` is added; when present it sets `font-family` from `--vscode-workbench-font-family`, overriding the per-platform font-family rules. - `workbench.contribution.ts`: both settings are registered under `ConfigurationScope.APPLICATION` so they apply globally (not per-workspace). - `workbench.ts`: `updateWorkbenchFontSize()` and `updateWorkbenchFontFamily()` follow the same pattern as the existing `updateFontAliasing()` and `updateWorkbenchTextDirection()` — they react to `onDidChangeConfiguration`, validate/clamp the incoming value, and update the CSS custom property (or class) on `mainContainer` immediately with no reload required. Fixes microsoft#519
Author
|
@microsoft-github-policy-service agree |
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds new workbench-level configuration settings to customize the UI font size, font family, and text direction independent of the editor.
Changes:
- Introduces
workbench.fontSizeandworkbench.fontFamilyconfiguration settings. - Adds runtime handlers in
Workbenchto apply font size, font family, and text direction via CSS variables and DOM attributes. - Updates workbench stylesheet to consume the new CSS variables.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/vs/workbench/browser/workbench.contribution.ts | Registers new workbench.fontSize and workbench.fontFamily settings. |
| src/vs/workbench/browser/workbench.ts | Adds update handlers wired to configuration changes and initial startup. |
| src/vs/workbench/browser/media/style.css | Switches workbench font-size to a CSS variable and adds custom font-family override class. |
- Remove accidental textDirection code that leaked in from stash (belongs
to a separate PR); this PR is scoped to fontSize/fontFamily only
- Broaden workbench.fontSize range from 11-16 to 8-30 to cover
accessibility use cases (large UI text) and high-density displays
- Consolidate four separate onDidChangeConfiguration listeners into one
shared subscription to reduce event-handling overhead
- Strip CSS injection characters (;, {, }, <, >, newlines) from
workbench.fontFamily before embedding in a CSS custom property
- Update fontSize clamp to match the new 8-30 schema range
…workbench-font-size-family
…workbench-font-size-family
Author
|
Hi Justin Chen (@justschen)! Just wanted to give a gentle ping since you were assigned to this PR. Happy to make any changes needed to help move this forward. Thanks for your time! |
|
DisturbedSage (@DisturbedSage5840C), Will this also apply to the new "Agents" window? |
Author
|
Yes — |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #519 — Allow to change the font size and font of the workbench.
This is the most-requested VS Code feature with 4,700+ reactions and 589 comments, open since 2015. This PR implements it with a minimal, targeted approach that exactly mirrors the existing
workbench.fontAliasingpattern — no new subsystems, no architectural changes.What changed
New settings
workbench.fontSize138–30workbench.fontFamily""(platform default)Both settings take effect immediately with no reload required.
workbench.fontSizeControls the font size of all workbench UI surfaces:
The editor font is not affected — use
editor.fontSizefor that.Range
8–30px covers accessibility users who need large UI text and high-density display users who prefer compact UI.workbench.fontFamilyOverrides the platform-default font family with a custom font.
-apple-system/Segoe UI/system-ui)"Inter","Fira Sans","Roboto", sans-serif→ applied immediately;,{,},<,>, newlines) are stripped before the value is written to a CSS custom propertyImplementation
style.css.monaco-workbench { font-size: var(--vscode-workbench-font-size, 13px) }— CSS variable with 13 px fallback; default behaviour is byte-for-byte identical to before.monaco-workbench-custom-font { font-family: var(--vscode-workbench-font-family) !important }applied only when a custom family is configured, overriding per-platform rulesworkbench.contribution.tsConfigurationScope.APPLICATIONworkbench.tsupdateWorkbenchFontSize()andupdateWorkbenchFontFamily()follow the exact same pattern asupdateFontAliasing()onDidChangeConfigurationsubscription (not separate listeners) to reduce event-handling overhead8–30before applying; font family is sanitized before writing to the CSS custom propertyTest plan
"workbench.fontSize": 15— sidebar, tabs, status bar, breadcrumbs all grow immediately"workbench.fontSize": 8— UI shrinks for high-density use"workbench.fontSize": 30— UI scales up for accessibility"workbench.fontFamily": "Georgia"— all workbench text switches to Georgia immediatelyworkbench.fontFamily— platform default font restores"workbench.fontFamily": "Comic Sans; background: red"— injection characters stripped, falls back gracefully"workbench.fontSize": 13(default) — identical to baseline, no visual differenceeditor.fontSizeis unaffected byworkbench.fontSize