Skip to content

fix(highlights): prevent gray decoration box in Cursor - #7

Merged
Yuki-zik merged 3 commits into
masterfrom
yuki-zik-fix-cursor-gray-decoration-box
Jul 8, 2026
Merged

Yuki-zik merged 3 commits into
masterfrom
yuki-zik-fix-cursor-gray-decoration-box

Conversation

@Yuki-zik

@Yuki-zik Yuki-zik commented Jul 8, 2026

Copy link
Copy Markdown
Owner

Fixes #1

Problem

In Cursor (a VS Code fork) the default neon+glass tag highlight rendered a solid gray rounded background block. In VS Code the identical config renders the intended translucent "glass" box (faint tint + colored border, rounded corners). The reporter noted the todo-highlight extension had the same problem in Cursor.

Root cause

Known VS Code/Cursor decoration behavior (microsoft/vscode#175819, wayou/vscode-todo-highlight#434): a TextEditorDecorationType that carries border + borderRadius without an explicit, co-located backgroundColor makes the editor paint a default fallback background — which renders gray in dark themes. Cursor exhibits this; stock VS Code currently does not.

buildGlassDecorationOptions in src/highlights.js put borderRadius on the decoration's base rule while backgroundColor/border lived only in the light/dark (theme-scoped) rules. The base rule therefore had border-radius with no background, so Cursor gray-filled it. This also matches the repo's own debugging_journal.md lesson about not splitting style props between the top level and the light/dark sub-objects.

Glass is the only decoration carrying border/radius (buildTextDecorationOptions, getSubTagDecoration, buildMetaDecorationOptions set neither), so the fix is isolated.

Fix

Rewrite buildGlassDecorationOptions so each themed object is a self-contained glass box:

  • Co-locate borderRadius into light/dark next to the border (dropped from the top level). borderRadius is a valid ThemableDecorationRenderOptions property, so this is API-safe and visually identical in VS Code.
  • Guarantee an explicit backgroundColor on any themed object that has a border/borderRadius; when the config supplies none, fall back to transparent (the documented upstream workaround).

The default neon+glass translucent tint is preserved, so VS Code's appearance is unchanged; the transparent fallback only protects border-only/custom configs. The four-channel model, range types, and opacity controls are untouched.

Tests

  • New test/highlights.decorations.tests.js (5 behavioral tests) asserts: no top-level borderRadius; borderRadius co-located with the border in light/dark; transparent fallback for border-only configs; the invariant that no glass theme has a border/borderRadius without an explicit background; and background-only configs are untouched.
  • _buildGlassDecorationOptions is exported for testing (mirrors existing _-prefixed test exports).

Verification

  • npx qunit test/highlights.decorations.tests.js → 5 passing
  • npm test → 124 passing (119 baseline + 5 new), 0 failing
  • npm run webpack → success

⚠️ Cursor is not installed in the dev environment used here (code CLI present, cursor absent), so final visual confirmation in Cursor should be done by a maintainer. The fix is justified by the confirmed upstream issue and the decoration-CSS reasoning above, and VS Code appearance is provably preserved (same border/radius/background values, only re-scoped).

Yuki-zik and others added 3 commits July 8, 2026 11:14
Co-locate borderRadius with the border/background it rounds in the light/dark theme objects and inject a transparent background whenever a glass theme carries a border or borderRadius without an explicit one. This stops Cursor from painting a fallback gray box on the decoration base rule (microsoft/vscode#175819, wayou/vscode-todo-highlight#434). VS Code appearance is unchanged.

Fixes #1

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
# Conflicts:
#	agent/tasks.md
#	agent/timeline.md
#	src/highlights.js
# Conflicts:
#	agent/tasks.md
#	agent/timeline.md
@Yuki-zik
Yuki-zik merged commit ad06b08 into master Jul 8, 2026
6 checks passed
@Yuki-zik
Yuki-zik deleted the yuki-zik-fix-cursor-gray-decoration-box branch July 8, 2026 07:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

【Bug Fix】cursor的文字高亮背景有问题

2 participants