Custom VsCode Theming for Cursor AI Panel?

General
1

Hello Devs or anyone who knows! I am creating my own theme and I love Cursor and am wondering where can I locate the elements or what are the elements I need to target in order to change the theming for the Cursor AI Panel? I have been able to change the background, the placeholder, and the input border but not the buttons. For example the buttons within the input field, the buttons that overlay code blocks, and the AI Panel titles themselves (the “Chat” and “Review” tabs) and also the “Review” tabs buttons and input fields, etc.

2

I found most of the elements Cursor was targeting. Feel free to check out my theme and use it and leave feedback!

3

It appears all you must do is do a “command + shift + p” and search for “Developer: Generate Color Theme From Current Settings”! I updated the “Night Quill” theme using this strategy! Feel free to use the updated version lol! Thanks to all Cursor Devs for the neat functionality!

4

Have you ran across if there’s a way to set the background color of the user’s text in the UI chat panel? Having a border around it doesn’t stick out much. I’m too used to my ViolentMonkey script that changes the user’s and ChatGPT’s text background on chatgpt. (It stopped working recently though, so I have to see what ChatGPT changed about their site…)

5

Are you referring to the chat background in Cursor? I’m customizing it using this plugin: Chat.editor.fontsize setting has no effect - #6 by deanrie

6

Great extension! Yes, here’s what I’d love the AI chat window to be able to look like. I already have the background set as pure black, so it’s just setting the background of the user and ai model text areas.

Screenshot_20240916_052015_crop
Screenshot_20240916_052015_crop875×344 16.6 KB

Trying to follow the APC Customize UI++ instructions, and working through the devtools provided HTML with ChatGPT to come up with selectors, I tried installing the extension and adding this to my settings.json:

"apc.stylesheet": {
    /* Target odd-numbered user input divs */
    ".pane-body.aichat-pane.wide div.aichat-container > div:nth-child(odd) > div > div:first-child": {
      "background-color": "#288b8b !important"
    },
    
    /* Target even-numbered AI response divs but deeper */
    ".pane-body.aichat-pane.wide div.aichat-container > div:nth-child(even) > div > div > div:first-child": {
      "background-color": "#206565 !important"
    }
  }

Unfortunately, even after restarting, it had no effect.

I tried something simplier, but it didn’t have an effect either.

"apc.stylesheet": {
    ".pane-body.aichat-pane": "background-color: #ff0000 !important"
}

I see the extension says that you might need to allow VSCode to modify itself by changing file ownership to the current user. I’m running Cursor as an AppImage, so even if I wanted to do that, that’s not an option… I’m not sure if that’s even the issue though.

1 Like