diff --git a/apps/desktop/src/components/chat/shiki-highlighter.tsx b/apps/desktop/src/components/chat/shiki-highlighter.tsx index a0088e9ee..b015949ae 100644 --- a/apps/desktop/src/components/chat/shiki-highlighter.tsx +++ b/apps/desktop/src/components/chat/shiki-highlighter.tsx @@ -30,6 +30,18 @@ interface HermesSyntaxHighlighterProps extends SyntaxHighlighterProps { const SHIKI_THEME = { dark: 'github-dark-default', light: 'github-light-default' } as const +/** + * `github-light-default` colors comments `#6e7781` (~4.2:1 against the code + * card background) — borderline unreadable at our 11px code size, and worst of + * all for shell snippets where a single `#` turns the rest of the line into one + * long comment span. Remap light-mode comments to GitHub's darker muted gray + * (`#57606a`, ~6.4:1). Dark mode (`#8b949e`, ~6.1:1) already reads fine, so we + * leave it untouched. Keyed per theme name so the bump only applies in light. + */ +const SHIKI_COLOR_REPLACEMENTS: Record> = { + 'github-light-default': { '#6e7781': '#57606a' } +} + export const SyntaxHighlighter: FC = ({ components: { Pre }, language, @@ -76,6 +88,7 @@ export const SyntaxHighlighter: FC = ({