How to change suggestions color?

How To
1

Maybe it’s possible, but I haven’t found it. I would like to change a text color/decoration from Cursor Tab (previously Copilot++), preferably only from Cursor Tab, so I can distinguish suggestions from AI and algorithmic ones (from IDE).

For example:

2024-08-11_08-59

First , is a real character in the source code, second and third , are a suggestion.

5 Likes
2

Interesting idea, I did a quick search for:

copilot vs code autocomplete text color

And came across this discussion:

Allow custom color on copilot suggestions
https://github.com/orgs/community/discussions/7447

There might be some related discussion in there, I am going to try looking around in Cursor > Help > Toggle Developer Tools for some of the suggested CSS classes mentioned there.

Edit:

I changed a bunch of CSS styles in the dev tools area to have a lime color, but it didn’t seem to have an effect, so I gave up and moved on to the work I should be doing…later I did a ‘find in files’ and saw some nice lime colors in the interface :sweat_smile:.

lime
lime778×427 14.2 KB

1 Like
3

If you install the Custom CSS extension, then the following should get you started:

/* The pop up windows - these are hard to see in some themes */
.cursorHoverWidget > .buttonContainer,
.cppButtonContainer > div {
	border: 1px solid magenta !important;
}
/* The inline suggested text */
.monaco-editor .ghost-text-decoration,
.monaco-editor .ghost-text-decoration-preview,
.monaco-editor .suggest-preview-text .ghost-text {
	color: magenta !important;
}
/* Suggested text blocks */
.monaco-editor.no-user-select .view-zones > div {
	border-top: 1px dashed magenta;
	border-bottom: 1px dashed magenta;
}
4

This needs to be taken more seriously. The color contrast is so bad, its messing with my workflow.

1 Like
5

This is the most customizable option, but using it corrupts the Cursor.app so I’m not a big fan. Every time you open Cursor, the following notification appears: “Your Cursor installation appears to be corrupt. Please reinstall”. If these notifications don’t bother you, it’s a very cool extension with tons of possibilities.

This is the best way IMO. It’s effective, simple, customizable, and requires no third-party extensions/dependencies. I understand my color combo is a bit ugly, but I care more about it being easy to see than looking good. Feel free to play around with the colors until you find something you like.

See Theme Color | Visual Studio Code Extension API for more customization features to play around with.

Add this code to your project’s “.vscode/settings.json” or you can apply it globally with the User-level settings.json file. You can enter the “>Preferences: Open User Settings (JSON)” or “>Preferences: Open Workspace Settings (JSON)” command in Cursor to automatically open up these files.

    // Custom IDE formatting
    "workbench.colorCustomizations": {

        // Color of markdown code chunks when opened with VSCode's "Open Preview to the Side" feature.
        "textCodeBlock.background": "#71797E",

        // Autocomplete colors:
        // Border color
        "editorGhostText.border": "#0000ff",
        // Font color
        "editorGhostText.foreground": "#000000",
        // Background color
        "editorGhostText.background": "#ffff00",

    },