AI chat panel background uses editor color instead of sidebar color (workaround included)

Support Bug Reports
, ,
1

Where does the bug appear (feature/product)?

Cursor IDE

Describe the Bug

The AI chat panel uses --vscode-editor-background for its background color instead of --vscode-sideBar-background. This makes the chat panel a lighter color than the left sidebar (file explorer, etc.), reducing contrast and making it blend into the editor.

This was reported in this closed topic where the reporter (Charles) confirmed that the suggested fix from Cursor staff didn’t work — changing editor.background just changes both the editor and chat panel together. The chat panel is picking up the editor color instead of the sidebar color, and this needs to be reverted on Cursor’s side.

Additionally, link colors in the chat panel use --cursor-text-link (#2472C8) instead of --vscode-textLink-foreground (#4daafc), resulting in a contrast ratio of only 3.64 which fails WCAG AA accessibility standards.

A workaround using Custom CSS injection is provided below.

Steps to Reproduce

  1. Use any dark theme (e.g. Default Dark Modern)
  2. Open the AI chat panel in the sidebar
  3. Compare the chat panel background to the left sidebar (file explorer) — the chat panel is noticeably lighter
  4. Inspect the element: the auxiliary bar has background-color: var(--vscode-editor-background) instead of var(--vscode-sideBar-background)

Expected Behavior

The AI chat panel background should match the sidebar background color (--vscode-sideBar-background), not the editor background. Links should use --vscode-textLink-foreground for proper contrast.

Workaround

Install the Custom CSS and JS Loader extension and apply this CSS:

.part.auxiliarybar {
  background-color: var(--vscode-sideBar-background) !important;
}

.composer-bar.editor {
  --composer-pane-background: var(--vscode-sideBar-background) !important;
}

.markdown-root a,
.markdown-root .md-clickable-code {
  color: var(--vscode-textLink-foreground) !important;
}

Full setup instructions:

  1. Download the VSIX from the VS Code marketplace and install with cursor --install-extension path/to/vsix (it may not appear in Cursor’s marketplace directly)
  2. Create the CSS file at ~/.config/cursor/custom-cursor.css with the above content
  3. Add "vscode_custom_css.imports": ["file:///path/to/custom-cursor.css"] to settings.json
  4. Run “Enable Custom CSS and JS” from the Command Palette (admin required on Windows)
  5. Install Fix VSCode Checksums Next and run “Fix Checksums: Apply” to dismiss the corrupt installation warning
  6. Restart Cursor

The fix persists across sessions but needs to be re-enabled after Cursor updates (Command Palette → “Reload Custom CSS and JS”).

AI-friendly prompt — paste this into Cursor’s Agent chat to have it do the entire setup for you:

Do the following steps for me:

  1. Download and install the Custom CSS and JS Loader extension (publisher: be5invis, extension: vscode-custom-css). It’s not in Cursor’s marketplace, so download the VSIX from https://be5invis.gallery.vsassets.io/_apis/public/gallery/publisher/be5invis/extension/vscode-custom-css/7.4.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage and install it with cursor --install-extension path/to/file.vsix.

  2. Do the same for Fix VSCode Checksums Next (publisher: RimuruChan, extension: vscode-fix-checksums-next, version 1.4.0) using the same URL pattern.

  3. Create a file at ~/.config/cursor/custom-cursor.css with this content:

.part.auxiliarybar {
  background-color: var(--vscode-sideBar-background) !important;
}
.composer-bar.editor {
  --composer-pane-background: var(--vscode-sideBar-background) !important;
}
.markdown-root a,
.markdown-root .md-clickable-code {
  color: var(--vscode-textLink-foreground) !important;
}
  1. Add "vscode_custom_css.imports" to my Cursor settings.json pointing to that CSS file using a file:/// URL (adjust for my OS).

After that, tell me to run these commands from the Command Palette: “Enable Custom CSS and JS”, then “Fix Checksums: Apply”, then restart Cursor.

Operating System

Windows 10/11

Version Information

Version: 3.0.13
Commit: 48a15759f53cd5fc9b5c20936ad7d79847d914b0
Date: 2026-04-07T03:05:17.114Z
Layout: editor
Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Cursor/3.0.13 Chrome/142.0.7444.265 Electron/39.8.1 Safari/537.36

Does this stop you from using Cursor

No - Cursor works, but with this issue

6

Thanks for the detailed report and the workaround – that Custom CSS setup is genuinely helpful for anyone who wants the chat panel to match the sidebar.

On the background color: the chat panel currently uses editor.background by design. It’s styled as an editor surface rather than a sidebar, which is why customizing sideBar.background doesn’t affect it (as this earlier thread also found). Your CSS injection workaround is the best option for now if you want the panel to match the sidebar color.

On the link color contrast: this is a known issue. The chat panel uses a different color token for links that can produce poor contrast, especially on darker themes. Our team is aware and working on it.