From 1c6c3130595b1b7fe75a12c96a87a14f0c74487a Mon Sep 17 00:00:00 2001
From: Hoang Nam Le <hnam.le662@gmail.com>
Date: Wed, 17 Jun 2026 20:38:28 -0400
Subject: [PATCH] fix(ui): correct light-mode contrast in code hover preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 packages/editor/index.css                 | 7 +++++++
 packages/ui/components/InlineMarkdown.tsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor/index.css b/packages/editor/index.css
index 6e5ab535f8..0938d0a2e6 100644
--- a/packages/editor/index.css
+++ b/packages/editor/index.css
@@ -41,6 +41,13 @@ pre code.hljs .hljs-code {
   color: oklch(0.25 0.02 260) !important;
 }
 
+/* The code-file hover preview is a <div class="hljs">, so the pre code.hljs
+   rule above misses it. The unscoped .hljs-* token rules below already color
+   its tokens; this just supplies the matching default text color. */
+.light .code-snippet-preview {
+  color: oklch(0.25 0.02 260) !important;
+}
+
 .light .hljs-keyword,
 .light .hljs-selector-tag,
 .light .hljs-built_in,
diff --git a/packages/ui/components/InlineMarkdown.tsx b/packages/ui/components/InlineMarkdown.tsx
index 97a2cdc526..77617d930c 100644
--- a/packages/ui/components/InlineMarkdown.tsx
+++ b/packages/ui/components/InlineMarkdown.tsx
@@ -94,7 +94,7 @@ const CodeSnippetPreview: React.FC<{
         <span>{filepath.split('/').pop()}</span>
         <span className="opacity-60">{lineEnd && lineEnd !== line ? `lines ${line}–${lineEnd}` : `line ${line}`}</span>
       </div>
-      <div className="hljs overflow-auto text-[12px] leading-5 min-h-0" style={{ padding: 0, background: 'var(--color-muted, #1e293b)' }}>
+      <div className="hljs code-snippet-preview overflow-auto text-[12px] leading-5 min-h-0" style={{ padding: 0, background: 'var(--code-bg, #1e293b)' }}>
         <table className="border-collapse w-full">
           <tbody>
             {snippet.split('\n').map((_, i) => (