Repository navigation
fix(ui): correct light-mode contrast in code hover preview - #934
Merged
backnotprop merged 1 commit intoJun 19, 2026
Merged
Conversation
The code-file hover preview (CodeSnippetPreview) reuses the github-dark hljs theme, whose default text color is tuned for a dark background. The popover body hardcoded a generic --color-muted background that resolves light in light mode, leaving light-gray text on a light surface (washed out). Dark mode was unaffected. The preview renders as a <div class="hljs"> and only appears in the plan and annotate apps, which load editor/index.css. That stylesheet already has unscoped .light .hljs-* rules (which color the preview's tokens) and a default-color override — but the latter is scoped to pre code.hljs, so the div misses it. Fix: switch the popover background to the theme-aware --code-bg and add the matching light-mode default text color next to the existing overrides.
Owner
|
Nice work. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The code hover preview is a great feature, I noticed there was a tiny but kinda really glaring visual bug (excuse the pun)
In light mode, the code-file hover preview - the syntax-highlighted snippet popover shown when hovering an inline
file.ts:10-20reference (added in #692) - renders with very low contrast. The snippet text washes out against the popover background. Dark mode is unaffected, this doesn't affect that case.Root Cause
The preview body is a
<div class="hljs">colored by the github-dark highlight.js theme, whose default text color is tuned for a dark background. But the popover hardcoded a generic--color-mutedbackground, which resolves light in light themes, so you get light-gray default text on a light surface.packages/editor/index.cssalready handles this class of issue for code blocks in #234: it has unscoped.light .hljs-*token rules and a light-mode default-text override. The token rules already reach the preview, but the default-text override is scoped topre code.hljs, so thediv-based popover never receives it and we get that washed out text :((Note, the preview only renders in the plan and annotate apps, both of which load
editor/index.css)Changes
packages/ui/components/InlineMarkdown.tsx: give the preview body acode-snippet-previewclass and switch its background from--color-mutedto the theme-aware--code-bg(light in light themes, dark in dark themes, matching the app's other code surfaces).packages/editor/index.css: add a light-mode default-text color for.code-snippet-preview, right next to the existingpre code.hljsoverride. The existing unscoped.light .hljs-*token rules keep coloring the tokens.Testing
bun test packages/ui/components/InlineMarkdown.test.ts, all 13 tests passAfter: light mode
After: dark mode (unchanged):
Let me know if there's anything else I need to do, and feel free to contribute to the PR as well