VSCode extension: add font size setting for chat panel

Additionally, would be nice to set the font family and be able to configure monospace fonts for inline code, avoiding things like this:

<img width="148" height="31" alt="Image" src="https://github.com/user-attachments/assets/23bbad8a-0b38-4e7a-9a55-89b92790025a" />

Accessibility help please!

Font customization and appearance settings are a must. Please!

+1

+1, with a concrete implementation note that might lower the cost of building this.

The webview CSS already reads from VSCode's chat-font CSS variable:

body { font-size: var(--vscode-chat-font-size, 13px); ... }

Which means today, users can already get an independent baseline by setting "chat.fontSize": 16 in settings.json — it flows through after a panel reload. (Caveat: monospace blocks inside the panel read --vscode-editor-font-size, so code rides with the editor font, not the chat font. Prose is independently sized; code is not.)

Two requests on top of the original ask:

1. Mouse-wheel zoom in the panel, mirroring editor.mouseWheelZoom — Cmd+scroll to live-resize. Since the CSS variable plumbing exists, this is mostly a matter of binding a wheel listener in the webview and updating an inline font-size override.
2. Apply the size to monospace/code blocks too, either via a second setting or by having --app-monospace-font-size follow the chat-font scale rather than --vscode-editor-font-size. Otherwise the panel renders prose at one size and code at another, which is jarring.

Use case: I read long-form Claude responses in the panel for hours at a stretch and the 13px default is genuinely fatiguing. Whole-window zoom isn't a fix because it shrinks editor real estate I need.

Edit: corrected setting name — chat.fontSize, not chat.editor.fontSize (the latter governs the chat input editor, not the panel body).

Also required for the plan pane in plan mode. it's so small now

TL;DR VS Code Extension: Claude Code UI Patch

The (non-exhaustive) list of feature requests: #11651, #21769, #29756, #34196 (this thread), #44248, #58908, #59959, #60077, #69289 ...

Until official support lands, a minimal UI patch with configurable font sizes (plural):

Every Knob, One Panel

| Before (native sizes) | After (patched) |
| :---: | :---: |
| <img src="https://raw.githubusercontent.com/zeyutang/claude-code-ui-patch/420a26c2a53933dcc7ead77572a15f80a93c9bf7/docs/img/before-ui-patch.png" width="360"> | <img src="https://raw.githubusercontent.com/zeyutang/claude-code-ui-patch/420a26c2a53933dcc7ead77572a15f80a93c9bf7/docs/img/after-ui-patch.png" width="360"> |

What UI Patch Can Configure

1. Chat panel or tab

| Setting | Native | Target |
| ------------------------------------------- | ------------------------- | ------------------------------------------------------------ |
| chat.fontSize | ~14px | chat panel/tab text, input, IN/OUT blocks |
| claudeCodeUiPatch.chatCodeblockFontSize | ~11px | chat panel/tab fenced code blocks |
| claudeCodeUiPatch.chatDiffCardFontSize | 12px | diff card (Edit/MultiEdit tool cards and their expand modal) |
| claudeCodeUiPatch.chatDiffCardLineNumbers | off | diff-card line numbers, with real +/- gutter signs |
| claudeCodeUiPatch.chatDiffCardThemeSync | off (forces dark theme) | diff card follows the VS Code light/dark theme |

2. Plan-mode Markdown preview

| Setting | Native | Target |
| --------------------------------------------------- | ------ | ---------------------------------------------- |
| claudeCodeUiPatch.planPreviewFontSize | 14px | Markdown preview text (headings scale with it) |
| claudeCodeUiPatch.planPreviewCodeblockFontSize | 13px | code blocks and inline code |
| claudeCodeUiPatch.planPreviewCommentQuoteFontSize | 12px | selected-text quote |
| claudeCodeUiPatch.planPreviewCommentInputFontSize | 13px | select-and-comment input |
| claudeCodeUiPatch.planPreviewCommentBadgeFontSize | 10px | comment badge (fixed 14px circle, keep <= 12) |

## TL;DR VS Code Extension: Claude Code UI Patch

I couldn't get this to work, but I really wanted to. Please support the docs.

> ## TL;DR VS Code Extension: Claude Code UI Patch I couldn't get this to work, but I really wanted to. Please support the docs.

Thanks for the interest! Replied in the Claude Code UI Patch repo issue thread #1

I'm really losing my eyesight, without really understanding the reasons behind it..

+1

This is a very simple feat req, can you enable this?

+1

Would love to see this be a native setting!

+1

I would love this as a native setting as well. Right now, trying to use the extension. Thanks @zeyutang !

Please really consider adding this. The text is tiny!

+1 I've been juggling between zooming my entire window in to focus the panel, making everything else too large, and zooming back out to read the code.

~~Happy I'm not the only one struggling. I'm on a tiny laptop and I can barely read Claude messages. Idem for the text input at the bottom. Please think about people coding on tiny laptops.~~

@andrewroxby Thank you ! You're right, chat.fontSize and chat.editor.fontSize work. So happy.

For others who like me might have tried that before coming here, the trick is to reload the window.

@andrewroxby Thank you ! You're right, chat.fontSize and chat.editor.fontSize work. So happy.

Aren't those only for the Copilot chat?

@jondeodat @andrewroxby

> @andrewroxby Thank you ! You're right, chat.fontSize and chat.editor.fontSize work. So happy. Aren't those only for the Copilot chat? @jondeodat @andrewroxby

Maybe they were intended for copilot by the vscode team but Claude Code plugin reuses them.

The description in vscode settings seems generic to me: Controls the font size in pixels in chat codeblocks.

Yep, I can confirm chat.fontSize works. Though chat.editor.fontSize doesn't seem to do anything for me.

This works for me:

```// .vscode/settings.json
{
"chat.fontSize": 14
}