You need to enable this.
Thank you for this tip! Life changing 
Curious if anyone has found a way to make the color of the text of your inputs in the chat a different color using APC Customize UI extension? Sometimes I’m scrolling up through Composer trying to find a message I sent previously in the convo and being able to differentiate my inputs with a different color would make it easier to find.
There is A LOT going on in the chat now with the latest improvements Cursor has made which I love, but it would be nice to be able to find my inputs more easily in the mix of all the formatted outputs.
@truell20 you might consider building this into Cursor’s chat styling. Or perhaps adding a button to each input window next to the existing edit and revert buttons that would scroll you up to the previous input.
This technique using the APC Customize UI extension and adding to your editor settings : “apc.stylesheet”: { “.anysphere-markdown-container-root”: “font-size: 16px; line-height: 1.4;” } is no longer working.
It seems a recent release broke it.
Any ideas on the correct CSS to add to fix it?
Hey, yes, APC no longer works. You can try this extension. It does roughly the same thing, and I’m using it at the moment.
2 Likes
@deanrie Does this extension use the same settings JSON?
@devgrinder @julianhucas Hi!
you should install “Custom UI Style” (just like deanrie said)and just change the
“apc.stylesheet”
into
“custom-ui-style.stylesheet”
and everything will be right
4 Likes
Additionally, the ‘VSCode Animations’ plugin I installed has now optionally changed its engine from ‘Apc Customize UI++’ to ‘Custom UI Style’. I’ve now delegated all my styling-related tasks to it, and I didn’t have to put in much effort - this plugin is really great.
Hello, I installed the " Custom UI Style" extension and inserted this snippet to my User settings.json but I don’t see any changes at all. How to fix this?
"custom-ui-style.stylesheet": {
".anysphere-markdown-container-root": "font-size: 16px; line-height: 1.4;"
}
You need “Ctrl＋Shift＋P” and enable it by using the command of the extension like “Enable ui costom style extension”
or someone？（I’m on Chinese New Year, so I can’t give you the accurate command, but it’s roughly right, you may need some try~）
Thanks! I miss the usage docs and it’s actually Custom UI Style: Reload
I also found the class to adjust the code blocks as well.
"custom-ui-style.stylesheet": {
// Adjust Chat UI text
".anysphere-markdown-container-root": "font-size: 16px; line-height: 1.4;",
// Adjust Chat UI Code block
".markdown-block-code *": "font-size: 16px !important; line-height: 1.4;"
}
The only thing that I could not figure out yet is to how to apply word wrap for the code blocks. I tried adding
white-space: pre-wrap;
word-wrap: break-word;
but it didn’t work.
For those installing cursor with Appimage, the mount directory is read-only, here’s the solution taken from this github comment:
-
Open a terminal and navigate to the directory where you downloaded the AppImage.
-
Make the AppImage executable:
chmod +x cursor-0.40.4x86_64.AppImage -
Create a new directory to extract the content:
mkdir ~/cursor-extracted -
Extract the contents of the AppImage:
./cursor-0.40.4x86_64.AppImage --appimage-extract -
Move the extracted content to the new directory:
mv squashfs-root/* ~/cursor-extracted/ -
Create a startup script for Cursor:
cat << EOF > ~/run-cursor.sh #!/bin/bash export TMPDIR=\$HOME/cursor-temp mkdir -p \$TMPDIR cd ~/cursor-extracted ./AppRun "\$@" EOF -
This script sets up a custom temporary directory to avoid permission issues.
-
Make the script executable:
chmod +x ~/run-cursor.sh -
Run Cursor using the new script:
~/run-cursor.sh -
Ctrl+Shift+P User Settings (JSON)
-
Config example using Terminus font, for this font set all lineHeight values to 18:
[...] "custom-ui-style.font.monospace": "'Terminus (TTF)', 'Droid Sans Mono', monospace", "custom-ui-style.font.sansSerif": "'Terminus (TTF)', 'Droid Sans Mono', monospace", "custom-ui-style.stylesheet": { // Adjust Chat UI text ".anysphere-markdown-container-root": "font-size: 12px; line-height: 1.8;", // Adjust Chat UI Code block ".markdown-block-code *": "font-size: 12px !important; line-height: 1.8;", // Adjust Chat Font ".aislash-editor-input": "font-size: 14px !important; line-height: 1.8 !important;", ".aislash-editor-input-readonly": "font-size: 14px !important; line-height: 1.8 !important;", ".aislash-editor-placeholder": "font-size: 14px !important; line-height: 1.8 !important;", // Others ".anysphere.cursor-retrieval": "font-size: 14px !important; line-height: 1.8 !important;", ".aiEditorBox-anysphere": "font-size: 14px !important; line-height: 1.8 !important;", ".aichat-code-block-anysphere": "font-size: 14px !important; line-height: 1.8 !important;", ".composer-code-block-anysphere": "font-size: 14px !important; line-height: 1.8 !important;", ".aicmdk-context-code-block-anysphere": "font-size: 14px !important; line-height: 1.8 !important;", // Explorer ".monaco-panel-view": "font-size: 12px !important; line-height: 1.8 !important;", ".monaco-list-row": "font-size: 12px !important; line-height: 1.8 !important;", ".monaco-workbench": "font-size: 12px !important; line-height: 1.8 !important;" } } -
A notification will appear bottom-left, click Yes, close Cursor and ~/run-cursor.sh
-
Example view:
1 Like
@mirage thank you! Worked for me!
Now, if only someone could help me increase the size of the font in the typing area of the chat sidebar… at my age I have to reach for reading glasses to read what I am typing!
This one works for me ".aislash-editor-input": "font-size: 15px !important; line-height: 1.5 !important;"
4 Likes
Your code is great, but I have a question. The line-height: 1.4 in ".markdown-block-code *" doesn’t seem to work properly (at least for me).
At the same time, it causes a mismatch between the rendered position and the actual position (as shown in the image below).
Would your line-height settings work correctly?
This one works for me
“custom-ui-style.stylesheet”: {
// Adjust Chat UI text
“.aislash-editor-input”: “font-size: 25px !important; line-height: 1.5 !important;”,
}
Here are my steps. Hope this helps anyone who is still struggling with small fonts.
You can hack this with the “Custom UI Style” extension.
Then add the following to setting.json, aupdate as you see fit.
This increases fonts in chat responses, code, and other places.
// UI Customization
"custom-ui-style.stylesheet": {
".anysphere-markdown-container-root": "font-size: 15px; line-height: 1.3;",
// Adjust Chat UI Code block
".markdown-block-code *": "font-size: 16px !important; line-height: 1.3;",
// Adjust Chat Font
".aislash-editor-input": "font-size: 16px !important; line-height: 1.3 !important;",
".aislash-editor-input-readonly": "font-size: 16px !important; line-height: 1.3 !important;",
".aislash-editor-placeholder": "font-size: 16px !important; line-height: 1.3 !important;",
// Others
".anysphere.cursor-retrieval": "font-size: 16px !important; line-height: 1.3 !important;",
".aiEditorBox-anysphere": "font-size: 16px !important; line-height: 1.3 !important;",
".aichat-code-block-anysphere": "font-size: 16px !important; line-height: 1.3 !important;",
".composer-code-block-anysphere": "font-size: 16px !important; line-height: 1.3 !important;",
".aicmdk-context-code-block-anysphere": "font-size: 16px !important; line-height: 1.3 !important;",
// Diff editors in right panel
".monaco-diff-editor .monaco-editor .view-lines": "font-size: 16px !important; line-height: 1.3 !important;",
".monaco-diff-editor .monaco-editor .view-overlays": "font-size: 16px !important; line-height: 1.3 !important;",
// Side panel Monaco editors
".monaco-mouse-cursor-text *": "font-size: 16px !important; line-height: 1.3 !important;",
".composer-message-codeblock .monaco-editor .view-lines": "font-size: 16px !important; line-height: 1.3 !important;",
".composer-message-codeblock .monaco-editor .view-overlays": "font-size: 16px !important; line-height: 1.3 !important;"
}
4 Likes
I AM SICK TO DEATH BECAUSE OF THIS PROBLEM. Not only due to the size of text and code in the chat pane are absolutely UNREADABLE, but also because it seems to me that fixing this problem is not a big deal for developers, but it never happens.
ALL of the solutions are BROKEN once automatically update occurs.
SOLUTION ONE: Use extensions. BROKE after each update. Most importantly, it destroys the Python Jupiter notebook function. If you turn on that Customize UI extension and add those configs mentioned above, Jupiter notebook will no longer able to be rendered. To fix this, you need to REINSTALL cursor. Disable that extension or modify config won’t work.
SOLUTION TWO: Hack into preload.js
BROKE after each update. You done all this at one night, and tomorrow morning, it updated. All gone.
SOLUTION THREE: global zoom in using ctrl shift +/-. The title bar, icons, etc. become bigger and they will occupy a large proportion of the screen. It just looks very bad.
SOLUTION FOUR: Drag the chat editor into a new window and do zoom in in that separate window: it causes bugs, like can’t type occasionally, unable to add files, etc.
All solutions to this problem either broke after update, or introduce other problems that hard to circumvent. At this time, I’m just curious about how cursor devs using cursor? Are they using enlarging lens to read those chat texts that are smaller than characters written on a cheating sheet?
3 Likes