How to increase the font size of GitHub Copilot sidebar UI elements in VS Code?

[singhal-shagun]

🏷️ Discussion Type

Question

💬 Feature/Topic Area

VS Code

Body

I want to increase the font size of certain UI elements around the GitHub Copilot sidebar dialog box (the message's context items, agent mode selector, model selector, etc.). In the following screenshot, I have shown this area and highlighted these elements with red rectangles.

What I've tried

1. @id:chat.fontSize setting – This increases the font size of chat messages, not the font size of those UI elements around the message box.

2. Searched VS Code settings for "copilot font" – Did not find anything specific to these elements of the Copilot sidebar.

3. window.zoomLevel – This works but zooms in on everything (editor, sidebar, UI).

Environment

• VS Code: 1.120.0

• GitHub Copilot Extension: 0.48.1

• OS: Windows 10 22H2

Is there a setting, or configuration option to control the font size of just the UI elements around the Copilot Chat's message box?

[ankurmaurya01]

Hi @singhal-shagun! 👋

There's currently no dedicated setting to control the font size of just those specific UI elements (model selector, agent mode selector, context items, etc.) around the Copilot Chat message box.

However, here's a workaround that might help:

Using VS Code Custom CSS (via extension)

1. Install the Custom CSS and JS Loader extension (be5invis.vscode-custom-css)
2. Create a custom CSS file (e.g. custom.css) and add something like:

.chat-input-toolbars,
.interactive-input-part .monaco-select-box,
.chat-attached-context {
    font-size: 14px !important;
}

3. Point vscode_custom_css.imports in your settings.json to that file
4. Run Enable Custom CSS and JS from the command palette

Alternative — partial workaround:
If you only want a slight bump without affecting the editor, try a fractional zoom:

"window.zoomLevel": 0.3

This is less aggressive than a full integer zoom.

Long term:
I'd suggest this warrants a dedicated setting like copilot.chat.uiFontSize or hooking into editor.fontSize for sidebar UI elements. Would be great if the team could consider exposing this — many users with high-DPI displays or accessibility needs would benefit.

Hope this helps in the meantime! 🙌

[singhal-shagun]

Hi!

Here are the steps I followed:

1. Installed the Custom CSS and JS Loader extension
2. Added the following code before the last closing curling braces in my User Settings JSON:

"vscode_custom_css.imports": [
        "file:///C:/Users/admin/custom-css-vscode/vscode-custom.css"
    ]

3. Closed VSCode. Started it as Adminstrator.
4. Ran the command "Reload Custom CSS and JS". (from the command pallete after pressing Ctrl+Shift+P)
5. Restarted VSCode again.

My custom CSS file has the following contents:

.chat-input-toolbars,
.interactive-input-part .monaco-select-box,
.chat-attached-context {
    font-size: 28px !important;
}

Bumping it up to 28px also didn't do anything. Did I miss something?

[singhal-shagun]

Hi again!

To test if I was working with the correct selectors, I tried the following CSS:

.chat-input-toolbars,
.interactive-input-part .monaco-select-box,
.chat-attached-context {
    font-size: 28px !important;
    border: 2px solid magenta !important;
}

It drew a magenta border around the elements below the Copilot message box as follows:

However, their text size didn't increase at all.

[singhal-shagun]

Okay. So. After a bit of fiddling around, the following CSS is what seems to have worked for me:

div.interactive-input-part * {
    font-size: 14px !important;
    /* border: 2px solid magenta !important; */
}

[prxcode]

Hi @singhal-shagun,

If your main goal is simply to make the Copilot Chat UI easier to read, the easiest solution is to use Ctrl + "+" (or View → Appearance → Zoom In) in VS Code. This increases the overall UI scale, including the Copilot sidebar, chat controls, and other interface elements.

The custom CSS approach can be tricky because many Copilot UI components use nested elements with their own styling, so changing the parent font-size often has no visible effect even when the CSS is being loaded correctly.

• If this helped, feel free to accept it as the answer.