getcursor
Request to adjust chat font size in Cursor IDE
Is your feature request related to a problem? Please describe. When using Cursor IDE for code development, I find that the font size in the chat window is too small for me, making it difficult for me to read and understand the chat content.
Describe the solution you'd like I would like Cursor IDE to provide a feature that allows me to adjust the font size in the chat window. This way, I can set the font size that is most suitable for my vision and preferences.
Additional context Currently, I can only indirectly adjust the font size by using the zoom function in the browser, but this affects the size of the entire interface, including the editor and other parts. I would like to have a font size adjustment feature specifically for the chat window.
super trivial, here's an example: do something like
./cursor-0.10.4.AppImage --appimage-extract
${EDITOR} squash-fs/cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.js
In the file then add something like this:
and restart. There you go.
That worked. But directly editing application files is risky and can lead to instability or breakage if not done correctly. It would be better to have this option easily available.
I'd like to request this feature as well. You can adjust the font size of the code editor and every other part of the program, but I can't find anything to adjust the font size of the AI chat window. The font is really small on my high resolution monitor. Please add a setting to be able to change this font size too. Thank you.
+1 because it's one of those annoying details that just makes a program better once fixed
FYI a workaround is to adjust the size of the font size for both editor + chat with cmd-+/- and then to adjust it for the editor alone in the settings.
Yep, +1 from me. I read about Cursor and got all excited, first time I tried it it was virtually useless as I couldn't read the text in the chat window. I'm back with VS Code until a simple option to change the font size is installed, not a workaround.
+1 For some of us, this is an accessibility issue. Eyes get bad as we age, especially if we stare at computer screens all day!!
I'd like to see adjustments not just for font-size in general, but specific font-sizes on various parts of the UI. The in-editor pop-up, chat window, etc., all needed individual settings.
I tried tweaking every font-size in VS code so I could zoom, but that blows out different parts of the UI (like tabs). I'm currently using an extension that injects CSS into VS Code to modify the UI. It is working (mostly) in Cursor.
+1 For some of us, this is an accessibility issue. Eyes get bad as we age, especially if we stare at computer screens all day!!
I'd like to see adjustments not just for font-size in general, but specific font-sizes on various parts of the UI. The in-editor pop-up, chat window, etc., all needed individual settings.
I tried tweaking every font-size in VS code so I could zoom, but that blows out different parts of the UI (like tabs). I'm currently using an extension that injects CSS into VS Code to modify the UI. It is working (mostly) in Cursor.
I'd appreciate the tip on the extension to work around this in the meantime. I have my Cursor AI Chat in a separate monitor and the size of the bottom options (e.g. model, mention, image) makes it quite a challenge to use. Which is a shame because all in all Cursor has made me 100% more productive. I think the UI and some usability issues are the only things holding it back.
I'd appreciate the tip on the extension to work around this in the meantime. I have my Cursor AI Chat in a separate monitor and the size of the bottom options (e.g. model, mention, image) makes it quite a challenge to use. Which is a shame because all in all Cursor has made me 100% more productive. I think the UI and some usability issues are the only things holding it back.
Sure thing! I'm using this vscode extension: Custom CSS and JS Loader
You need to toggle open devtools and then drill down into the DOM to find the classes you want to style. Of course, these can change at any time, so you might have to make adjustments if/when Cursor makes updates.
So far, this has worked quite well, especially since the chat container has a class aichat-container that makes it quite distinct. The other class that is useful is .aislash-editor-input for the inline editor. You have to get down into the DOM to find all those little buttons, but it makes a big difference! Good luck!!
super trivial, here's an example: do something like
./cursor-0.10.4.AppImage --appimage-extract ${EDITOR} squash-fs/cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.jsIn the file then add something like this:
and restart. There you go.
This worked great for a while, and then at some point stopped working for me after a Cursor update. I tried digging through devtools to determine if the selector's name was simply changed to something else, but to no avail.
Do you happen to have something working with current version of Cursor?
Terribly frustrating that this request for a feature so simple and so necessary is now over a year old without resolution. It's a literal eye sore on my otherwise delightful 5k2k monitor.
And for anyone else coming across this - the alternative workaround with the custom CSS extension suggested by someone else does technically work, but is too buggy to actually use (for me anyways). It messes up text elsewhere in the editor even when using very narrow CSS selectors (causes the carat to appear 6-8 spaces to the left of where it actually is, weird artifacts with highlighted text, etc).
Would be wonderful to not have to resort to any workarounds at all!
I got an updated version of @kristopolous's preload.js fix working again on Cursor version 0.42.3 - see below:
setTimeout(() => {
const aiChatPanel = document.querySelector('.aichat-container');
if (aiChatPanel) {
document.querySelector('.aichat-container').style.fontSize = '16px';
document.querySelector('.aichat-container').style.lineHeight = '16px';
});
} else {
console.error("Element with class '.aichat-container' not found.");
}
}, 3000);
However - this does not update the font-size within the markdown code blocks.
I don't see why this wouldn't also work with the Custom CSS and JS Loader extension, but haven't tested it
以下字体大小调整代码在该版本(目前的最新版)验证后有效：
你可以直接在Cursor IDE的安装目录下找到并修改 preload.js 文件来实现chat/composer窗口内的字体大小的更改：
1. 找到 Cursor IDE 的安装目录
通常，不同的操作系统路径会有所不同，如下：
Windows: 默认会安装在C:\Users<YourUsername>\AppData\Local\Programs\Cursor
MacOS: 默认会在 /Applications/Cursor.app/Contents/ 下
如果你不确定安装路径，可以通过查找可执行文件的路径来确认安装位置：
Windows: 右键点击桌面的快捷方式，选择“打开文件位置”。 MacOS: 使用 find /Applications -name "Cursor.app" 查找安装位置。
2. 找到 preload.js 文件
一旦你找到了 Cursor 的安装目录，你可以尝试在 resources 或者 app 目录下找到 preload.js 文件。Windows文件路径可能是： C:/Users/<YourUsername>/AppData/Local/Programs/Cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.js
3. 修改 preload.js 文件
然后在文件中加入以下代码:
setTimeout(() => {
// 创建样式字符串
var css = `
.input-box-button.full-input-box-button,
.full-input-box-button.full-unclickable,
.full-input-box-button.codebase.full-unclickable,
.full-input-box-button.cursor-flash-box,
.ya-solid-dropdown-menu li,
.ya-solid-dropdown-menu div,
.context-pill.context-pill-default,
div.cursor-button,
.monaco-scrollable-element .tab,
.composer-message-code-pill > span:nth-child(2),
.esc-to-close,
.ya-solid-dropdown button,
.composer-button-area .composer-bar-button,
[id^="message-rendered-"] {
font-size: 14px !important;
}
.ya-solid-dropdown button {
color: white !important;
}
.markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text {
font-size: 15px !important;
}
.aichat-container {
font-size: 120% !important;
line-height: 120% !important;
}
`;
// 创建 style 标签
var style = document.createElement('style');
style.type = 'text/css';
// 添加样式到 style 标签
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
// 将 style 标签附加到 head
document.head.appendChild(style);
}, 3000);
这段代码会在页面加载后 3 秒修改聊天窗口相关的字体大小。
4. 保存并重启 Cursor IDE 保存 preload.js 文件的修改后，重启 Cursor IDE，查看修改是否生效
The following font resizing code is valid after validation of this version (the latest version currently available) :
You can directly find and modify the preload.js file in the installation directory of Cursor IDE to change the font size within the chat/composer window:
1. Locate the installation directory of Cursor IDE
Typically, the path varies depending on the operating system, as follows:
Windows: By default, it's installed in C:\Users<YourUsername>\AppData\Local\Programs\Cursor
MacOS: By default, it is in /Applications/Cursor.app/Contents/
If you're unsure about the installation path, you can confirm it by locating the executable file:
Windows: Right-click the desktop shortcut and select "Open file location." MacOS: Use find /Applications -name "Cursor.app" to find the installation location.
2. Find the preload.js file
Once you've located Cursor’s installation directory, try finding the preload.js file in the resources or app directory. The file path on Windows might be: C:/Users/<YourUsername>/AppData/Local/Programs/Cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.js
3. Modify the preload.js file
Then, add the following code into the file:
setTimeout(() => {
// 创建样式字符串
var css = `
.input-box-button.full-input-box-button,
.full-input-box-button.full-unclickable,
.full-input-box-button.codebase.full-unclickable,
.full-input-box-button.cursor-flash-box,
.ya-solid-dropdown-menu li,
.ya-solid-dropdown-menu div,
.context-pill.context-pill-default,
div.cursor-button,
.monaco-scrollable-element .tab,
.composer-message-code-pill > span:nth-child(2),
.esc-to-close,
.ya-solid-dropdown button,
.composer-button-area .composer-bar-button,
[id^="message-rendered-"] {
font-size: 14px !important;
}
.ya-solid-dropdown button {
color: white !important;
}
.markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text {
font-size: 15px !important;
}
.aichat-container {
font-size: 120% !important;
line-height: 120% !important;
}
`;
// 创建 style 标签
var style = document.createElement('style');
style.type = 'text/css';
// 添加样式到 style 标签
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
// 将 style 标签附加到 head
document.head.appendChild(style);
}, 3000);
This code will change the font size for the chat window after 3 seconds when the page is loaded.
4. Save and restart Cursor IDE After saving the modifications to the preload.js file, restart Cursor IDE and check if the changes take effect.
setTimeout(() => { // 创建样式字符串 var css = ` .aichat-container { font-size: 18px !important; /* 修改聊天窗口字体大小 / line-height: 120% !important; / 保持行高 */ }
.input-box-button.full-input-box-button,
.full-input-box-button.full-unclickable,
.full-input-box-button.codebase.full-unclickable,
.full-input-box-button.cursor-flash-box,
.ya-solid-dropdown-menu li,
.ya-solid-dropdown-menu div,
.context-pill.context-pill-default,
div.cursor-button,
.monaco-scrollable-element .tab,
.composer-message-code-pill > span:nth-child(2),
.esc-to-close,
.ya-solid-dropdown button,
.composer-button-area .composer-bar-button,
[id^="message-rendered-"] {
font-size: inherit !important; /* 确保不影响其他元素 */
}
.ya-solid-dropdown button {
color: white !important;
}
.markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text {
font-size: 15px !important;
}
`;
// 创建 style 标签
var style = document.createElement('style');
style.type = 'text/css';
// 添加样式到 style 标签
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
// 将 style 标签附加到 head
document.head.appendChild(style);
}, 3000); 改成了保持IDE顶部的字体大小不变，只修改AI chat窗口的字体大小
setTimeout(() => { // 创建样式字符串 var css = ` .aichat-container { font-size: 18px !important; /* 修改聊天窗口字体大小 / line-height: 120% !important; / 保持行高 */ }
.input-box-button.full-input-box-button, .full-input-box-button.full-unclickable, .full-input-box-button.codebase.full-unclickable, .full-input-box-button.cursor-flash-box, .ya-solid-dropdown-menu li, .ya-solid-dropdown-menu div, .context-pill.context-pill-default, div.cursor-button, .monaco-scrollable-element .tab, .composer-message-code-pill > span:nth-child(2), .esc-to-close, .ya-solid-dropdown button, .composer-button-area .composer-bar-button, [id^="message-rendered-"] { font-size: inherit !important; /* 确保不影响其他元素 */ }
.ya-solid-dropdown button { color: white !important; }
.markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text { font-size: 15px !important; } `;
// 创建 style 标签 var style = document.createElement('style'); style.type = 'text/css';
// 添加样式到 style 标签 if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); }
// 将 style 标签附加到 head document.head.appendChild(style); }, 3000); Changed to keep the font size of the top of the IDE unchanged and only change the font size of the AI chat window
The following font resizing code is valid after validation of this version (the latest version currently available) :
You can directly find and modify the preload.js file in the installation directory of Cursor IDE to change the font size within the chat/composer window:
1. Locate the installation directory of Cursor IDE
Typically, the path varies depending on the operating system, as follows:
Windows: By default, it's installed in C:\Users<YourUsername>\AppData\Local\Programs\Cursor MacOS: By default, it is in /Applications/Cursor.app/Contents/ If you're unsure about the installation path, you can confirm it by locating the executable file:
Windows: Right-click the desktop shortcut and select "Open file location." MacOS: Use find /Applications -name "Cursor.app" to find the installation location.
2. Find the preload.js file
Once you've located Cursor’s installation directory, try finding the preload.js file in the resources or app directory. The file path on Windows might be: C:/Users//AppData/Local/Programs/Cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.js
3. Modify the preload.js file
Then, add the following code into the file:
setTimeout(() => { // 创建样式字符串 var css = ` .input-box-button.full-input-box-button, .full-input-box-button.full-unclickable, .full-input-box-button.codebase.full-unclickable, .full-input-box-button.cursor-flash-box, .ya-solid-dropdown-menu li, .ya-solid-dropdown-menu div, .context-pill.context-pill-default, div.cursor-button, .monaco-scrollable-element .tab, .composer-message-code-pill > span:nth-child(2), .esc-to-close, .ya-solid-dropdown button, .composer-button-area .composer-bar-button, [id^="message-rendered-"] { font-size: 14px !important; } .ya-solid-dropdown button { color: white !important; } .markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text { font-size: 15px !important; } .aichat-container { font-size: 120% !important; line-height: 120% !important; } `; // 创建 style 标签 var style = document.createElement('style'); style.type = 'text/css'; // 添加样式到 style 标签 if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } // 将 style 标签附加到 head document.head.appendChild(style); }, 3000);
This code will change the font size for the chat window after 3 seconds when the page is loaded.
4. Save and restart Cursor IDE After saving the modifications to the preload.js file, restart Cursor IDE and check if the changes take effect.
This actually works, for the font size of the chat text I added
.markdown-section {
font-size:15px
}
The following font resizing code is valid after validation of this version (the latest version currently available) :
You can directly find and modify the preload.js file in the installation directory of Cursor IDE to change the font size within the chat/composer window: 1. Locate the installation directory of Cursor IDE Typically, the path varies depending on the operating system, as follows: Windows: By default, it's installed in C:\Users\AppData\Local\Programs\Cursor MacOS: By default, it is in /Applications/Cursor.app/Contents/ If you're unsure about the installation path, you can confirm it by locating the executable file: Windows: Right-click the desktop shortcut and select "Open file location." MacOS: Use find /Applications -name "Cursor.app" to find the installation location. 2. Find the preload.js file Once you've located Cursor’s installation directory, try finding the preload.js file in the resources or app directory. The file path on Windows might be: C:/Users//AppData/Local/Programs/Cursor/resources/app/out/vs/base/parts/sandbox/electron-sandbox/preload.js 3. Modify the preload.js file Then, add the following code into the file:
setTimeout(() => { // 创建样式字符串 var css = ` .input-box-button.full-input-box-button, .full-input-box-button.full-unclickable, .full-input-box-button.codebase.full-unclickable, .full-input-box-button.cursor-flash-box, .ya-solid-dropdown-menu li, .ya-solid-dropdown-menu div, .context-pill.context-pill-default, div.cursor-button, .monaco-scrollable-element .tab, .composer-message-code-pill > span:nth-child(2), .esc-to-close, .ya-solid-dropdown button, .composer-button-area .composer-bar-button, [id^="message-rendered-"] { font-size: 14px !important; } .ya-solid-dropdown button { color: white !important; } .markdown-code-block-header + div .view-lines.monaco-mouse-cursor-text { font-size: 15px !important; } .aichat-container { font-size: 120% !important; line-height: 120% !important; } `; // 创建 style 标签 var style = document.createElement('style'); style.type = 'text/css'; // 添加样式到 style 标签 if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } // 将 style 标签附加到 head document.head.appendChild(style); }, 3000);
This code will change the font size for the chat window after 3 seconds when the page is loaded. 4. Save and restart Cursor IDE After saving the modifications to the preload.js file, restart Cursor IDE and check if the changes take effect.
This actually works, for the font size of the chat text I added
.markdown-section { font-size:15px }
Confirmed working for version 0.43.5 on MacOS
Also FYI your first two images don't load at all, and clicking links shows a 404 which indicates the issue may be related to privacy settings for your uploaded images
That's properly because when I upload the image my internet went down for a sec. 🤣
Hello friends who are struggling like me! To adapt to the latest version of Cursor, I’ve started a new project aimed at solving the frustrating issues we’ve all faced. During development, Cursor’s powerful features have been a huge help, allowing me to achieve my goals more efficiently. The project is still in its early stages, with limited time and many features yet to be perfected. I hope we can make it better together! If you’re interested or have ideas for improvement, feel free to submit PRs or share your suggestions anytime. Project link: https://github.com/scoful/CursorStyler Let’s PR together and make it even better!
跟我一样备受困扰的朋友们，注意啦！ 为了适配最新版本的 Cursor，我启动了一个新项目，旨在解决我们都曾遇到的那些头疼问题。在开发过程中，Cursor 的强大功能给了我很多帮助，让我能够更高效地实现项目目标。 项目目前还在初期阶段，时间有限，功能上还有很多不足，但希望借助大家的力量一起完善它！如果你也对这方面感兴趣，或者愿意帮助改进，欢迎随时来提 PR 或给出建议！ 项目地址： https://github.com/scoful/CursorStyler 一起来 PR，让它变得更好！
