Skip to content

Explorer Font Family and Font Size Support #249739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Explorer Font Family and Font Size Support #249739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
48ec53e
Add new configuration options for explorer font family and font size
DeBoogie May 25, 2025
0fef830
Allow customization of font family and font size
DeBoogie May 25, 2025
3d18f80
Merge branch 'microsoft:main' into explorerFont
DeBoogie May 26, 2025
705fe32
Merge branch 'main' into explorerFont
DeBoogie May 27, 2025
17e0432
Merge branch 'main' into explorerFont
DeBoogie May 31, 2025
0bdf8aa
Merge branch 'main' into explorerFont
DeBoogie Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/vs/workbench/contrib/files/browser/files.contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,6 +636,18 @@ configurationRegistry.registerConfiguration({
'tsconfig.json': 'tsconfig.*.json',
'package.json': 'package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb, bun.lock',
}
},
'explorer.fontFamily': {
'type': 'string',
'description': nls.localize('explorerFontFamily', "Controls the font family for the explorer view. Leave empty to use the default font family."),
'default': '',
'scope': ConfigurationScope.WINDOW
},
'explorer.fontSize': {
'type': ['number'],
'description': nls.localize('explorerFontSize', "Controls the font size in pixels for the explorer view. Also accepts string values with units (e.g., '1.2em', '10pt'). Leave empty or null to use the default font size."),
'default': null,
'scope': ConfigurationScope.WINDOW
}
}
});
Expand Down
23 changes: 23 additions & 0 deletions src/vs/workbench/contrib/files/browser/views/explorerView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,19 @@ export class ExplorerView extends ViewPane implements IExplorerView {
}
}

private updateExplorerFontStyles(fontFamily: string | undefined, fontSize: string | number | undefined): void {
if (this.container) {
this.container.style.fontFamily = fontFamily || '';

if (fontSize !== undefined && fontSize !== null && fontSize !== '') {
// If fontSize is a number, append 'px'. Otherwise, use it as is (e.g., "1.2em", "10pt").
this.container.style.fontSize = typeof fontSize === 'number' ? `${fontSize}px` : fontSize;
} else {
this.container.style.fontSize = ''; // Reset
}
}
}

private async selectActiveFile(reveal = this._autoReveal): Promise<void> {
if (this._autoReveal) {
const activeFile = EditorResourceAccessor.getCanonicalUri(this.editorService.activeEditor, { supportSideBySide: SideBySideEditor.PRIMARY });
Expand Down Expand Up @@ -582,6 +595,16 @@ export class ExplorerView extends ViewPane implements IExplorerView {
this._autoReveal = configuration?.explorer?.autoReveal;
}

const affectsFontFamily = !event || event.affectsConfiguration('explorer.fontFamily');
const affectsFontSize = !event || event.affectsConfiguration('explorer.fontSize');

if (affectsFontFamily || affectsFontSize) {
const fontFamily = this.configurationService.getValue<string>('explorer.fontFamily');
const fontSize = this.configurationService.getValue<string | number>('explorer.fontSize');

this.updateExplorerFontStyles(fontFamily, fontSize);
}

// Push down config updates to components of viewer
if (event && (event.affectsConfiguration('explorer.decorations.colors') || event.affectsConfiguration('explorer.decorations.badges'))) {
this.refresh(true);
Expand Down