All links and icons in hover tooltips use wrong color due to MAX MODE CSS rule

[yukishinonome (Yuki Yamakoshi)]

Where does the bug appear (feature/product)?

Cursor IDE

Describe the Bug

All clickable elements (links, action icons) inside editor hover tooltips are rendered with the wrong color. A CSS rule intended for the MAX MODE tooltip (.max-tooltip-link) has an overly broad selector that also matches .hover-contents .rendered-markdown a, applying color: var(--vscode-activityBarBadge-background) !important to every link in any hover tooltip. This overrides the correct var(--vscode-textLink-foreground) color, making links and icons nearly unreadable on dark themes.

Affected elements include:

• JSDoc {@link} type references in TypeScript hovers
• GitLens blame hover action icons and links (e.g., “Explain”, “Connect to GitHub…”)
• GitHub Issue/PR reference links
• Any other <a> element inside .hover-contents .rendered-markdown

Steps to Reproduce

1. Use any dark theme (e.g., Dark High Contrast).
2. Trigger any hover tooltip that contains clickable links or icons. For example:

• Hover over a TypeScript function with a JSDoc {@link} tag
• Hover over a line with GitLens blame annotations

3. Observe the color of all links, action icons, and clickable text in the tooltip.

Expected Behavior

Links and icons should use var(--vscode-textLink-foreground) (e.g., #21A6FF on Dark High Contrast), consistent with standard VS Code behavior.

Actual Behavior

All links and icons use var(--vscode-activityBarBadge-background) instead, resulting in low-contrast, nearly unreadable elements against the dark tooltip background.

The root cause CSS rule in workbench.desktop.main.css:

.hover-contents .rendered-markdown a, .max-tooltip-link {
    color: var(--vscode-activityBarBadge-background) !important;
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    text-decoration: none !important;
}

This overrides the correct rule:

.monaco-editor .monaco-hover a {
    color: var(--vscode-textLink-foreground); /* overridden by !important */
}

Screenshots / Screen Recordings

Operating System

MacOS

Version Information

Version: 2.6.18
VSCode Version: 1.105.1
Commit: 68fbec5aed9da587d1c6a64172792f505bafa250
Date: 2026-03-10T02:01:17.430Z
Build Type: Stable
Release Track: Default
Electron: 39.6.0
Chromium: 142.0.7444.265
Node.js: 22.22.0
V8: 14.2.231.22-electron.0
OS: Darwin arm64 25.2.0

For AI issues: which model did you use?

N/A — this is a CSS styling bug in the editor UI, not related to AI features.

For AI issues: add Request ID with privacy disabled

N/A

Additional Information

Suggested fix: scope the CSS rule to .max-tooltip-link only:

/* Before (broken) */
.hover-contents .rendered-markdown a, .max-tooltip-link { ... }

/* After (fixed) */
.max-tooltip-link { ... }

Additionally, display: inline-flex, font-size: 12px, and other layout properties are also unintentionally applied to all hover links, potentially affecting their layout and sizing.

This bug does not prevent using Cursor, but it significantly degrades the readability and usability of hover tooltips across all themes, especially high-contrast themes. Links and action icons become nearly invisible.

Does this stop you from using Cursor

No - Cursor works, but with this issue

[deanrie]

Hey, thanks for the detailed report. The root cause analysis is really top-notch.

Confirmed, this is a bug on our side. The .hover-contents .rendered-markdown a selector in the CSS for the MAX MODE tooltip is indeed too broad and affects all hover links in the editor. From your screenshot, links and icons are basically unreadable on the dark theme.

I’ve passed this to the team. There’s no timeline yet, but your report will help with prioritization. Let me know if you notice anything else.